Arcs and stacks / Visualization for Transparency Foundation (Fundació ViT)

Visualization for Transparency Foundation (Fundació ViT)

Visualization can transform the reach of open data and revolutionize transparency and accountability.

Workspace

Public

2022-23 MVTEC Data Visualization Programming module

Edited

Feb 14, 2023

2022-23 MVTEC Data Visualization Programming module

p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]]);

arcExample = d3.arc()

.innerRadius(30)

.outerRadius(100)

.startAngle(-Math.PI / 2)

.endAngle( Math.PI / 2)();

arcExamplechart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", 240);

svg.append("path")

.attr("transform", `translate(120,120)`) //move from 0,0 coordinates

.attr("fill", "purple")

.attr("stroke", "steelblue")

.attr("d", arcExample);

return svg.node();

}

arcs = pie(LargestImpactCountries);

OWiDdata= d3.json("https://covid.ourworldindata.org/data/owid-covid-data.json")

totalDeaths = d3.sum(sortedData, d=>d[1].accum_deaths);

countr = sortedData.slice(0,10).map(d=>({name:d[0],fullname:d[1].location,deaths: d[1].accum_deaths}));

top10deaths = d3.sum(countr, d=>d.deaths);

LargestImpactCountries = {

let countr = sortedData.slice(0,10).map(d=>({name:d[0],fullname:d[1].location,deaths: d[1].accum_deaths}));

let other = {name: "Others", fullname: "Others", deaths: totalDeaths - top10deaths};

countr.push(other);

return countr;

}

piechart = {

const arcs = pie(LargestImpactCountries);

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [-width / 2, -height / 2, width, height]); // we set the min-x and min-y to half the width and height to have the 0,0 position on the center, so there's no need to transform the arcs

//.attr("viewBox", [0, 0, width, height]); //see the effect of uncomment this line

//Create the arcs

svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", arc)

.append("title")

.text(d => `${d.data.fullname}: ${d.data.deaths}`);

//Create the labels

svg.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(${arcLabel.centroid(d)})`)

.call(text => text.append("tspan")

.attr("y", d => (d.endAngle - d.startAngle) > 0.15 ? "-0.4em": "6px")

.attr("font-weight", "bold")

.text(d => d.data.name))

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.15).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("fill-opacity", 0.7)

.text(d => format(d.data.deaths)));

return svg.node();

}

arcs2 = pie(LargestImpactCountries);

width

height

arcLabel.centroid(arcs2[0]);

arcLabel.centroid(arcs2[10]);

color = d3.scaleOrdinal()

.domain(LargestImpactCountries.map(d => d.name))

.range(d3.schemeSet3)

pie = d3.pie()

.sort(null)

.value(d => d.deaths)

arc= d3.arc()

.innerRadius(0)

.outerRadius(Math.min(width, height) / 2 - 1)

arcLabel = {

const radius = Math.min(width, height) / 2 * 0.9;

return d3.arc().innerRadius(radius).outerRadius(radius);

}

arcExtra = d3.arc()

.innerRadius(60)

.outerRadius(Math.min(width, height) / 2 - 1)

.cornerRadius(10)

.padAngle(0.02)

extrapiechart = {

const arcs = pie(LargestImpactCountries);

const svg = d3.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height]);

svg.append("g")

.attr("stroke", "white")

.selectAll("path")

.data(arcs)

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", arcExtra)

.append("title")

.text(d => `${d.data.fullname}: ${d.data.deaths}`);

svg.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(${arcLabel.centroid(d)})`)

.call(text => text.append("tspan")

.attr("y", d => (d.endAngle - d.startAngle) > 0.15 ? "-0.4em": "6px")

.attr("font-weight", "bold")

.text(d => d.data.name))

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.15).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("fill-opacity", 0.7)

.text(d => format(d.data.deaths)));

return svg.node();

}

stack = d3.stack()

.keys(["africa", "america", "asia", "europe", "oceania"])

.order(d3.stackOrderDescending)

.offset(d3.stackOffsetNone);

series = stack(companySales);

chart = {

const svg = d3.create("svg")

.attr("width", barwidth)

.attr("height", height);

svg.append("g")

.selectAll("g")

.data(series)

.join("g")

.attr("fill", d => barcolor(d.key))

.selectAll("rect")

.data(d => d)

.join("rect")

.attr("x", (d, i) => x(d.data.month.toLocaleString('default', { month: 'short' })))

.attr("y", d => y(d[1]))

.attr("height", d => y(d[0]) - y(d[1]))

.attr("width", x.bandwidth());

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

return svg.node();

}

x = d3.scaleBand()

.domain(companySales.map(d => d.month.toLocaleString('default', { month: 'short' })))

.range([margin.left, barwidth - margin.right])

.padding(0.1)

y = d3.scaleLinear()

.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()

.range([height - margin.bottom, margin.top])

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.selectAll(".domain").remove())

barcolor = d3.scaleOrdinal()

.domain(series.map(d => d.key))

.range(d3.schemeTableau10)

margin = ({top: 20, right: 20, bottom: 30, left: 50})

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"}];

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