Unlisted
Edited
Sep 23, 2024
9 forks
Importers
18 stars
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", wide ? [0, 0, width, height] : [0, 0, height, width])
.style("display", "block")
.style("margin", "0 -14px")
.style("width", "calc(100% + 28px)")
.style("height", "auto");

const g = svg.append("g")
.attr("transform", wide ? null : `
rotate(90 ${width/2},${height/2})
translate(${(width - height) / 2},${(width - height) / 2})
`)
.attr("stroke", "white")
.attr("stroke-width", 0.03);
for (const threshold of thresholds) {
g.append("path")
.attr("d", path(contours.contour(data.values, threshold)))
.attr("fill", color(threshold));

yield svg.node();
}
}
Insert cell
path = d3.geoPath()
Insert cell
contours = d3.contours().size([width, height])
Insert cell
width = data.width
Insert cell
height = data.height
Insert cell
wide = Generators.observe(notify => {
let wide;
function resized() {
let w = innerWidth > 640;
if (w !== wide) notify(wide = w);
}
resized();
addEventListener("resize", resized);
return () => removeEventListener("resize", resized);
})
Insert cell
color = d3.scaleSequential(interpolateTerrain).domain(d3.extent(data.values)).nice()
Insert cell
thresholds = color.ticks(20)
Insert cell
data = FileAttachment("volcano.json").json()
Insert cell
interpolateTerrain = {
const i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90));
const i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95));
return t => t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);
}
Insert cell
d3 = require("d3@7", "d3-hsv@0.1")
Insert cell

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.
Learn more