Published
Edited
Sep 5, 2022
Insert cell
### Tutorial: w209 week-3
Insert cell
/// SVG box viewable
html`<svg viewBox= "0 0 ${width} ${height}">
</svg>`
Insert cell
height = 200
Insert cell
Insert cell
<svg viewBox= "0 0 ${width} ${height}">
<circle cx="80" cy= "80" r= "40" fill="green" stroke= "red" stroke-width="9"></circle>

<rect width= "20" height= "100" x= "200"></rect>

<line x1= "10" x2= "10" y1= "0" y2= ${height} stroke= "blue" stroke-width="10"></line>
</svg>
Insert cell
Insert cell
data_arr= Array.from( { length: 100 }).map( d => ({
x: Math.random() * width,
y: Math.random() * height
}))
Insert cell
<!-- // Create a scatter plot using SVG CIRCLE elements -->
html `<svg viewBox= "0 0 ${width} ${height}">
${data_arr.map( d=> `<circle cx="${d.x}" cy="${d.y}" r= "5" />`)}
</svg>`
Insert cell
Insert cell
sytle= `html<style>

circle{
fill: red
}

circle:hover{
fill: blue
}
</style>`
Insert cell
Insert cell
html`<svg viewBox= "0 0 ${width} ${height}">
${ data_arr.map(
d=>
`<circle cx= "${d.x}" cy= "${d.y}" r="4" />
<text x= "${d.x}" y="${d.y}">${d.x} ${d.y}</text>
`
)}
</svg>
`
Insert cell
Insert cell
style= `html
<style>
text:hover{
fill: green
}

text{
font-size: 10px
}
</style>
Insert cell
Insert cell
<svg viewBox= "0 0 ${width} ${height}">
<path d= "M 0, 0 L 200, 200 L 250 150 L 300" fill="none" stroke= "black"/>
</svg>

<svg viewBox= "0 0 ${width} ${height}">
<circle cx="20" cy="20" r="10"/>
</svg>
Insert cell
Insert cell
Type HTML, then Shift-Enter. Arrow ↑/↓ to switch modes.

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