Published
Edited
Mar 8, 2021
1 star
Insert cell
Insert cell
Insert cell
4096 * 3
Insert cell
data = FileAttachment("vue-stream.json").json()
Insert cell
accumulated = data.accumulated
Insert cell
authors = new Map(data.authors)
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg
.append("g")
.selectAll("path")
.data(series)
.join("path")
.attr("fill", ({ key }) => color(key))
.attr("d", area)
.append("title")
.text(({ key }) => key);

// svg.append("g").call(xAxis);

return svg.node();
}
Insert cell
Insert cell
authorArray = Array.from(authors.entries())
.sort((a, b) => b[1] - a[1])
.map(d => d[0])
Insert cell
series = d3
.stack()
.keys(authorArray)
.offset(d3.stackOffsetWiggle)
// .order(d3.stackOrderInsideOut)(accumulated)
.order(d3.stackOrderNone)(accumulated)
Insert cell
area = d3
.area()
.x(d => x(timeParser2(d.data.date)))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
Insert cell
d3.extent(accumulated, d => d.date)
Insert cell
x = d3
.scaleUtc()
.domain(d3.extent(accumulated, d => timeParser2(d.date)))
.range([margin.left, width - margin.right])
Insert cell
y = d3
.scaleLinear()
.domain([
d3.min(series, d => d3.min(d, d => d[0])),
d3.max(series, d => d3.max(d, d => d[1]))
])
.range([height - margin.bottom, margin.top])
Insert cell
height = 600
Insert cell
margin = ({ top: 0, right: 20, bottom: 30, left: 20 })
Insert cell
color = d3
.scaleOrdinal()
.domain(authors.keys())
// .range(d3.schemeCategory10)
.range(d3.schemeSpectral[11])
Insert cell
yscale = d3
.scaleBand()
.domain(authorArray)
.range([10, 550])
Insert cell
yscale(authorArray[0])
Insert cell
timeParser2(accumulated[0].date)
Insert cell
dateExtent = d3.extent(accumulated, d => timeParser2(d.date))
Insert cell
date = d => timeParser(d.date)
Insert cell
timeParser = d3.timeParse("%Y-%m-%d %H:%M:%S %Z")
Insert cell
timeParser2 = d3.timeParse("%Y-%m-%dT%H:%M:%S.%L%Z")
Insert cell
d3 = require("d3@6")
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