data = [
{name: 'Elizabeth', score: 98},
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
margin = ({top: 10, bottom: 40, left: 50, right: 10})
visWidth = 600 - margin.left - margin.right
visHeight = 400 - margin.top - margin.bottom
names = data.map(d => d.name)
y = d3.scaleBand()
.domain(names)
.range([0, visHeight])
.padding(0.2)
y('Brian')
y('Taylor')
y('Joe')
y.bandwidth()
maxScore = d3.max(data, d => d.score)
x = d3.scaleLinear()
.domain([0, maxScore])
.range([0, visWidth])
x(0)
x(maxScore)
visWidth
x(maxScore / 2)
visWidth / 2
xAxis = d3.axisBottom(x)
yAxis = d3.axisLeft(y)
{
// create and select an svg element that is the size of the bars plus margins
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// bind our data to rectangles
g.selectAll('rect')
.data(data)
.join('rect')
// set attributes for each bar
.attr('x', 0) // each bar starts at the same x position
.attr('y', d => y(d.name)) // pass the name to the y-scale to get y position
.attr('width', d => x(d.score)) // pass the score to the x-scale to get width of the bar
.attr('height', y.bandwidth()) // get the width of each band in the scale
.attr('fill', 'steelblue'); // color
// add a group for the y-axis
g.append('g')
.call(yAxis);
// add a group for the x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
// add a label for the x-axis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("Score");
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.
