| license: gpl-3.0 | |
| height: 990 |
An example of mapping multiple geographical layers at once from different TopoJSON files. Use the checkboxes to show/hide different layers.
Geographical boundaries were obtained from the City of Chicago Data Portal. A combination of Python GeoPandas and TopoJSON Client were used to process (re-project, select features, convert file formats, simplify topology) the initial GeoJSON files.
| <!DOCTYPE html> | |
| <style> | |
| body { | |
| font: 16px sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <div> | |
| <span style="background-color: lightgreen;"> | |
| <input type="checkbox" id="parks-box" value="parks" checked> Parks | |
| </span> | |
| <span style="background-color: lightgreen;"> | |
| <input type="checkbox" id="boulevards-box" value="boulevards" checked> Boulevards | |
| </span> | |
| <span style="background-color: #ddd;"> | |
| <input type="checkbox" id="corridors-box" value="corridors" checked> Industrial Corridors | |
| </span> | |
| <span style="background-color: darkgreen;"> | |
| <input type="checkbox" id="forests-box" value="forests" checked> Forest Preserves | |
| </span> | |
| <span style="background-color: steelblue;"> | |
| <input type="checkbox" id="waterways-box" value="waterways" checked> Waterways | |
| </span> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script type="text/javascript"> | |
| var margin = {top: 15, right: 20, bottom: 15, left: 20}, | |
| outerWidth = 960, | |
| outerHeight = 960, | |
| width = outerWidth - margin.left - margin.right, | |
| height = outerHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", outerWidth) | |
| .attr("height", outerHeight) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var projection = d3.geoTransverseMercator() | |
| .rotate([88 + 20 / 60, -36 - 40 / 60]); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| d3.queue() | |
| .defer(d3.json, "chicago.topojson") | |
| .defer(d3.json, "parks.topojson") | |
| .defer(d3.json, "boulevards.topojson") | |
| .defer(d3.json, "industrial_corridors.topojson") | |
| .defer(d3.json, "forestry.topojson") | |
| .defer(d3.json, "waterways.topojson") | |
| .await(ready); | |
| function ready(error, chicago, parks, boulevards, corridors, forests, waterways) { | |
| if (error) return console.error(error); | |
| // start with unit projection | |
| projection | |
| .scale(1) | |
| .translate([0, 0]); | |
| // then translate and scale according to bbox for chicago's boundary | |
| var b = path.bounds(topojson.feature(chicago, chicago.objects.communities)), | |
| s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), | |
| t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]; | |
| projection | |
| .scale(s) | |
| .translate(t); | |
| svg.append("clipPath") | |
| .attr("id", "clip") | |
| .append("path") | |
| .datum(topojson.feature(chicago, chicago.objects.communities)) | |
| .attr("d", path) | |
| .attr("stroke", "#aaa") | |
| .attr("stroke-width", 3); | |
| svg.append("path") | |
| .datum(topojson.feature(chicago, chicago.objects.communities)) | |
| .attr("d", path) | |
| .attr("fill", "none") | |
| .attr("stroke", "#aaa") | |
| .attr("stroke-width", 1); | |
| svg.append("g") | |
| .attr("class", "parks") | |
| .selectAll(".parks") | |
| .data(topojson.feature(parks, parks.objects.parks).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("fill", "lightgreen") | |
| .attr("stroke", "lightgreen") | |
| .attr("stroke-width", 1); | |
| svg.append("g") | |
| .attr("class", "boulevards") | |
| .selectAll(".boulevards") | |
| .data(topojson.feature(boulevards, boulevards.objects.boulevards).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("fill", "lightgreen") | |
| .attr("stroke", "lightgreen") | |
| .attr("stroke-width", 1); | |
| svg.append("g") | |
| .attr("class", "corridors") | |
| .selectAll(".corridors") | |
| .data(topojson.feature(corridors, corridors.objects.corridors).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("fill", "#ddd") | |
| .attr("stroke", "#aaa") | |
| .attr("stroke-width", 1); | |
| svg.append("g") | |
| .attr("class", "forests") | |
| .selectAll(".forests") | |
| .data(topojson.feature(forests, forests.objects.forests).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("fill", "green") | |
| .attr("stroke", "darkgreen") | |
| .attr("stroke-width", 1); | |
| svg.append("g") | |
| .attr("class", "waterways") | |
| .selectAll(".waterways") | |
| .data(topojson.feature(waterways, waterways.objects.waterways).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("clip-path", "url(#clip)") | |
| .attr("fill", "lightblue") | |
| .attr("stroke", "steelblue") | |
| .attr("stroke-width", 1); | |
| d3.select("#parks-box").on("change", update); | |
| d3.select("#boulevards-box").on("change", update); | |
| d3.select("#corridors-box").on("change", update); | |
| d3.select("#forests-box").on("change", update); | |
| d3.select("#waterways-box").on("change", update); | |
| } | |
| function update() { | |
| checkbox = d3.select(this); | |
| if(!checkbox.property("checked")) { | |
| d3.select("g." + checkbox.property("value")) | |
| .attr("opacity", 0); | |
| } else { | |
| d3.select("g." + checkbox.property("value")) | |
| .attr("opacity", 1); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
