Published
Edited
Jan 16, 2022
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("week_02.csv").csv()
Insert cell
dataUS = data.filter(d => d.state === "United States" && d.year !== "2021")
Insert cell
Insert cell
width = height * 1.8
Insert cell
height = 300
Insert cell
margin = ({
top: 20,
right: 40,
bottom: 20,
left: 40
})
Insert cell
boundedWidth = width - margin.left - margin.right
Insert cell
boundedHeight = height - margin.top - margin.bottom
Insert cell
Insert cell
xAccessor = d => +d.year
Insert cell
yAccessor = d => +d.value
Insert cell
xScale = d3.scaleLinear()
.domain(d3.extent(dataUS, xAccessor))
.range([0, boundedWidth])
.nice()
Insert cell
yScale = d3.scaleLinear()
.domain(d3.extent(dataUS, yAccessor))
.range([boundedHeight, 0])
.nice()
Insert cell
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(6, "")
Insert cell
yAxis = d3.axisLeft()
.scale(yScale)
.ticks(6, "s")
Insert cell
Insert cell
lineGenerator = d3.line()
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)))
.curve(d3.curveCardinal.tension(0.6))
Insert cell
areaGenerator = (y0, data) => d3.area()
.x(d => xScale(xAccessor(d)))
.y0(y0)
.y1(d => yScale(yAccessor(d)))
.curve(d3.curveCardinal.tension(0.6))(data)
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