md`# radial multidim`
md`### stacked area radial
adapted from [https://bl.ocks.org/mbostock/3048740](https://bl.ocks.org/mbostock/3048740)`
dict= [
["yes", "no", "don't know"],
["urs", "vulpe"],
[1, 35, 56, 78, 200]
]
data2 = [
{userid: "ursu", values:[
{dim: "select0", value: 37, time: 0, y0: 0, y: 87},
{dim: "select2", value: 30, time: 1, y0: 0, y: 7},
{dim: "select3", value: 47, time: 2, y0: 0, y: 37},
]},
{userid: "ursu2", values:[
{dim: "select0", value: 3, time: 0, y0: 0, y: 137},
{dim: "select2", value: 7, time: 1, y0: 0, y: 37},
{dim: "select3", value: 37, time: 2, y0: 0, y: 37},
]},
{userid: "vulpea", values:[
{dim: "select0", value: 7, time: 0, y0: 0, y: 27},
{dim: "select2", value: 3, time: 1, y0: 0, y: 37},
{dim: "select3", value: 37, time: 2, y0: 0, y: 17},
]},
{userid: "vulpea2", values:[
{dim: "select0", value: 7, time: 0, y0: 0, y: 27},
{dim: "select2", value: 3, time: 1, y0: 0, y: 37},
{dim: "select3", value: 37, time: 2, y0: 0, y: 17},
]},
{userid: "vulpea3", values:[
{dim: "select0", value: 7, time: 0, y0: 0, y: 27},
{dim: "select2", value: 3, time: 1, y0: 0, y: 37},
{dim: "select3", value: 37, time: 2, y0: 0, y: 17},
]},
{userid: "vulpea4", values:[
{dim: "select0", value: 7, time: 0, y0: 0, y: 27},
{dim: "select2", value: 3, time: 1, y0: 0, y: 37},
{dim: "select3", value: 37, time: 2, y0: 0, y: 17},
]},
]
z = d3.scaleOrdinal()
.domain([]) // [0, 1, 2, 3, 4, 5]
.range([ "#add", "#033"]);
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", "16px 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); })
.attr("opacity", 0.2)
//.style("opacity", 0.4)
.style("fill", function(d, i) { return z(i); });
// svg.append("g")
// // .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// .selectAll(".layer")
// .data(data)
// .enter()
// .append("circle").style("fill", "black")
// .attr("r", 4)
// .attr("cx", (d,i)=> { console.log(d.values,i,area2(d.values)); return d; })
// .attr("cy", (d,i)=> { console.log(d.values); return d; })
svg.selectAll(".axis")
.data(d3.range(data[0].values.length))
.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)
.append("text")
.attr("y", -innerRadius + 3)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.style("fill", "currentColor")
.text(function(d) { return d; })
.selectAll(".noDispNum text")
.style("display", "none");
return svg.node();
}
line = d3.radialLine()
.angle(function(d, i) { return x(d)})
.radius(function(d) { return y(140)})
.curve(d3.curveCatmullRomClosed);
area = d3.areaRadial()
.angle(function(d) { return x(d.time)})
.innerRadius(function(d) { return y(d.y0) }) // y(d.y0)
.outerRadius(function(d) { return y(140-d.y0 - d.y)}) // y(d.y0 + d.y)
.curve(d3.curveCatmullRomClosed.alpha(0));
area2 = d3.lineRadial()
.angle(function(d) { return x(d.time)})
.radius(function(d) { return y(d.y0)})
//.outerRadius(function(d) { return y(d.y0 + d.y)})
x = d3.scaleLinear()
.domain([0, data[0].values.length])
.range([0, 2 * Math.PI]);
y = d3.scaleLinear()
.domain([0, 140])
.range([innerRadius, outerRadius]);
data[0].values.length
rAxis = d3.axisLeft()
.scale(d3.scaleLinear().domain([0, 140]).range([-innerRadius, -outerRadius]))
.ticks(4);
innerRadius = 50 / 960 * width * data[0].values.length
outerRadius = innerRadius * 2 // height / 2 - 10
width = 300
height = 300
data1 = [{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}]}]
data= data2 // data1.map(x=>{return {key:x.key,values:[x.values[0],x.values[1],x.values[2]]}}) // data1.map(x=>{return {key:x.key,values:[x.values[0],x.values[1],x.values[2],x.values[3],x.values[4]]}}) // data1
d3 = require("d3@5")
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.
