Published
Edited
Oct 19, 2020
data = d3.csvParse(await FileAttachment("stream-data.csv").text())
d3 = require("d3@6")
size = d3.min([document.documentElement.clientHeight*0.9,document.documentElement.clientWidth*0.9])
name = data.columns.slice(1)[2]
dimensions = ({ width: size,
height: size/3,
margin: {
top: 10,
right: 10,
left: 50,
bottom: 50,
}
})
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
xDomain = data.map( d=> d.year)
xScale = d3.scaleBand()
.domain(xDomain)
.range([0,dimensions.boundedWidth])
yDomain = data.map( d => d[name])
yScale = d3.scaleLinear()
.domain([0, d3.max(yDomain, s => +s)])
.range([dimensions.boundedHeight,0])
svg = d3.select(DOM.svg(dimensions.width,dimensions.height))
svg.node()
bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
bounds.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xScale(d.year))
.attr("y", d => yScale(d[name]))
.attr("height", d => dimensions.boundedHeight - yScale(d[name]))
.attr("width", xScale.bandwidth());
bounds.append("g")
.attr("transform", "translate("+ dimensions.margin.left + "," + "0" + ")")
.call(yAxisGen);
xAxisGen = d3.axisBottom(xScale)
.tickValues(xDomain.filter(function(d, i) {return !(i % 4);}))
yAxisGen = d3.axisLeft(yScale)
.ticks(9)
bounds.append("g")
.attr("transform", "translate("+ dimensions.margin.left + "," + (dimensions.boundedHeight) + ")")
.call(xAxisGen)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
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.
