I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Mar 22, 2023
4 forks
4 stars
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll(".mcpio")
.data(features.features)
.join("path")
.attr("class", "mcpio")
.style("stroke", "#ddd")
.style("stroke-width", 0.5)
.style("fill", "none")
.attr("d", d => path(d));
svg
.selectAll(".depto")
.data(geoJSON.features)
.join("path")
.attr("class", "depto")
.style("fill", "none")
.style("stroke", "#aaa")
.style("stroke-width", 0.5)
.attr("d", d => path(d));
svg
.selectAll(".mountain")
.data(features.features)
.join("path")
.attr("transform", d => `translate(${projection(d3.geoCentroid(d))})`)
.attr("class", "mountain")
.style("fill", "#eee")
.style("fill-opacity", 0.9)
.style("stroke", "steelblue")
.style("stroke-width", 1)
.attr("d", d => mountain(d.properties[spikeBy]));
svg
.selectAll(".legend")
.data(d3.range(0, h.domain()[1] + 1, h.domain()[1] / 6))
.join("g")
.attr(
"transform",
(d, i) =>
`translate(${width -
margin.left -
margin.right -
200 +
i * 30},${height - margin.bottom - margin.top - 20})`
)
.call(legend =>
legend
.append("path")
.attr("class", "legend mountain")
.style("fill", "#eee")
.style("fill-opacity", 0.9)
.style("stroke", "steelblue")
.style("stroke-width", 0.7)
.attr("d", d => mountain(d))
)
.call(legend =>
legend
.append("text")
.style("font-size", "6pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.attr("y", 10)
.text(d => fmt(d))
);
return svg.node();
}
geoJSON = topojson.feature(mapData, mapData.objects.MGN_AMN_DPTOS)
fmt = d3.format(".2s")
spikeBy = "STP27_PERS"
h = d3
.scaleLinear()
.domain([0, d3.max(features.features, d => d.properties[spikeBy])])
.range([0, 350])
.nice()
mountain = (d, mx = 5) => {
return `M${-mx / 2} 0 Q0 ${-h(d)} ${mx / 2} 0`;
}
path = d3.geoPath().projection(projection)
projection = d3
.geoAzimuthalEqualArea()
.rotate([74 + 30 / 60, -38 - 50 / 60])
.fitExtent(
[[margin.left, margin.top], [width - margin.right, height - margin.bottom]],
features
)
margin = ({ left: 20, right: 20, top: 20, bottom: 20 })
height = 600
line(features.features[0].geometry.coordinates[0][0])
path(features.features[0])
line = d3.line()
features = {
const features = topojson.feature(mapData, mapData.objects.MGN_AMN_MPIOS);
features.features = features.features.sort(
(a, b) => a.properties[spikeBy] - b.properties[spikeBy]
);
return features;
}
mapData = FileAttachment(
"Colombia_departamentos_municipios_poblacion-topo@1.json"
).json()
d3 = require("d3@6")
topojson = require("topojson@3")
import { createJsonDownloadButton } from "@trebor/download-json"
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.
