| license: mit |
Using an unprojected version of the us-10m.json so that the Albers USA projection may be applied and that d3-geo's projection.fitSize can be used to appropriately scale the rendering of the data to a small SVG container.
Thanks to @veltman for the tip.
Built with blockbuilder.org
forked from clhenrick's block: Debugging d3-geo projection.fitSize
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .chart { | |
| margin: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="320" height="200"></svg> | |
| <script> | |
| var svg = d3.select('svg'), | |
| width = +svg.attr('width'), | |
| height = +svg.attr('height'); | |
| d3.json('us-10m-unprojected.topojson', function(error, us) { | |
| if (error) throw error; | |
| // convert our topojson to geojson | |
| var states = topojson.feature(us, us.objects.state); | |
| // projection fn so we can fit geodata within svg's area | |
| var projection = d3.geoAlbersUsa().fitSize([width, height], states); | |
| // use projection fn with geoPath fn | |
| var path = d3.geoPath().projection(projection); | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height) | |
| .attr('class', 'chart'); | |
| svg.append("g") | |
| .attr("class", "states") | |
| .selectAll("path") | |
| .data(states.features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr('fill', '#fff') | |
| .attr('stroke', '#333'); | |
| }); | |
| </script> | |
| </body> |