a=10
b=a*2
<style>
/* Write CSS here */
.myDiv{color:red;}
.myDiv h1 {font-size:60px}
</style>
<div class='myDiv'>
<h1> HTML is neat!</h1>
<p> It's what all your websites are built in at the end of the day.</p>
<div>
<p> Whoa! I'm writing HTML!!!</p>
</div>
<h3>HTML is</h3>
<ul>
<li>Fun</li>
<li>Cool</li>
<li>Old</li>
</ul>
</div>
htl.html`<p> You can write also write HTML in a JavaScript cell using htl.html! We'll do this often for D3 examples, since we're working with JavaScript when writing D3.`
// Remove this and write JS
//my_array = [1,2,3,4]
//my_array.map((d) => d*2)
//[1,2,3,4].map((d) => d*2)
//[1,2,3,4].map((d,i) => i*3)
[1,2,3,4].map((d) => d*2).filter((d) => d > 2)
//One cell = one value
my_array = [1,2,3,4]
my_array.map((d) => d*2)
myCellArray = {
const myArray = [1,2,3,4]
return my_array.map((d) => d*2)
}
carsData
X
weight (lb)
Y
economy (mpg)
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
{
const label = d => d.data.node
const root = stratifyTree(getDOMTree(myChart))
return graph(root, {label: label})
}
{
const html = htl.html`<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</div>`
d3.select(html)
.select("p")
.style("color","red")
;
d3.select(html)
.selectAll("p")
.filter((d,i) => i==1)
.data([1,2,3])
.style("color","blue")
.text((d) => d)
;
return html
}
cars
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
