Published
Edited
Sep 10, 2019
1 fork
2 stars
Also listed in…
uncertainty
Insert cell
md`# area: polar coordinate system`
Insert cell
md`### stacked area radial
adapted from [https://bl.ocks.org/mbostock/3048740](https://bl.ocks.org/mbostock/3048740)`
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "60%")
.style("height", "auto")
.style("font", "10px sans-serif");

svg.append("g")
// .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.selectAll(".layer")
.data(data)
.enter()
.append("path")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.selectAll(".axis")
.data(d3.range(7))
.enter()
.append("g")
.attr("transform", function(d) { return "rotate(" + x(d) * 180 / Math.PI + ")"; })
.attr("class", d => {if (d > 0) { return "noDispNum" } else {return "dispNum"} })
.call(rAxis)
.selectAll(".noDispNum text")
.style("display", "none");
return svg.node();
}
Insert cell
line = d3.radialLine()
.angle(function(d, i) { return x(d)})
.radius(function(d) { return y(140)})
.curve(d3.curveCardinalClosed);
Insert cell
area = d3.areaRadial()
.angle(function(d) { return x(d.time)})
.innerRadius(function(d) { return y(d.y0)})
.outerRadius(function(d) { return y(d.y0 + d.y)})
.curve(d3.curveCardinalClosed);
Insert cell
x = d3.scaleLinear()
.domain([0, 7])
.range([0, 2 * Math.PI]);
Insert cell
y = d3.scaleLinear()
.domain([0, 140])
.range([innerRadius, outerRadius]);
Insert cell
z = d3.scaleOrdinal()
.domain([0, 1, 2])
.range(["#636363", "#bdbdbd", "#f0f0f0"]);
Insert cell
rAxis = d3.axisLeft()
.scale(d3.scaleLinear().domain([0, 140]).range([-innerRadius, -outerRadius]))
.ticks(7);
Insert cell
innerRadius = 120 / 960 * width
Insert cell
outerRadius = height / 2 - 10
Insert cell
width = 300
Insert cell
height = 300
Insert cell
data = [{key: "a", values: [{key: "a", value: 37, time: 0, y0: 0, y: 37}, {key: "a", value: 32, time: 1, y0: 0, y: 32}, {key: "a", value: 45, time: 2, y0: 0, y: 45}, {key: "a", value: 24, time: 3, y0: 0, y: 24}, {key: "a", value: 25, time: 4, y0: 0, y: 25}, {key: "a", value: 34, time: 5, y0: 0, y: 34}, {key: "a", value: 40, time: 6, y0: 0, y: 40}]}, {key: "b", values: [{key: "b", value: 12, time: 0, y0: 37, y: 12}, {key: "b", value: 19, time: 1, y0: 32, y: 19}, {key: "b", value: 16, time: 2, y0: 45, y: 16}, {key: "b", value: 52, time: 3, y0: 24, y: 52}, {key: "b", value: 39, time: 4, y0: 25, y: 39}, {key: "b", value: 59, time: 5, y0: 34, y: 59}, {key: "b", value: 28, time: 6, y0: 40, y: 28}]}, {key: "c", values: [{key: "c", value: 46, time: 0, y0: 49, y: 46}, {key: "c", value: 42, time: 1, y0: 51, y: 42}, {key: "c", value: 44, time: 2, y0: 61, y: 44}, {key: "c", value: 64, time: 3, y0: 76, y: 64}, {key: "c", value: 29, time: 4, y0: 64, y: 29}, {key: "c", value: 44, time: 5, y0: 93, y: 44}, {key: "c", value: 21, time: 6, y0: 68, y: 21}]}]
Insert cell
d3 = require("d3@5")
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