Public
Edited
May 1, 2023
Insert cell
Insert cell
Insert cell
<div>
<p>a paragraph piece of text</p>
<p>another piece of text with <a href = "https://www.youtube.com/watch?v=eBGIQ7ZuuiU">link</a></p>
</div>

<!--
comment, ignored by interpreter.
below let's try some graphics
-->
<svg width=500px height=100px>
<circle cx=50 cy=50 r=10 fill="red"></circle>
<circle cx=100 cy=50 r=10 fill="#00beef"></circle>
<circle cx=150 cy=50 r=20 fill="peru"></circle>
</svg>
Insert cell
Insert cell
{
const svg = d3.create("svg") //create a detatched svg element. meaning that it's not on the page yet
.attr("width", "500px")
.attr("height", "100px") //this is how we set attributes with d3

const somedata = [
{radius: 10, color: "red"},
{radius: 10, color: "#00beef"},
{radius: 20, color: "peru"}
];

svg.selectAll("circle") //select all the existing circles inside svg, could be none of those, that's ok
.data(somedata) // bind somedata to the existing circles we found
.join("circle") //d3 magic: create as many circles as we need, remove as many as we don't need
.attr("cx", (d,i) => (i + 1) * 50) //second argument is just a 0-based counter
.attr("cy", 50) //"cy" is constant, so no need for accessor function here
.attr("r", d => d.radius) //access radius from each data element
.attr("fill", d => d.color) //access color from each data element
return svg.node(); //at this point our svg will be handed over to observable, which will attach it as HTML above this code
}
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