title = md`## height of inner ring = TOTAL INVESTMENT`
title1 = md`## height of inner + outer ring = TOTAL MONETARISED RETURN`
title2 = md`## arc length = NUMBER OF PROJECTS`
chart = {
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
.style("font", "5px sans-serif");
svg.append("g")
.selectAll("g")
.data(d3.stack().keys(data.columns.slice(3))(comboArcs))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join("path")
.attr("d", arc);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(legend);
return svg.node();
}
data = d3.csvParse(await FileAttachment("Book5@4.csv").text(), (d, _, columns) => {
let total = 0;
for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]];
d.total = total;
return d;
})
margin = ({top: 20, right: 0, bottom: 30, left: 40})
arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => d.data.startAngle)
.endAngle(d => d.data.endAngle -0.01)
y = {
// This scale maintains area proportionality of radial bars!
const y = d3.scaleLinear()
.domain([0, 3])
.range([innerRadius * innerRadius, outerRadius * outerRadius]);
return Object.assign(d => Math.sqrt(y(d)), y);
}
svg.append("g")
.selectAll("g")
.data(d3.stack().keys(data.columns.slice(3))(comboArcs))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join("path")
.attr("d", arc);
width = 340
height = width
innerRadius = 129
outerRadius = innerRadius * 2
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.
