Visualization can transform the reach of open data and revolutionize transparency and accountability.
parliamentDataset = [ {"name":"PSC","members":33, color:"#EE0000"},
{"name":"ERC","members":33, color:"#FDB94D"},
{"name":"Junts","members":32, color:"#ED5975"},
{"name":"Vox","members":11, color:"#63BE21"},
{"name":"CUP","members":9, color:"#EEDD00"},
{"name":"ECP","members":8, color:"#912C45"},
{"name":"Ciutadans","members":6, color:"#EB6109"},
{"name":"PPC","members":3, color:"#4488CC"}];
arcParliament = d3.arc()
.innerRadius(heightParliament/2)
.outerRadius(heightParliament)
pieParliament = d3.pie()
.sort(null)
.value(d => d.members)
.startAngle(-Math.PI / 2)
.endAngle( Math.PI / 2)
heightParliament = 300
arcs = pieParliament(parliamentDataset);
parlamentchart = {
const arcs = pieParliament(parliamentDataset);
const svg = d3.create("svg")
.attr("width",width)
.attr("height",heightParliament);
const pie = svg.append("g")
.attr("transform", `translate(${heightParliament},${heightParliament})`);
pie.selectAll("path")
.data(arcs)
.join("path")
.attr("stroke", "white")
.attr("fill", d => d.data.color)
.attr("d", arcParliament)
.append("title")
.text(d => `${d.data.name}: ${d.data.members}`);
pie.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcParliament.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", d => "6px")
.attr("font-weight", "bold")
.text(d => `${d.data.name} (${d.data.members})`));
return svg.node();
}
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.
