EJ Fox & Ian Johnson
streaming data, code, acid, design
commits = FileAttachment("vega-lite.json").json()
authors = d3.group(commits, d => d.author)
authorArray = 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]);
commits.forEach(d => {
ctx.beginPath();
ctx.fillStyle = color(d.author);
ctx.arc(xscale(date(d)), yscale(d.author), radius, 0, Math.PI * 2);
ctx.fill();
});
return canvas;
}
color = d3
.scaleOrdinal()
.domain(authors.keys())
.range(d3.schemeCategory10)
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.
