Published
Edited
Apr 29, 2020
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('style', 'font: 400 14px/1.5 "Work Sans", "Open Sans"; fill: #202630');
// bars
svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
.attr('fill', '#949494')
.attr('x', (d,i) => xScale(i))
.attr('y', d => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.value))
.on('mouseover', function(){
d3.select(this)
.transition()
.duration(100)
.attr('fill', '#3c72d7');
})
.on('mouseout', function(){
d3.select(this)
.transition()
.duration(number)
.attr('fill', '#949494');
})

// x-axis
svg.append('g').call(xAxis);
// y-axis
svg.append('g').call(yAxis);
// median reference line
svg.append('line').attr('stroke', '#953159')
.attr('x1', margin.left)
.attr('y1', median)
.attr('x2', width)
.attr('y2', median);

// median label
svg.append("text")
.attr("transform", `translate(${width - 24}, ${median})`)
.attr("dy", "-0.5em")
.attr("text-anchor", "end")
.style("fill", "#953159")
.html("Median = " + d3.format(".2%")(yScale.invert(median)));
// chart title
svg.append("text")
.attr("transform", `translate(0, 0)`)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("fill", "#202630")
.style("font-size", 18)
.html("Relative frequency of letters in the English language");

return svg.node();
}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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