D3: Is there a simple way to enlarge a map statically?

1.3k views Asked by At

I am attempting to create a map of my city but the default map is too small. I don't want to do anything like zooming (yet) but I would like to double the size displayed.

Here is an extract of the script

var projection;
var w=1200;
var h=800;
var x=-14100;
var y=7300;
var scale=66700;

projection=d3.geo.albers()
.translate([x,y])
.scale([scale]);
var path=d3.geo.path()
.projection(projection);
var svg=d3.select("#data-div")
.append("svg")
.attr("width",w)
.attr("height",h);
var category;

// GROUPS

var paths = svg.append("g"),
 circles = svg.append("g");

// TORONTO MAP JSON

d3.json("d3_files/json/new-toronto.json",function(error, data){
paths.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d",path)
.attr("name",function(data){
    return"<strong>name</strong>"
}) // end name attr
.style("fill",function(data){
    return"lightgrey";
}) // end fill style
.style("stroke","#000")
}); // end toronto json
1

There are 1 answers

4
Adam Pearce On

Instead of:

var scale=66700;

do:

var scale= 33350;

This will 'zoom' the projection out. From the API:

The scale factor corresponds linearly to the distance between projected points