chart1 = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg
.selectAll('g')
.data(d3.stack().keys(dataStacked.columns.slice(2))(dataStacked))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join('path')
.attr('d', arcStacked)
.attr('transform', 'translate(450, 450)');
svg
.selectAll('text')
.data( dataStacked )
.join('text')
.text(d => d.Country)
.attr("x", 0)
.attr("y", 0)
.attr("dx", d => y(d.consumption) + 10)
.attr("dy", 5)
.attr("transform", (d, i) => 'translate(' + width/2 + ', ' + height/2 + ') rotate(' + (i * radians_to_degrees(alpha) - 90 + radians_to_degrees(alpha) / 2) + ')')
return svg.node();
}
x = d3.scaleBand()
.range([0, 2 * Math.PI]) // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
.align(0) // This does nothing ?
.domain( dataStacked.map(function(d) { return d.Country; }) ); // The domain of the X axis is the list of states.
y = d3.scaleLinear()
.domain([0, d3.max(dataStacked, d => d.consumption)])
.range([innerRadius, outerRadius])
z = d3.scaleOrdinal()
.domain(dataStacked.columns.slice(2))
.range(colorRange)
arcStacked = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data.Country))
.endAngle(d => x(d.data.Country) + x.bandwidth())
.cornerRadius(0)
.padAngle(0.05)
.padRadius(innerRadius)
radius = (area, alpha) => {
return Math.sqrt((2*area) / (alpha));
}
alpha = Math.PI * 2 / data.length;
console.log(data[1].consumption);
magnitude = 20;
data = FileAttachment("antibiotic_consumption@4.csv").csv({typed: true});
dataStacked = FileAttachment("antibiotic_consumption_stacked@1.csv").csv({typed: true});
color = d3.color("#e6007e");
radians_to_degrees = (radians) =>
{
let pi = Math.PI;
return radians * (180/pi);
}
degrees_to_radians = (degrees) =>
{
let pi = Math.PI;
return degrees * (pi/180);
}
r = (area) => {
return Math.sqrt(area / Math.PI)
}
innerRadius = 100;
outerRadius = 400;
colorRange = d3.quantize(d3.interpolateHcl("#e6007e", "#e6e6e6"), 7);
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.
