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');
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top]);
const xAxis = g => g
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(xScale).tickFormat(i => data[i].name).tickSizeOuter(0))
.attr('style', 'font: 400 12px/1.5 "Work Sans", "Open Sans"')
.attr('fill', '#202630')
.call(g => g.append('text')
.attr('x', width / 2)
.attr('y', 36)
.attr('fill', '#202630')
.attr('text-anchor', 'middle')
.style('font', '400 12px/1.5 "Work Sans", "Open Sans"')
.text(data.x)
)
;
const yAxis = g => g
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale).tickFormat(d3.format('.0%')))
.call(g => g.select(".domain").remove())
.call(g => g.append('text')
.attr('x', -margin.left)
.attr('y', 48)
.attr('fill', '#202630')
.attr('text-anchor', 'start')
.style('font', '400 12px/1.5 "Work Sans", "Open Sans"')
.text(data.y)
)
.call(g => g.selectAll(".tick:not(:first-of-type) text")
.style('font', '400 12px/1.5 "Work Sans", "Open Sans"')
.attr('fill', '#202630'));
const median = yScale(d3.median(data, d => d.value));
// 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))
// 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();
}
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.
