Public
Edited
Apr 27, 2021
Insert cell
Insert cell
Insert cell
data2 = d3.csvParse(await FileAttachment("data-2.csv").text(), (d, j, columns) => {
//if(j > 1) return;
let total = 0;
for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]];
d.total = total;
return d;
}).sort((a, b) => b.total - a.total)
Insert cell
data = {
const result = [];
result.columns = ["angle", "a", "b", "c"];
const scale = 5;
const theta_samp = d3.scaleLinear().domain([0,360]).range([0, 2*Math.PI]);
for(var i = 0; i < 359; i+= 5)
{
const entry = Object({
angle: i,
a: scale*(1+1*(Math.sin(theta_samp(i)))),
b: scale*(1+1*(Math.sin(theta_samp(i-120)))),
c: scale*(1+1*(Math.sin(theta_samp(i-240)))),
total: 30 });
result.push(entry);
}
return result;
}
Insert cell
custom_stack =
{
const result_map = new Map();

data.columns.slice(1).forEach((label, i) =>
{
var entry = [];
entry.key = label;
entry.index = i;
result_map.set(label, entry);
});

var temp_map = new Map();

data.forEach((col, i) => {
data.columns.slice(1).forEach((key, j) => {
//console.log(i, col, key, j, col[key]);
temp_map.set(key, col[key]);
});
const sorted_map = new Map([...temp_map.entries()].sort((a, b) => b[1] - a[1] ));

var prev_value = 0;
sorted_map.forEach((value, key) => {
const dest = result_map.get(key);
const new_entry = [ prev_value, prev_value + value ];
prev_value += value;
new_entry.data = data[i];
dest.push(new_entry);
});
});
return [...result_map.values()];
}
Insert cell
arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data.angle))
.endAngle(d => x(d.data.angle) + x.bandwidth())
//.padAngle(0.01)
//.padRadius(innerRadius)
Insert cell
x = d3.scaleBand()
.domain(data.map(d => d.angle))
.range([0, 2 * Math.PI])
.align(0)
Insert cell
y = d3.scaleLinear()
.domain([0, 15])
.range([innerRadius, outerRadius])
Insert cell
z = d3.scaleOrdinal()
.domain(data.columns.slice(1))
.range(["#98abc5", "#6b486b", "#ff8c00"])
//.range(d3.schemeSet1);
/*function(n) {
return d3.interpolateCool(
d3.scaleOrdinal()
.domain(data.columns.slice(1))
.range([0,0.5,1])(n.key));
}*/
//.range(["#98abc5", "#6b486b", "#ff8c00"])
Insert cell
Insert cell
Insert cell
Insert cell
width = 975
Insert cell
height = width
Insert cell
innerRadius = 180
Insert cell
outerRadius = Math.min(width, height) * 0.5
Insert cell
Insert cell
d3.stack().keys(data.columns.slice(1))(data)
Insert cell
Insert cell
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