This repository provides a convenient mechanism for generating TopoJSON files from the Census Bureau’s cartographic boundary shapefiles, 2015 edition.
In a browser (using d3-geo and SVG), bl.ocks.org/4108203:
<!DOCTYPE html>
<svg width="960" height="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("https://unpkg.com/us-atlas@1/us/10m.json", function(error, us) {
if (error) throw error;
svg.append("path")
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })));
svg.append("path")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
svg.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
});
</script>In a browser (using d3-geo and Canvas), bl.ocks.org/3783604:
<!DOCTYPE html>
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var context = d3.select("canvas").node().getContext("2d"),
path = d3.geoPath().context(context);
d3.json("https://unpkg.com/us-atlas@1/us/10m.json", function(error, us) {
if (error) throw error;
context.beginPath();
path(topojson.mesh(us));
context.stroke();
});
</script>In Node (using d3-geo and node-canvas), bl.ocks.org/885fffe88d72b2a25c090e0bbbef382f:
var fs = require("fs"),
d3 = require("d3-geo"),
topojson = require("topojson-client"),
Canvas = require("canvas"),
us = require("./node_modules/us-atlas/us/10m.json");
var canvas = new Canvas(960, 600),
context = canvas.getContext("2d"),
path = d3.geoPath().context(context);
context.beginPath();
path(topojson.mesh(us));
context.stroke();
canvas.pngStream().pipe(fs.createWriteStream("preview.png"));A TopoJSON topology containing three geometry collections: counties, states, and nation. The geometry is quantized, projected using d3.geoAlbersUsa to fit a 960×600 viewport, and simplified. This topology is derived from the Census Bureau’s cartographic county boundaries, 2015 edition. The state boundaries are computed by merging counties, and the nation boundary is computed by merging states, ensuring a consistent topology.
# us.objects.counties
# us.objects.states
# us.objects.nation
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent