{
const rectWidth = 50
const barData2 = [15,25,30,40,50,60,70, 80, 8];
const svg = html`
<svg width=${rectWidth * barData2.length} height=100 style='border: 1px dashed'>
<-- nothing but emptiness -->
</svg>
`
d3.select(svg).selectAll('rect')
.data(barData2).enter().append('rect')
// 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', 'plum')
.attr('fill', 'pink')
return svg
}
{
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('path')
.data(barData).enter().append('path')
.attr('d', (data, index) => {
const initX = index === 0 ? 0 : (rectWidth * index) - (rectWidth/2);
const finalX = (rectWidth * index) + (rectWidth/2);
if (index === 0) {
return `M${initX},100 L${finalX},${100 - data}`
} else {
return `M${initX},${100 - barData[index-1]} L${finalX},${100 - data}`;
}
})
.attr('stroke-width', 3)
.attr('stroke', 'plum')
.attr('fill', 'pink')
return svg
}
md `
---
<h3 style="text-align: right">
[Scales →](https://observablehq.com/@parshwamehta13/scales)
</h3>
`
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.
