EJ Fox & Ian Johnson
streaming data, code, acid, design
combined = FileAttachment("combined.001.csv").csv()
// this file contains commits from the original d3 repo, thanks to Curran
// https://gist.github.com/curran/18287ef2c4b64ffba32000aad47c292b
combinedFull = FileAttachment("all-d3-commits.json").json()
authors = d3.group(combined, d => d.author)
Array.from(authors.keys())
chart = {
let height = 600;
let canvas = DOM.canvas(width, height);
let ctx = canvas.getContext("2d");
let radius = 2.5;
let xscale = d3
.scaleTime()
.domain(dateExtent)
.range([10, width - 10]);
combined.forEach(d => {
ctx.beginPath();
ctx.fillStyle = color(d.author);
ctx.arc(xscale(date(d)), yscale(d.repo), radius, 0, Math.PI * 2);
ctx.fill();
});
return canvas;
}
color = d3
.scaleOrdinal()
.domain(authors.keys())
.range(d3.schemeCategory10)
repos = d3.group(combined, d => d.repo)
yscale = d3
.scaleBand()
.domain(["d3"].concat(Array.from(repos.keys())))
.range([10, 550])
dateExtent = d3.extent(combined, d => date(d))
date = d => timeParser(d.date)
txt = FileAttachment("d3-ease.001.🔪sv").text()
lines = txt.split("☕")
commits = lines.slice(1).map(line => {
let l = line.split("🔪");
return {
hash: l[0],
date: l[1],
author: l[2],
subject: l[3],
body: l[4]
};
})
timeParser = d3.timeParse("%Y-%m-%d %H:%M:%S %Z")
d3.min(commits, d => timeParser(d.date))
yscale("d3-zoom")
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.
