Public
Edited
Mar 25
Insert cell
Insert cell
olympians
Insert cell
height = 400
Insert cell
margin = ({top:10, bottom: 100, right:50, left:10})
Insert cell
Insert cell
ordered_sports = Array.from(new Set(olympians.map(d => d.sport))).sort()
Insert cell
bar_scale = d3.scaleBand().domain(ordered_sports).range([margin.left, width - margin.right]);
Insert cell
Insert cell
bar_scale('athletics')
Insert cell
bar_scale('volleyball')
Insert cell
Insert cell
bar_scale.bandwidth()
Insert cell
Insert cell
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.selectAll('rect')
.data(olympians.map(d => d.sport))
.join('rect')
.attr('x', d => bar_scale(d))
.attr('width', bar_scale.bandwidth())
.attr('y', margin.top)
.attr('height', height - margin.bottom - margin.top)
.style('stroke', 'white');

return svg.node();
}
Insert cell
Insert cell
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(bar_scale))
/*.selectAll('text')
.style('text-anchor', 'start')
.attr('transform', 'translate(10,5)rotate(45)');*/

svg.selectAll('rect')
.data(olympians.map(d => d.sport))
.join('rect')
.attr('x', d => bar_scale(d))
.attr('width', bar_scale.bandwidth())
.attr('y', margin.top)
.attr('height', height - margin.bottom - margin.top)
.style('stroke', 'white');

return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

return svg.node();
}
Insert cell

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.
Learn more