chart = {
//create SVG container
let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//make a group, and add all paths
svg
.append("g")
.selectAll("path")
.data(series)
.join("path")
.attr("fill", d => color(d))
.attr("d", area)
.append("title")
.text(({ key }) => key);
//add axes to plot
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
import { data } from '@yuanyuanhu96/inc5000'
data
industries = {
let indCol = [];
data.series.forEach(function(ind) {
indCol.push(ind.name);
});
return indCol;
}
years = {
return data.dates;
}
yearlyIndustries = {
//grab all the industries yearly data
let yI = [];
data.series.forEach(function(ind) {
yI.push(ind.values);
});
//flip rows and columns so the data is sorted by year
yI = d3.transpose(yI);
let yM = [];
//convert to object so that each year has named properties for each industry
yI.forEach(function(y, i) {
let collector = {};
collector.date = years[i];
y.forEach(function(z, j) {
collector[industries[j]] = z;
});
yM.push(collector);
});
return yM;
}
series = d3.stack().keys(industries)(yearlyIndustries)
area = d3
.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
x = d3
.scaleLinear()
.domain(d3.extent(years, d => d))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.nice()
.range([height - margin.bottom, margin.top])
//https://observablehq.com/@d3/color-schemes
color = d3
.scaleOrdinal()
.domain(industries)
.range(d3.schemeTableau10)
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d => d))
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
d3 = require("d3@5")
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.
