Published
Edited
Feb 24, 2021
2 forks
2 stars
chart = {
const arcs = pie(data);
const svg = d3
.create("svg")
.attr("viewBox", [
-width / 2,
-margin.top,
width,
height / 2 + margin.bottom + margin.top
]);
svg
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.Stance))
.attr("d", arc)
.append("title")
.text(d => `${d.data.Stance}: ${d.data[r]}`);
svg
.append("g")
.attr("font-family", "Acumin Pro")
.attr("font-size", 20)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text =>
text
.filter(d => d.endAngle - d.startAngle > 0.1)
.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.Stance)
)
.call(text =>
text
.filter(d => d.endAngle - d.startAngle > 0.1)
.append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data[r])
);
const legend = svg
.append('g')
.attr(
'transform',
`translate(${-width / 2 + margin.left},${-height / 2.1})`
);
legend
.selectAll(null)
.data(data)
.enter()
.append('rect')
.attr('x', width * 0.75)
.attr('y', (d, i) => labelHeight * i * 1.8 + height * 0.8)
.attr('width', labelHeight)
.attr('height', labelHeight)
.attr('fill', d => color(d.Stance))
.attr('stroke', 'grey')
.style('stroke-width', '1px');
legend
.selectAll(null)
.data(data)
.enter()
.append('text')
.text(d => `${d.Stance}: ${d[r]}`)
.attr('x', labelHeight * 1.2 + width * 0.75)
.attr(
'y',
(d, i) => labelHeight * i * 1.8 + labelHeight / 1.1 + height * 0.8
)
.style('font-size', `${labelHeight}px`);
return svg.node();
}
data = d3.csvParse(await FileAttachment("congress_test.csv").text(), d3.autoType)
color = d3.scaleOrdinal()
.domain(data.map(d => d.Stance))
.range(["#FCC117","#FF0000","#608AD8","#D8D8D8"])
height = Math.min(width, 800)
labelHeight = height/50
arc = {
const radius = Math.min(width, height) / 2;
return d3.arc().innerRadius(radius * 0.33).outerRadius(radius - 1);
}
arc_txt = {
const radius = Math.min(width, height) / 1.6;
return d3.arc().innerRadius(radius * 0.33).outerRadius(radius - 1);
// return d3.arc().innerRadius(radius * 0.4).outerRadius(d => {
// if(d.data.Stance === 'Antonio Nariño') return radius + 300
// else if(d.data.Stance === 'La Candelaria') return radius + 380
// else if(d.data.Stance === 'Los Mártires') return radius + 460
// else if(d.data.Stance === 'Sumapaz') return radius + 520
// return radius + 250
// });
}
pie = d3.pie()
.padAngle(0.005)
.sort(null)
.startAngle(Math.PI/2)
.endAngle(Math.PI * 1.5)
.value(d => d[r])
margin = ({top: 50, right: 10, bottom: 30, left: 10})
import {radio} from "@jashkenas/inputs"
d3 = require("d3@6")
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.
