Charts built with D3
Published
Edited
Nov 3, 2020
1 fork
1 star
chart = {
let fullWidth = width + margin.left + margin.right,
fullHeight = height + margin.top + margin.bottom;
let svg = d3.create("svg").attr("viewBox", `0 0 ${fullWidth} ${fullHeight}`);
svg.append("defs")
.append("linearGradient")
.attr("id", "paint")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%")
.selectAll("stop")
.data(dataset)
.join("stop")
.attr("offset", (d)=>(vertScale(d.Stage) / height))
.style("stop-color", (d)=>colors.get(d.Stage))
.style("stop-opacity", 1)
let chart = svg.append("g").classed("chart", true).attr("transform", `translate(${margin.left}, ${margin.top})`);
chart.append("g")
.attr("transform", `translate(${width/2}, 0)`)
.append("path")
.datum(dataset)
.attr("d", area)
.attr("fill", "url(#paint)")
chart.append("g")
.attr("transform", `translate(${width/2}, 0)`)
.append("path")
.datum(dataset)
.attr("d", area)
.attr("fill", "url(#paint)")
.attr("transform", "scale(-1, 1)")
chart.selectAll("text.pointer")
.data(dataset)
.join("text")
.classed("pointer", true)
.attr("x", -margin.left)
.attr("y", (d)=>vertScale2(d.Stage))
.attr("dy", (d)=>vertScale2.bandwidth()/2)
.text((d)=>`${d.Stage} (${d.Amount})`)
chart.selectAll("line.pointer")
.data(dataset)
.join("line")
.classed("pointer", true)
.attr("x1", 0)
.attr("y1", (d)=>vertScale2(d.Stage)+vertScale2.bandwidth()/2)
.attr("x2", width/2)
.attr("y2", (d)=>vertScale2(d.Stage)+vertScale2.bandwidth()/2)
.attr("stroke", "black")
.attr("strokee-width", 2)
chart.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", width/2)
.attr("cy", (d)=>vertScale2(d.Stage)+vertScale2.bandwidth()/2)
.attr("r", 5)
return svg.node();
}
horzScale = d3.scaleLinear([0, d3.max(dataset, (d)=>d.Amount)], [0, width/2])
vertScale = d3.scalePoint(dataset.map((d)=>d.Stage), [0, height])
vertScale2 = d3.scaleBand(dataset.map((d)=>d.Stage), [0, height])
area = d3.area().y((d)=>vertScale(d.Stage)).x0(0).x1((d)=>horzScale(d.Amount)).curve(d3.curveLinear)
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.
