Canvas too large when reading a topojson file with Vincent

209 Views Asked by At

I want to display a topojson file using Vincent. I converted a shapefile to topojson with this command:

topojson -o /path/to/output/file.topo.json -- /path/to/input/file.shp

In order to display it, I'm using this code (in the Ipython Notebook):

import vincent
vincent.core.initialize_notebook()
world_topo = r'scot.topo.json'
geo_data = [{'name': 'countries',
              'url': world_topo,
             'feature': 'scot'}]

vis = vincent.Map(geo_data=geo_data, scale=1000)
vis.display()

However, this is the result:

enter image description here

Does anyone know why I get too much blank space using Vincent? This also happens without using the Ipython Notebook.

I also verified that shapefile in QGIS and it looks correct, so there is no extra blank space in the original file.

UPDATE:

I was able to center the image and reduce the amount of blank space but I'm not sure why it works. This is the code:

import vincent
vincent.core.initialize_notebook()
world_topo = r'scot.topo.json'
geo_data = [{'name': 'countries',
              'url': world_topo,
             'feature': 'scot'}]

vis = vincent.Map(geo_data=geo_data, scale=6000, center=[0,57])
vis.display()

enter image description here

Does anyone know what is the idea to get the right parameters? I tried first to get it working in D3 and although there are similarities in the code, vincent and d3 don't seem to produce the same result with the same parameters. This is the d3 code:

var width = 350,
    height = 450;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("scot.topo.json", function(error, s) {
  if (error) return console.error(error);
    var subunits = topojson.feature(s, s.objects.scot);
    var projection = d3.geo.albers()
        .center([0, 57])
        .rotate([4.4, 0])
        .parallels([50,60])
        .scale(4000)
        .translate([width / 2, height / 2]);
    var path = d3.geo.path()
        .projection(projection);
    svg.append("path")
        .datum(subunits)
        .attr("d", path);

}); 
0

There are 0 best solutions below