The avatar for @columbia-dataviz
Columbia Dataviz
Public
Edited
Feb 2
Fork of Lab 1: Shapes and Styles
1
Insert cell
Insert cell
Insert cell
Insert cell
<svg style="width:100px; height:100px; border:1px lightgray solid;">
</svg>
Insert cell
Insert cell
<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>
Insert cell
Insert cell
<svg width = "700" height = "700">
<circle cx="250" cy="100" r="85"/>
<ellipse cx="200" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="200" cy="100" rx="15" ry="10" fill="blue"/>
<ellipse cx="300" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="300" cy="100" rx="15" ry="10" fill="blue"/>
<line x1="240" y1="130" x2="150" y2="130" stroke="black" stroke-width="2"/>
<line x1="240" y1="135" x2="150" y2="145" stroke="black" stroke-width="2"/>
<line x1="260" y1="130" x2="350" y2="130" stroke="black" stroke-width="2"/>
<line x1="260" y1="135" x2="350" y2="145" stroke="black" stroke-width="2"/>
<rect x="100" y="200" width="300" height="200" fill="black"/>
Insert cell
Insert cell
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="skyblue" stroke="#EAA221" stroke-width="5"/>
</svg>
Insert cell
Insert cell
<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>
Insert cell
Insert cell
<svg width = "700" height = "700">
<text x="50" y="25">Scary cat</text>
<circle cx="250" cy="100" r="85" fill="brown"/>
<ellipse cx="200" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="200" cy="100" rx="15" ry="10" fill="blue"/>
<ellipse cx="300" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="300" cy="100" rx="15" ry="10" fill="blue"/>
<line x1="240" y1="130" x2="150" y2="130" stroke="black" stroke-width="2"/>
<line x1="240" y1="135" x2="150" y2="145" stroke="black" stroke-width="2"/>
<line x1="260" y1="130" x2="350" y2="130" stroke="black" stroke-width="6"/>
<line x1="260" y1="135" x2="350" y2="145" stroke="black" stroke-width="4"/>
<rect x="100" y="200" width="300" height="200" fill="brown"/>
Insert cell
Insert cell
<!-- 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="60" y="15" width="60" height="60" fill="yellow"/>
<rect x="80" y="20" width="60" height="60" fill="red"/>
<rect x="90" y="30" width="60" height="60" fill="green"/>
</svg>
Insert cell
Insert cell
// Your slider
viewof slider = html`<input type="range" min ="50" max ="500" value="100" >`


Insert cell
// Your movable, interactive mouse portrait
svg`
<svg width = "700" height = "700">
<text x="50" y="25">Scary cat</text>
<circle cx="250" cy="100" r="85" fill="brown"/>
<ellipse cx="200" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="200" cy="${slider}" rx="15" ry="10" fill="blue"/>
<ellipse cx="300" cy="100" rx="25" ry="20" fill="white"/>
<ellipse cx="300" cy="${slider}" rx="15" ry="10" fill="blue"/>
<line x1="240" y1="130" x2="150" y2="130" stroke="black" stroke-width="2"/>
<line x1="240" y1="135" x2="150" y2="145" stroke="black" stroke-width="2"/>
<line x1="260" y1="130" x2="350" y2="130" stroke="black" stroke-width="6"/>
<line x1="260" y1="135" x2="350" y2="145" stroke="black" stroke-width="4"/>
<rect x="100" y="200" width="300" height="200" fill="brown"/>
</svg>
`
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
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
lab1 - lab1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
typed = await FileAttachment("lab1 - lab1.csv").csv({typed: true});

Insert cell
typed[4]
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
Insert cell
// print the headline of the third article here
nyt.results[2].title;
Insert cell
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
data.slice(2, 4)
Insert cell
Insert cell
data.map(d => d.value^2)
Insert cell
Insert cell
// count how many characters are in all the NYT headlines
function count(data) {
var countChar = 0;
data.results.forEach(function (a) {
countChar += a.title.length;
});

return countChar
}

//https://talk.observablehq.com/t/newbie-question-setting-initial-variable-iterating-and-printing-values-in-observable/1563/4
Insert cell
// count how many characters are in all the NYT headlines
count(nyt);
Insert cell
Insert cell
// import a chart from the gallery that you like here

import {chart as chart} from "@d3/streamgraph-transitions"

Insert cell
// import a chart from the gallery that you like here

chart

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