html`<svg style="width:100px; height:100px; border:1px lightgray solid;">
</svg> `
html`<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="100" ry="25"/>
<line x1="0" y1="200" x2="500" y2="250" stroke="black"/>
</svg>
`
// your mouse canvas code here
html`<svg style="width:700px; height:700px; border:1px lightgray solid;">
<circle cx="250" cy="250" r="50" fill="lightgray"/>
<circle cx="450" cy="250" r="50" fill="lightgray"/>
<circle cx="350" cy="350" r="100" fill="lightgray"/>
<rect x="250"; y="350" width="200" height="60" fill="lightgray" />
<ellipse cx="325" cy="325" rx="10" ry="25"/>
<ellipse cx="375" cy="325" rx="10" ry="25"/>
<line x1="300" y1="380" x2="200" y2="430" stroke="black"/>
<line x1="400" y1="380" x2="500" y2="430" stroke="black"/>
<ellipse cx="350" cy="375" rx="10" ry="15" fill="pink"/>
</svg> `
html`<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="#EAA221" stroke-width="5"/>
</svg>`
html`
<svg width="350" height="100">
<!-- plain text -->
<text x="50" y="25">Easy-peasy</text>
<!-- styled text -->
<text x="150" y="25" font-family="serif" font-size="25"
fill="gray">Easy-peasy</text>
<!-- trying to draw off the edge of the canvas -->
<text x="250" y="50" font-family="serif" font-size="25"
fill="gray">Easy-peasy</text>
</svg>
`
// your newly colorful mouse here
html`<svg style="width:700px; height:700px; border:1px lightgray solid;">
<circle cx="250" cy="250" r="50" fill="pink" stroke="lightgray" stroke-width="10"/>
<circle cx="450" cy="250" r="50" fill="pink" stroke="lightgray" stroke-width="10"/>
<circle cx="350" cy="350" r="100" fill="lightgray"/>
<rect x="250"; y="350" width="200" height="60" fill="lightgray" />
<ellipse cx="325" cy="325" rx="10" ry="15" fill="white" stroke="black" stroke-width="10"/>
<ellipse cx="375" cy="325" rx="10" ry="15" fill="white" stroke="black" stroke-width="10"/>
<line x1="300" y1="380" x2="200" y2="430" stroke="black"/>
<line x1="400" y1="380" x2="500" y2="430" stroke="black"/>
<ellipse cx="350" cy="375" rx="10" ry="15" fill="pink" stroke="darkgray" stroke-width="1"/>
<text x="270" y="550" font-family="serif" font-size="25" fill="gray">Its a mice world</text>
</svg> `
html`
<!-- 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="yellow"/>
<rect x="60" y="15" width="60" height="60" fill="red"/>
<rect x="80" y="20" width="60" height="60" fill="green"/>
</svg>`
// Your slider
slider = html`<input type=range>`
sliderValue = Generators.input(slider)
// Your movable interactive mouse (canvas)
// your newly colorful mouse here
html`<svg style="width:700px; height:700px; border:1px lightgray solid;">
<circle cx="250" cy="250" r="${sliderValue}" fill="pink" stroke="lightgray" stroke-width="10"/>
<circle cx="450" cy="250" r="${sliderValue}" fill="pink" stroke="lightgray" stroke-width="10"/>
<circle cx="350" cy="350" r="100" fill="lightgray"/>
<rect x="250"; y="350" width="200" height="60" fill="lightgray" />
<ellipse cx="325" cy="325" rx="10" ry="15" fill="white" stroke="black" stroke-width="10"/>
<ellipse cx="375" cy="325" rx="10" ry="15" fill="white" stroke="black" stroke-width="10"/>
<line x1="300" y1="380" x2="200" y2="430" stroke="black"/>
<line x1="400" y1="380" x2="500" y2="430" stroke="black"/>
<ellipse cx="350" cy="375" rx="10" ry="15" fill="pink" stroke="darkgray" stroke-width="1"/>
<text x="270" y="550" font-family="serif" font-size="25" fill="gray">Its a mice 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")
//Next, locate a small JSON or CSV file of your choice and in the cell below
json = FileAttachment("example.json").json()
//print a data point from your file.
json.hello.world[5]
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].title
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 sum = 0;
for (let i = 0; i < nyt.results.length; ++i) {
// console.log(nyt.results[i].title);
sum += nyt.results[i].title.length;
}
return sum;
}
// import a chart from the gallery that you like here
import {viewof selection as sunburst} from "@d3/zoom-to-bounding-box"
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.
