Published
Edited
Jul 9, 2021
chart = {
const svg = d3.select(DOM.svg(width, height));
const gx = svg.append("g")
.call(xAxis);
const gy = 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("d", d => area(d.values))
.attr("class", "area");
group.append("path")
.attr("d", d => area(d.values))
.attr("class", "line");
svg.node().update = () => {
gx.call(xAxis);
gy.call(yAxis);
group.select("path").selectAll('path').exit().remove();
};
return svg.node();
}
max_data = data.series.map(d => ({ name: d.name, values: d.values, max: (d.values.reduce((m,x)=> m>x ? m:x))}))
{
switch (order) {
case "alphabetical": max_data.sort((a, b) => a.name.localeCompare(b.name)); break;
case "descending": max_data.sort((a, b) => a.max - b.max); break;
case "ascending": max_data.sort((a, b) => b.max - a.max); break;
}
y.domain(max_data.map(d => d.name));
x.domain(d3.extent(data.dates))
chart.update();
return order;
}
x = d3.scaleTime()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(max_data.map(d => d.name))
.range([margin.top, height - margin.bottom])
z = d3.scaleLinear()
.domain([0, d3.max(max_data, d => d3.max(d.values))])
.range([0, -overlap * y.step()])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("class","x-axis")
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.attr("class","x-axis")
.call(d3.axisLeft(y)
.tickSize(30)
.tickPadding(1))
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("tree_cover_loss.csv").text());
const columns = data.columns.slice(1);
return {
series: data.map(d => ({
name: d.country,
values: columns.map(p => +d[p])
})),
dates: columns.map(d3.timeParse("%Y"))
};
}
margin = ({top: 95, right: 20, bottom: 30, left: 120})
height = data.series.length * 19
overlap = 5
d3 = require("d3@6")
// const gx = svg.append("g")
// .call(xAxis);
// const gy = 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("d", d => area(d.values))
// .attr("class", "area");
// group.append("path")
// .attr("d", d => area(d.values))
// .attr("class", "line");
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.
