Public
Edited
Feb 19, 2024
Paused
49 forks
Importers
90 stars
Insert cell
Insert cell
chart = {

// Prepare the series:
const dates = Array.from(d3.group(traffic, d => +d.date).keys()).sort(d3.ascending);
const series = d3.groups(traffic, 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))};
});

// Specify the chart’s dimensions.
const overlap = 8;
const width = 928;
const height = series.length * 17;
const marginTop = 40;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 120;

// Create the scales.
const x = d3.scaleTime()
.domain(d3.extent(dates))
.range([marginLeft, width - marginRight]);

const y = d3.scalePoint()
.domain(series.map(d => d.name))
.range([marginTop, height - marginBottom]);

const z = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d.values))]).nice()
.range([0, -overlap * y.step()]);

// Create the area generator and its top-line generator.
const area = d3.area()
.curve(d3.curveBasis)
.defined(d => !isNaN(d))
.x((d, i) => x(dates[i]))
.y0(0)
.y1(d => z(d));

const line = area.lineY1();

// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");

// Append the axes.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0));

svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).tickSize(0).tickPadding(4))
.call(g => g.select(".domain").remove());

// Append a layer for each series.
const group = svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("transform", d => `translate(0,${y(d.name) + 1})`);

group.append("path")
.attr("fill", "#ddd")
.attr("d", d => area(d.values));

group.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", d => line(d.values));

return svg.node();
}
Insert cell
traffic = FileAttachment("traffic.csv").csv({typed: true})
Insert cell
Insert cell
Plot.plot({
height: 686,
width,
marginBottom: 1,
marginLeft: 120,
x: {axis: "top"},
y: {axis: null, range: [40.5, -36]},
fy: {label: null, domain: traffic.map(d => d.name)}, // preserve input order
marks: [
Plot.areaY(traffic, {x: "date", y: "value", fy: "name", curve: "basis", sort: "date", fill: "#ccc"}),
Plot.lineY(traffic, {x: "date", y: "value", fy: "name", curve: "basis", sort: "date", strokeWidth: 1})
]
})
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more