Columbia University Computer Science W4995 Intro. to Data Visualization
<svg style="width:100px; height:100px; border:1px lightgray solid;">
</svg>
<svg width="600" height="250">
<rect x="0" y="0" width="500" height="50"/>
<circle cx="250" cy="100" r="25"/>
<ellipse cx="250" cy="160" rx="50" ry="25"/>
<line x1="150" y1="240" x2="350" y2="210" stroke="red" stroke-width="8"/>
</svg>
<!-- your SVG mouse code here -->
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="skyblue" stroke="#EAA221" stroke-width="5"/>
</svg>
<svg width="350" height="100">
<!-- plain text -->
<text x="50" y="25">Easy-peasy</text>
<!-- styled text -->
<text x="150" y="25" font-family="monospaced" font-size="25" fill="red">Easy-peasy</text>
<!-- trying to draw off the edge of the viewport -->
<text x="250" y="75" font-family="sans-serif" font-size="25" fill="orange">Easy-peasy</text>
</svg>
<!-- your newly colorful mouse here -->
<!-- Modify this cell -->
<svg width="350" height="100">
<rect x="0" y="0" width="60" height="60" fill="purple"/>
<rect x="20" y="5" width="60" height="60" fill="blue"/>
<rect x="40" y="10" width="60" height="60" fill="green"/>
<rect x="60" y="15" width="60" height="60" fill="yellow"/>
<rect x="80" y="20" width="60" height="60" fill="red"/>
</svg>
// Your slider
// Your movable, interactive mouse portrait
d3 = require("d3@5")
// Old way still works though:
// d3 = require("https://d3js.org/d3.v4.min.js")
population = d3.csvParse(`
age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463`)
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
// print the value of one data point from your file attachment
nyt = d3.json("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=CsL1ghbiApGAWc3sv2AcGXbbXyuAm2RF")
// see https://developer.nytimes.com for API keys
// print the headline of the third article here
data = [
{key:'Apple', value: 5},
{key:'Banana', value: 10},
{key:'Blueberry', value: 25},
{key:'Mango', value: 20},
{key:'Orange', value: 15}
]
data.slice(2, 4)
data.map(d => d.value^2)
// count how many characters are in all the NYT headlines
// import a chart from the gallery that you like here
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.
