Published
Edited
Sep 24, 2021
2 stars
Insert cell
Insert cell
Insert cell
html`
<svg id='container'>
<rect />
<rect />
<rect />
<rect />
<rect />
</svg>
`
Insert cell
{
// wrap SVG element with d3
const svg = d3.select('#container')
// select the first path in the svg selection
// (note: selections can be chained)
const select = svg.select('rect')
// select all the paths in the svg selection
const selectAll = svg.selectAll('rect')
console.log('svg', svg)
console.log('select', select)
console.log('selectAll', selectAll)
// return svg
// return select
return select;
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const el = html`
<svg>
<rect />
<rect />
<rect />
<rect />
</svg>
`
const svg = d3.select(el)
// return svg.select('rect').datum(barData)
// return svg.selectAll('rect').datum(barData)
const boundElement = svg.selectAll('rect').data(barData);
const boundElement2 = svg.selectAll('rect').datum(barData);
const boundElement3 = svg.select('rect').datum(barData);
console.log(`boundElement ===> `, boundElement);
console.log(`boundElement2 ===> `, boundElement2);
console.log(`boundElement3 ===> `, boundElement3);
return boundElement;
}
Insert cell
Insert cell
Insert cell
Insert cell
barData
Insert cell
Insert cell
Insert cell
md `
---

<h3 style="text-align: right">
[Dynamic Data Binding →](https://observablehq.com/@parshwamehta13/dynamic-data-binding)
</h3>

`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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