Published
Edited
Oct 19, 2020
Insert cell
Insert cell
Insert cell
Insert cell
dataset = d3.csvParse(await FileAttachment("stream-data.csv").text())
Insert cell
d3= require("d3@5")
Insert cell
Insert cell
size = d3.min([document.documentElement.clientHeight*.9,document.documentElement.clientWidth*.9])
Insert cell
Insert cell
name = "Betty"
Insert cell
Insert cell
dimensions = ({
width: size,
height: size,
margin: {
top: 10,
right: 10,
left: 50,
bottom: 50,
}
});

Insert cell
Insert cell
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
Insert cell
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
Insert cell
Insert cell
xScale = d3.scaleBand()
.domain(dataset.map(function(d){return d.year;}))
.range([50,dimensions.boundedWidth]).padding(.2)
Insert cell
Insert cell
yScale = d3.scaleLinear()
.domain([0,d3.max(dataset.map(function(d){return d[name]}), s => +s)])
.range([dimensions.boundedHeight,350])
Insert cell
Insert cell
svg = d3.select(DOM.svg(dimensions.width,dimensions.height))
Insert cell
svg.node()
Insert cell
Insert cell
Insert cell
bounds = svg.append("g")
.attr("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
Insert cell
Insert cell
bounds.selectAll("bar")
.data(dataset)
.enter().append("rect")
.style("fill","purple")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.year); })
.attr("width", xScale.bandwidth())
.attr("y", function(d) { return yScale(d[name]); })
.attr("height", function(d) { return dimensions.boundedHeight - yScale(d[name]); });
Insert cell
Insert cell
bounds.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + dimensions.boundedHeight + ")")
.call(d3.axisBottom(xScale).tickValues(xScale.domain().filter(function(d, i) {
return !(i % 4);
})).tickFormat(function(d) {
return d.split("-")[0]
}))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)")
Insert cell
Insert cell
bounds.append("g")
.attr("transform","translate(50,0)")
.call(d3.axisLeft(yScale))

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