Graphics Developer, Creative Coder, DataViz Cognoscenti
Published
Edited
Jun 25, 2020
1 star
md`# Bars Using Path Data`
{
const xScale = d3.scaleBand(d3.range(20), [0, 200]).padding(0.3);
const yScale = d3.scaleLinear([0, 100], [200, 0]);
const barsPathData = d3
.range(20)
.map(index => {
// Just generating some fake data here
const yValue = d3.scaleLinear([0, 1], [70, 100])(Math.random());
const left = xScale(index);
const top = yScale(yValue);
const width = xScale.bandwidth();
const bottom = yScale(0);
const height = Math.abs(top - bottom);
const pathChunk = `M ${left} ${top} h ${width} v ${height} h ${-width}`;
return pathChunk;
})
.join(" ");
return html`
<svg>
<path d="${barsPathData}" fill="black"></path>
</svg>
`;
}
d3 = require(`d3`)
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.
