GIS developer focused on wildlife science & management.
Published
Edited
Dec 12, 2019
points = [[174, 104], [98, 200], [300, 300], [293, 196]];
chart = {
const svg = d3.select(DOM.svg(width, height));
const pt = svg.node().createSVGPoint();
svg.node().addEventListener('click', (evt) => {
pt.x = evt.clientX;
pt.y = evt.clientY;
let newPoint = pt.matrixTransform(svg.node().getScreenCTM().inverse());
mutable x = newPoint.x;
mutable y = newPoint.y;
})
const path = d3.geoPath().projection(null)
const can = svg
.selectAll("g")
.data(d.counties.features)
.enter()
.append("g");
can
.append("path")
.attr("d", path)
.style("fill", 'cyan')
.style("stroke", "none");
svg
.datum(d.mesh)
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", 1);
svg
.datum(d.regionsMesh)
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", 2);
svg
.selectAll('circle')
.data(points)
.enter()
.append("circle")
.attr('cx', d => {
return d[0];
})
.attr('cy', d => d[1])
.attr('r', 5);
svg
.datum(d.boundary)
.append("path")
.attr("d", path)
.style("stroke", "blue")
.style("fill", "none")
.style("stroke-width", 1);
return { svg: svg.node() };
}
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.
