p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]]);
arcExample = d3.arc()
.innerRadius(50)
.outerRadius(100)
.startAngle(0)
.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("d", arcExample);
return svg.node();
}
arcs = pie(LargestImpactCountries);
LargestImpactCountries = {
let countr = sortedData.slice(1,16).map(d=>({name:d[0],fullname:d[1].location,deaths: d[1].accum_deaths}));
let sum = d3.sum(countr, d=>d.deaths);
console.log(sum);
let other = {name: "Others", fullname: "Others", deaths: sortedData[0][1].accum_deaths - sum};
countr.push(other);
return countr;
}
piechart = {
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", arc)
.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") // adjusts text placement for chunks that don't have the number listed below name
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.15).append("tspan") //only labels chunks big enough to accomodate the extra number (second line of text)
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => format(d.data.deaths)));
return svg.node();
}
color = d3.scaleOrdinal()
.domain(LargestImpactCountries.map(d => d.name))
.range(d3.schemeCategory10)
pie = d3.pie()
.sort(null)
.value(d => d.deaths)
arc= d3.arc()
.innerRadius(150)
.outerRadius(Math.min(width, height) / 2 - 1)
arcLabel = { //this function adjusts where labels appear
const radius = Math.min(width, height) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
arcExtra = d3.arc()
.innerRadius(100)
.outerRadius(Math.min(width, height) / 2 - 1)
.cornerRadius(10)
.padAngle(0.01)
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();
}
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":"Ciutadans","members":36, color:"#EB6109"},
{"name":"JxCAT","members":34, color:"#ED5975"},
{"name":"ERC","members":32, color:"#FDB94D"},
{"name":"PSC","members":17, color:"#EE0000"},
{"name":"CECP","members":8, color:"#912C45"},
{"name":"CUP","members":4, color:"#EEDD00"},
{"name":"PPC","members":4, color:"#4488CC"}];
donut(parliamentDataset)
donut = d3.pie()
.sort(null)
.value(d => d.members)
.startAngle(-Math.PI/2)
.endAngle(Math.PI/2)
donutchart = {
const arcs = donut(parliamentDataset);
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 => d.data.color)
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.members}`);
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") // adjusts text placement for chunks that don't have the number listed below name
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.15).append("tspan") //only labels chunks big enough to accomodate the extra number (second line of text)
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => 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.
