Question

Using this as an example, how could I scale the graphic such that it’s zoomed in more. I ask because I’m looking to only visualize data for the state of Texas, so I want to change the scaling in order to make it bigger.

Is it possible to do the scaling using a built-in d3.js function, or does one have to modify the the transform values (scale and/or translate) present in the JSON data?

Answer 1

d3.geo.path() uses d3.geo.albersUsa() projection unless you define a new one. As far as I can tell, d3.geo.albersUsa does not offer any options to change the center, though you could change the scale. To do so, you need to explicitly define your projection and apply it to geo path, like so:

projection = d3.geo.albersUsa().scale(1500);  
path = d3.geo.path().projection(projection);

But you can use d3.geo.albers, which offers a center() function like most D3 projections:

projection = d3.geo.albers().scale(2000).center([0,30]);
path = d3.geo.path().projection(projection);

That should give you an albers-projected map of the USA centered on Texas.