EJ Fox & Ian Johnson
streaming data, code, acid, design
gitviz: streamgraphvis git history dataget git history datad3 git history dataHHS Hospital Data Visualizations IVHHS Hospital Data Visualizations IIIHHS Hospital Data Visualizations IIHHS Hospital Data VisualizationsHHS Hospital DataBoid Contours IIAnnotated Stacked Area ChartCMU COVIDcast API: Bubbles Extent UpdateBoid Contours With SVG Filters3D Boid ContoursSeuss Boid ContoursHerding CatsCMU COVIDcast API: Bubbles Dark ModeBoid ContoursCWF Season 2 Reusable Style ElementsWheel Of Data
streamgraph git history data
commits = FileAttachment("vega-lite.json").json()
d3.timeDay(timeParser("2021-02-22 13:01:45 +0100"))
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();
}
rolled = d3.rollup(
commits,
v => v.length,
d => d3.timeDay(timeParser(d.date)),
d => d.author
)
series = d3
.stack()
.keys(authorArray)
.offset(d3.stackOffsetWiggle)
// .order(d3.stackOrderInsideOut)(accumulated)
.order(d3.stackOrderNone)(accumulated)
data = Array.from(rolled)
.map(d => {
let obj = {
date: d[0]
};
authorArray.forEach(author => {
let value = d[1].get(author) || 0;
obj[author] = value;
});
return obj;
})
.sort((a, b) => {
return +new Date(a.date) - +new Date(b.date);
})
// .slice(700, 1400)
accumulated = {
let accum = {};
authorArray.forEach(author => {
accum[author] = data[0][author];
});
return data.map((d, i) => {
if (i == 0) return d;
let acc = {
date: d.date
};
authorArray.forEach(author => {
accum[author] += d[author];
acc[author] = accum[author];
});
return acc;
});
}
area = d3
.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
x = d3
.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
xbar = d3
.scaleBand()
.domain(data.map(d => d.date))
.range([margin.left, width - margin.right])
.padding(0.1)
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])
height = 600
margin = ({ top: 0, right: 20, bottom: 30, left: 20 })
authors = d3.rollup(commits, v => v.length, d => d.author)
topAuthors = Array.from(authors.entries())
.sort((a, b) => b[1] - a[1])
.slice(0, 100)
// authorArray = Array.from(authors.keys())
authorArray = Array.from(topAuthors.map(d => d[0]))
color = d3
.scaleOrdinal()
.domain(authors.keys())
// .range(d3.schemeCategory10)
.range(d3.schemeSpectral[11])
yscale = d3
.scaleBand()
.domain(authorArray)
.range([10, 550])
yscale(authorArray[0])
dateExtent = d3.extent(commits, d => date(d))
date = d => timeParser(d.date)
timeParser = d3.timeParse("%Y-%m-%d %H:%M:%S %Z")
d3 = require("d3@6")
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.
