The avatar for @columbiaviz-s22
Columbia Dataviz Spring 22
Columbia University Computer Science W4995 Intro. to Data Visualization
Published
Dataviz Demos
Edited
Jan 19, 2022
Fork of Demo 1: Data, Select, Scale
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