{
const rectWidth = 50
const svg = html`
<svg width=${rectWidth * barData.length} height=100 style='border: 1px dashed'>
<-- nothing but emptiness -->
</svg>
`
d3.select(svg).selectAll('rect')
.data(barData).enter().append('rect')
// calculate x-position based on its index
.attr('x', (d, i) => i * rectWidth)
// 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', 'plum')
.attr('fill', 'pink')
return svg
}
movies
pathObj
colorObj
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`
// YOUR CODE HERE ✨
d3.select(svg).selectAll('path')
.data(movies).enter().append('path')
.attr('transform', (d,i) => `translate(${calculateGridPos(i)})`)
.attr('d', d => pathObj[d.rated])
.attr('fill', d => colorObj[d.genres[0]] || colorObj.Other)
.attr('stroke', d => colorObj[d.genres[0]] || colorObj.Other)
.attr('fill-opacity', 0.5)
.attr('stroke-width',2)
return scrollSVG(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.
