The avatar for @agness
Agnes Chang
Visuals @propublica, adjunct @columbiaviz. Previously @nytimes, @mitmedialab.
Published
Columbia Data Viz Demos
Edited
Mar 29, 2020
3 forks
9 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
// Old way still works though:
// d3 = require("https://d3js.org/d3.v4.min.js")
Insert cell
Insert cell
arr = [ 5, 10, 15, 20, 25 ]
Insert cell
data = [
{key:'Apple', value: 5},
{key:'Banana', value: 10},
{key:'Blueberry', value: 25},
{key:'Mango', value: 20},
{key:'Orange', value: 15}
]
Insert cell
Insert cell
population = d3.csvParse(`age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463`)
Insert cell
Insert cell
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
Insert cell
Insert cell
nyt = d3.json("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=CsL1ghbiApGAWc3sv2AcGXbbXyuAm2RF")
// see https://developer.nytimes.com for API keys
Insert cell
headline = nyt.results[2].title
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
scale = d3.scaleLinear()
Insert cell
Insert cell
scale(2.5)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data.slice(2, 4)
Insert cell
Insert cell
Insert cell
data.sort((a, b) => a.value - b.value)
Insert cell
Insert cell
arr.map(d => d^2)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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