Published
Edited
Oct 18, 2020
1 star
Insert cell
md`# Streamgraph Coding 1`
Insert cell
Insert cell
data = d3.csvParse(await FileAttachment("stream-data.csv").text())
Insert cell
keys = data.columns.slice(1)
Insert cell
size = d3.min([document.documentElement.clientHeight*0.9,document.documentElement.clientWidth*0.9])
Insert cell
streamgraph = {

var keys = data.columns.slice(1)
var dimensions = ({
width: size,
height: size/3,
margin: {
top: 100,
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

var svg = d3.select(DOM.svg(dimensions.width,dimensions.height))
var bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.year))
.range([0,dimensions.boundedWidth])
var yScale = d3.scaleLinear()
.domain([-50000,100000])
.range([dimensions.boundedHeight,0])
var colorScale = d3.scaleOrdinal()
.domain(keys)
.range(d3.schemeSet1)
var stackedData = d3.stack()
.offset(d3.stackOffsetNone)
.keys(keys)(data)
var area = d3.area()
.x(d => xScale(d.data.year)) //[My mistake] I used d.year instead of d.data.year
.y0(d => yScale(d[0]))
.y1(d => yScale(d[1]))
bounds.selectAll("path")
.data(stackedData)
.enter()
.append("path")
.attr("d", area)
.style("fill", d => colorScale(d.key))
//---------- here ends what we did in class

var xAxisGen = d3.axisBottom(xScale).tickSize(-dimensions.boundedHeight)
bounds.append("g")
.attr("transform", "translate("+ dimensions.margin.left + "," + (dimensions.boundedHeight-dimensions.margin.bottom/1.25) + ")")
.call(xAxisGen)
.select(".domain").remove()

bounds.selectAll(".tick line").attr("stroke", "#FFFFFF")
//---------- here I am adding the xAxis
return svg.node()
}
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