<p>Hello, World!</p>
<p>Hello, Angie!!!!!!</p>
a = 8
b = a * 2 // one cell using output of another cell - cell dependency
<style>
/* Write CSS here */
.myDiv {
color: green;
}
.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!!!!!!! Yay! </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.</p>`
[1, 2, 3, 4] // index: value
// using map method to alter array
// runs operation thru every element in array
[1, 2, 3, 4].map(d => d * 2)
// another way to doing this - older method
[1, 2, 3, 4].map(function(d) {
return d * 3;
})
// applying a filter
[1, 2, 3, 4].map((d, i) => d * 2).filter((d => d > 2))
[1, 2, 3, 4].map((d, i) => d * 2).filter((d => d == 2))
// have cell returning variable
myCellArray = {
const myArray = [1, 2, 3, 4];
return myArray.map((d, i) => d * 2).filter((d => d == 2))
}
carsData
X
weight (lb)
Y
economy (mpg)
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
dot
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>`;
// alter elements using d3
//changing "First Paragraph" to red - selecting p tags
d3.select(html).select("p").style("color", "red");
//changing all p tags to red
d3.select(html).selectAll("p").data([1, 2, 3]).style("color", "red");
d3.select(html)
.selectAll("p")
.data([1, 2, 3])
.style("color", "blue")
.text((d) => d)
return html;
}
d3.version
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.
