{
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] || pathObj.PG)
.attr("fill", d => colorObj[d.genres[0]] || colorObj.Other)
.attr("fill-opacity", 0.5)
.attr("stroke", d => colorObj[d.genres[0]] || colorObj.Other)
.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.
