chart = {
const svg = d3.create("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "-" + adj + " -"+ adj + " " + (width + adj*2) + " " + (height + adj*2))
.style("background", mode === "dark" ? "#2e2e2e" : "#fff");
const gradient_light = svg.append("linearGradient")
.attr("id","gradLight")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","0%")
.attr("y2","100%");
gradient_light.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#6a915c");
gradient_light.append("stop")
.attr("offset", "60%")
.attr("stop-color", "#92ac7d");
gradient_light.append("stop")
.attr("offset", "95%")
.attr("stop-color", "#b8c8a0");
const gradient_dark = svg.append("linearGradient")
.attr("id","gradDark")
.attr("x1","0%")
.attr("y1","0%")
.attr("x2","0%")
.attr("y2","100%");
gradient_dark.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#b8c8a0");
gradient_dark.append("stop")
.attr("offset", "60%")
.attr("stop-color", "#92ac7d");
gradient_dark.append("stop")
.attr("offset", "95%")
.attr("stop-color", "#6a915c");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const group = svg.append("g")
.selectAll("g")
.data(data.series)
.join("g")
.attr("transform", d => `translate(0,${y(d.name) + 1})`);
group.append("path")
.attr("fill", mode==="dark"?"url(#gradDark)":"url(#gradLight)")
.attr("d", d => area(d.values));
group.append("path")
.attr("fill", "none")
.attr("stroke", mode==="dark"?"#f2e8d2":"#544208")
.attr("d", d => line(d.values));
return svg.node();
}
mode = Generators.observe(notify => {
const query = matchMedia("(prefers-color-scheme: dark)");
const changed = () => notify(query.matches ? "dark" : "light");
changed();
query.addListener(changed);
return () => query.removeListener(changed);
})
adj = 50
overlap = 5
width = 1000
height = 400
margin = ({top: 50, right: 20, bottom: 30, left: 40})
x = d3.scaleTime()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(data.series.map(d => d.name))
.range([margin.top, height - margin.bottom])
z = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
.range([0, -overlap * y.step()])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.style("color", mode==="dark"?"#f2e8d2":"#544208")
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.style("color", mode==="dark"?"#f2e8d2":"#544208")
.call(d3.axisLeft(y).tickSize(0).tickPadding(4))
.call(g => g.select(".domain").remove())
area = d3.area()
.curve(d3.curveBasis)
.defined(d => !isNaN(d))
.x((d, i) => x(data.dates[i]))
.y0(0)
.y1(d => z(d))
line = area.lineY1()
data = {
const data = d3.csvParse(await FileAttachment("ridgelineMood@2.csv").text(), d3.autoType);
const dates = Array.from(d3.group(data, d => +d.date).keys()).sort(d3.ascending);
return {
dates: dates.map(d => new Date(d)),
series: d3.groups(data, d => d.name).map(([name, values]) => {
const value = new Map(values.map(d => [+d.date, d.value]));
return {name, values: dates.map(d => value.get(d))};
})
};
}
d3 = require("d3@5", "d3-array@2")
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.
