<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="700" height="700">
<rect x="100" y="100" width="500" height="500" stroke="black" stroke-width="5" fill="transparent"/>
<circle cx="250" cy="200" r="50" fill="grey"/>
<circle cx="450" cy="200" r="50" fill="grey"/>
<ellipse cx="350" cy="320" rx="150" ry="130" fill="grey"/>
<ellipse cx="320" cy="320" rx="10" ry="30" fill="black"/>
<ellipse cx="380" cy="320" rx="10" ry="30" fill="black"/>
<line x1="200" y1="400" x2="300" y2="380" stroke="black" stroke-width="8"/>
<line x1="200" y1="420" x2="300" y2="390" stroke="black" stroke-width="8"/>
<line x1="500" y1="400" x2="400" y2="380" stroke="black" stroke-width="8"/>
<line x1="500" y1="420" x2="400" y2="390" stroke="black" stroke-width="8"/>
<circle cx="350" cy="420" r="30" fill="pink"/>
</svg>
<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 -->
<svg width="700" height="700">
<rect x="100" y="100" width="500" height="500" stroke="black" stroke-width="5" fill="transparent"/>
<circle cx="250" cy="200" r="50" fill="grey"/>
<circle cx="450" cy="200" r="50" fill="grey"/>
<ellipse cx="350" cy="320" rx="150" ry="130" fill="grey"/>
<ellipse cx="320" cy="320" rx="10" ry="30" fill="black"/>
<ellipse cx="380" cy="320" rx="10" ry="30" fill="black"/>
<line x1="200" y1="400" x2="300" y2="380" stroke="black" stroke-width="8"/>
<line x1="200" y1="420" x2="300" y2="390" stroke="black" stroke-width="8"/>
<line x1="500" y1="400" x2="400" y2="380" stroke="black" stroke-width="8"/>
<line x1="500" y1="420" x2="400" y2="390" stroke="black" stroke-width="8"/>
<circle cx="350" cy="420" r="30" stroke="white" stroke-width="5" fill="pink"/>
<text x="270" y="500" font-family="sans-serif" font-size="30" fill="black">Hello World!</text>
</svg>
<!-- 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>
// Your slider
viewof sliderValue = html`<input type=range>`
value = sliderValue * 5
// Your movable, interactive mouse portrait
html`<svg width="700" height="700">
<rect x="100" y="100" width="500" height="500" stroke="black" stroke-width="5" fill="transparent"/>
<circle cx="250" cy="200" r="50" fill="grey"/>
<circle cx="450" cy="200" r="50" fill="grey"/>
<ellipse cx="350" cy="320" rx="150" ry="130" fill="grey"/>
<ellipse cx="320" cy="320" rx="10" ry="30" fill="black"/>
<ellipse cx="380" cy="320" rx="10" ry="30" fill="black"/>
<line x1="200" y1="400" x2="300" y2="380" stroke="black" stroke-width="8"/>
<line x1="200" y1="420" x2="300" y2="390" stroke="black" stroke-width="8"/>
<line x1="500" y1="400" x2="400" y2="380" stroke="black" stroke-width="8"/>
<line x1="500" y1="420" x2="400" y2="390" stroke="black" stroke-width="8"/>
<circle cx="350" cy="420" r="30" stroke="white" stroke-width="5" fill="pink"/>
<!-- Here the slider is used -->
<text x=${value} y="500" font-family="sans-serif" font-size="30" fill="black">Hello World!</text>
</svg>`
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")
age_population@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
age_pop = FileAttachment("age_population@1.csv").csv()
age_pop.columns
// print the value of one data point from your file attachment
age_pop[1]
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
nyt["results"][2]["abstract"]
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
{
let cnt = 0
let max = nyt["num_results"]
for(let i = 0; i < max; ++i) {
cnt += nyt["results"][i]["abstract"].length
}
return cnt
}
// import a chart from the gallery that you like here
import {chart as Histogram} from "@d3/histogram"
Histogram
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.
