Published
Edited
May 23, 2021
margin = ({top: 10, bottom: 40, left: 50, right: 10})
visWidth = 600 - margin.left - margin.right
visHeight = 400 - margin.top - margin.bottom
maxScore = d3.max(data, d => d.score)
scoreScale = d3.scaleLinear()
.domain([0, maxScore])
.nice() // make the domain start and end on round values
// changed from [0, visWidth] to [visHeight, 0]
.range([visHeight, 0])
names = data.map(d => d.name)
// turn nameScale into a scalePoint
nameScale = d3.scalePoint()
.domain(names)
// changed from [0, visHeight] to [0, visWidth]
.range([0, visWidth])
.padding(0.2)
// changed scoreScale to nameScale
xAxis = d3.axisBottom(nameScale)
// changed nameScale to scoreScale
yAxis = d3.axisLeft(scoreScale)
d3 = require("d3@6")
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.
