Public
Edited
Oct 5, 2024
data = (async function() {
const csv = await FileAttachment("data.csv").csv({typed: true});
csv.sort((a, b) => b.count - a.count);
return csv;
})();
createViz = function (data, svg) {
const xScale = d3.scaleLinear()
.domain([0, data[0].count])
.range([0, 450]);
const yScale = d3.scaleBand()
.domain(data.map(d => d.technology))
.range([0, 700])
.paddingInner(0.2);
const byTechName = ({technology: t}) =>
t === 'D3.js' ? 'yellowgreen' : 'skyblue';
svg.selectAll('rect')
.data(data)
.join('rect')
.attr('x', 90)
.attr('y', d => yScale(d.technology))
.attr('height', yScale.bandwidth())
.attr('width', d => xScale(d.count))
.attr('fill', byTechName);
return svg.node();
};
chart = {
const svg = d3.create('svg')
.attr('viewBox', `0 0 600 700`)
.style('border', '1px solid black')
.style('max-width', 800)
.style('margin-inline', 'auto');
return createViz(data, 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.
