Published
Edited
Sep 5, 2022
Insert cell
## Setting up D3
Insert cell
Insert cell
Insert cell
{
const svg = html`<svg viewBox= "0 0 ${width} ${height}"></svg>`;

const svg_sel= d3.select(svg)
// D3 code goes here

// CIRCLE
svg_sel.append('circle')
.join('circle')
.attr('cx', "20")
.attr('cy', "30")
.attr('r', 9)
.attr("fill", 'blue');
return svg;
}
Insert cell
// Array elements
data_arr= Array.from({ length: 20}).map( d=> ({
x: Math.random() * 2,
y: Math.random() * 3
}))
Insert cell
height= 200
Insert cell
Insert cell
{
const select_svg= d3.create("svg")

// continue creating attributes
select_svg.attr("viewBox", [0 , 0, width, height]);

select_svg.selectAll('circle')
.data(data_arr)
.join('circle')
.attr('cx', d=> d.x)
.attr('cy', d=> d.y)
.attr('r', 9)
.attr("fill", "blue")
.attr("stroke", 2);

// returning the element of svg node
return select_svg.node();
}
Insert cell
// STYLING

style=<style>
circle:hover{
fill: red
}
</style>
Insert cell
d3_sel= require("d3-selection@2")
Insert cell
d3= require("d3@6")
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