Published
Edited
Nov 26, 2020
DensityContourMap = {
var height = 1 * width
const svg = d3.select(DOM.svg(width, height))
.style("font-family", "Arial")
.style("fill", "#eee");
let projection = d3.geoAlbers();
const path = d3.geoPath().projection( projection )
const graticule = d3.geoGraticule()
projection
.scale(1)
.translate([0, 0]);
const b = path.bounds(contoursJson);
const s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
const 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("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
const siteMap = svg.append("g")
.attr("fill", "none")
.selectAll(".contour")
.data(parcelsJson.features)
.enter().append("g");
siteMap.append("path")
.attr("class", "contour")
.attr("d", path)
.style("stroke-width",2)
.style("stroke", "#0000fe")
const contourMap = svg.append("g")
.attr("fill", "none")
.selectAll(".contour")
.data(contoursJson.features)
.enter().append("g");
contourMap.append("path")
.attr("class", "contour")
.attr("d", path)
.style("stroke-width",1)
.style("stroke", "#fe0000")
console.log(b, contourMap)
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 8])
.on("zoom", function() {
siteMap.attr("transform", d3.event.transform);
contourMap.attr("transform", d3.event.transform);
}));
return svg.node();
}
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
