function colorByContinent2(expr){
switch (expr) {
case 'Asia':
return c[0]
break;
case 'Europe':
return c[1]
break;
case 'North America':
return c[2]
break;
case 'Northern Africa & Middle East':
return c[3]
break;
case 'Sub-saharan Africa':
return c[4]
break;
case 'South America':
return c[5]
break;
case 'Central America and the Caribbean':
return c[6]
break;
case 'Oceania':
return c[7]
break;
default:
return "olive"
}}
deathsSortByRegion.filter(d => d.region === regions[1])
// index of countries of max deaths in each region
deathsSortByRegion.filter(d => d.region === regions[6])
container = { let i = 0
let container = []
for (let i = 0; i < regions.length; i++) {
let maxInRegion = deathsSortByRegion.filter(d => d.region === regions[i])[0]
container.push(maxInRegion)
}
return container
}
container
chart5 = {
const arcs = pie_deaths(container);
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.region))
.attr("fill", d => colorByContinent2(d.data.region))
.attr("d", arc_normal)
return svg.node();
}
chart6 = {
const arcs = pie_deaths(container);
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.region))
.attr("fill", d => colorByContinent2(d.data.region))
.attr("d", arc_normal)
return svg.node();
}
regions = [...new Set(deaths.map(obj => obj.region))]
// data = d3.csvParse(await FileAttachment("population-by-age.csv").text(), d3.autoType)
data_lagest = [ {name: "Africa", value: 800},]
data = [ {name: "Africa", value: 950},
{name: "Africa", value: 550},
{name: "Americas", value: 1500},
{name: "Americas", value: 500},
{name: "Asia", value: 1000},
{name: "Asia", value: 800},
{name: "Europe", value: 300},
{name: "Europe", value: 1000},
{name: "Europe", value: 200},
{name: "Middle East", value: 350},
{name: "Middle East", value: 700},
{name: "Middle East", value: 650}]
value = Array.from({length: 100}, () => Math.floor(Math.random() * 10000));
color = d3.scaleOrdinal().domain(data)
.range(d3.schemePastel1);
color2 = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
height = Math.min(width, 500)
padAngel = 0.01
arc_normal = d3.arc()
.innerRadius(20)
.outerRadius(Math.min(width, height) / 2 - 1)
.cornerRadius(60)
.padAngle(padAngel)
// .startAngle([Math.PI/5])
// .endAngle([7*Math.PI/5])
arc2 = d3.arc()
.innerRadius(20)
.outerRadius(Math.min(width, height) / 2.5 - 1)
.cornerRadius(60)
.padAngle(padAngel)
// .startAngle([Math.PI/5])
// .endAngle([2*Math.PI/5])
// .centroid([10,20])
arc3 = d3.arc()
.innerRadius(20)
.outerRadius(Math.min(width, height) / 3 - 1)
.cornerRadius(60)
.padAngle(padAngel)
arc = d3.arc()
.innerRadius(20)
.outerRadius(Math.min(width, height) / 2 - 1)
.cornerRadius(60)
.padAngle(0.5)
// .startAngle([Math.PI/5])
// .endAngle([7*Math.PI/5])
arc_largest = d3.arc()
.innerRadius(20)
.outerRadius(Math.min(width, height) / 2 - 1)
.cornerRadius(80)
.padAngle(0.5)
// .startAngle([Math.PI/5])
// .endAngle([7*Math.PI/5])
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
pie_deaths = d3.pie()
.sort(null)
.value(d => d.deaths)
pie_normal = d3.pie()
.sort(null)
.value(d => d.value)
pie = d3.pie()
.startAngle(Math.PI / 4)
.endAngle(3.5* Math.PI / 4)
.sort(null)
.value(d => d.value)
pie2 = d3.pie()
.startAngle(3 * Math.PI / 4 + 1 )
.endAngle(6 * Math.PI / 4)
.sort(null)
.value(d => d.value)
pie3 = d3.pie()
.startAngle(6 * Math.PI / 4 + 1 )
.endAngle(9 * Math.PI / 4)
.sort(null)
.value(d => d.value)
d3 = require("d3@6")
http://using-d3js.com/05_07_arcs_pie_charts.html
https://github.com/d3/d3-shape#arc_outerRadius
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.
