html`
<svg id='container'>
<rect />
<rect />
<rect />
<rect />
<rect />
</svg>
`
{
// 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 selectAll
}
{
const el = html`
<svg>
<rect />
<rect />
<rect />
<rect />
<rect />
</svg>
`
const svg = d3.select(el)
// return svg.select('rect').datum(barData)
// return svg.selectAll('rect').datum(barData)
return svg.selectAll('rect').data(barData)
}
barData
{
const rectWidth = 50
const svg = html`
<svg width=${rectWidth * barData.length} height=100 style='border: 1px dashed'>
<rect />
<rect />
<rect />
<rect />
<rect />
</rect>
`
d3.select(svg).selectAll('rect')
.data(barData)
// calculate x-position based on its index
.attr('x', (d, i) => i * rectWidth)
.attr('y', d => 100 - d)
// set height based on the bound datum
.attr('height', d => d)
// rest of attributes are constant values
.attr('width', rectWidth)
.attr('stroke-width', 3)
.attr('stroke-dasharray', '5 5')
.attr('stroke', 'plum')
.attr('fill', 'pink')
return svg
}
colors
movies
{
const svg = html`
<svg width=500 height=100 style='border: 1px dashed'>
<path d='${petalPath}' transform='translate(50, 0)' />
<path d='${petalPath}' transform='translate(150, 0)' />
<path d='${petalPath}' transform='translate(250, 0)' />
<path d='${petalPath}' transform='translate(350, 0)' />
<path d='${petalPath}' transform='translate(450, 0)' />
</svg>
`
// YOUR CODE HERE ✨
d3.select(svg)
.selectAll("path")
.data(movies)
.attr("fill", d => colors[d.genres[0]] || colors.Other)
.attr("stroke-width", 2)
.attr("stroke", d => colors[d.genres[0]] || colors.Other)
return svg
}
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.
