The avatar for @chiamaka
Chiamaka
Public
Edited
Feb 1, 2023
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
<!-- your SVG mouse code here -->
<svg width="700" height="700">
<rect x="280" y="300" width="140" height="400"/>
<circle cx="250" cy="200" r="50" />
<circle cx="260" cy="220" r="35" />
<circle cx="450" cy="200" r="50" />
<circle cx="440" cy="220" r="35" />
<circle cx="350" cy="350" r="130" />
<line x1="400" y1="400" x2="550" y2="550" stroke="black" stroke-width="8"/>
<line x1="300" y1="400" x2="150" y2="550" stroke="black" stroke-width="8"/>
<line x1="400" y1="400" x2="600" y2="400" stroke="black" stroke-width="8"/>
<line x1="300" y1="400" x2="100" y2="400" stroke="black" stroke-width="8"/>
</svg>
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
<!-- your newly colorful mouse here -->
<svg width="700" height="700">
<rect x="280" y="300" width="140" height="400"/>
<circle cx="250" cy="200" r="50" fill="grey"/>
<circle cx="260" cy="220" r="35" fill="pink"/>
<circle cx="450" cy="200" r="50" fill="grey"/>
<circle cx="440" cy="220" r="35" fill="pink"/>
<circle cx="350" cy="350" r="130" fill="grey"/>
<line x1="400" y1="400" x2="550" y2="550" stroke="black" stroke-width="20"/>
<line x1="300" y1="400" x2="150" y2="550" stroke="black" stroke-width="20"/>
<line x1="400" y1="400" x2="600" y2="400" stroke="black" stroke-width="8"/>
<line x1="300" y1="400" x2="100" y2="400" stroke="black" stroke-width="8"/>
<text x="500" y="600">Where's the cheese?</text>
</svg>
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="40" y="10" width="60" height="60" fill="green"/>
</svg>
Insert cell
Insert cell
// Your slider
slider = html`<input type=range>`
Insert cell
ear_height = Generators.input(slider)
Insert cell
<!--// Your movable, interactive mouse portrait-->
html`
<svg width="700" height="700">
<rect x="280" y="300" width="140" height="400"/>
<circle cx="250" cy="${ear_height+200}" r="50" fill="grey"/>
<circle cx="260" cy="${ear_height+220}" r="35" fill="pink"/>
<circle cx="450" cy="${ear_height+200}" r="50" fill="grey"/>
<circle cx="440" cy="${ear_height+220}" r="35" fill="pink"/>
<circle cx="350" cy="350" r="130" fill="grey"/>
<line x1="400" y1="400" x2="550" y2="550" stroke="black" stroke-width="20"/>
<line x1="300" y1="400" x2="150" y2="550" stroke="black" stroke-width="20"/>
<line x1="400" y1="400" x2="600" y2="400" stroke="black" stroke-width="8"/>
<line x1="300" y1="400" x2="100" y2="400" stroke="black" stroke-width="8"/>
<text x="500" y="600">Where's the cheese?</text>
</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
// print the value of one data point from your file attachment

/*
d3.csv("https://columbiaviz.github.io/files/data/nyc_census_by_boro_2000-2010.csv").then(function(d) {
return d[0]
});
*/

f = FileAttachment("addresses.csv").csv().then(function(d){
return d[0]
});
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
d3.sum(nyt['results'].map(d => d.title.length))
Insert cell
Insert cell
// import a chart from the gallery that you like here
import {canvas as globe} from "@d3/orthographic-to-equirectangular"

Insert cell
globe
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