Unlisted
Edited
May 7, 2024
1 star
viewof sizeField = Inputs.select(["Total Deaths", "Total Cases", "Population"], {label: "Size by:"})
//viewof sizeField = Inputs.select(["Population"], {label: "Size by:"})
viewof Compare = Inputs.select(["Total Deaths", "Vaccination Percent"], {label: "Select one"})
chart = {
const width = 2000;
const height = 500;
const sankey = d3.sankey()
.nodeSort(function (a,b) {return d3.ascending(a.name, b.name); })
.linkSort(null)
.nodeWidth(4)
.nodePadding(20)
.extent([[0, 5], [width, height - 5]])
// const color = d3.scaleOrdinal(["North America"], ["#da4f11"]).unknown("#ccc");
//const color = d3.scaleOrdinal(d3.schemeCategory10);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
const {nodes, links} = sankey({
nodes: graph.nodes.map(d => Object.create(d)),
links: graph.links.map(d => Object.create(d))
});
svg.append("g")
.selectAll("rect")
.data(nodes)
.join("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.append("title")
.text(d => `${d.name}\n${d.value.toLocaleString()}`);
svg.append("g")
.attr("fill", "none")
.selectAll("g")
.data(links)
.join("path")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", d => colors[d.names[0]])
.attr("stroke-width", d => d.width)
.style("mix-blend-mode", "multiply")
.append("title")
.text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`);
svg.append("g")
.style("font", "2px sans-serif")
.selectAll("text")
.data(nodes)
.join("text")
.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
.attr("y", d => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
.text(d => d.name)
.append("tspan")
.attr("fill-opacity", 0.7)
.text(d => ` ${d.value.toLocaleString()}`);
return svg.node();
}
colors = ({"Asia":"#aab58a","Europe":"#f8ecc8","Oceania":"#783f1a","Africa":"#ba9470", "South America":"#c56928", "North America":"#5e7154"});
colors ["Europe"]
graph = {
//const keys = data.columns.slice(0, -1);
const keys = Object.keys(neighbors[0]);
let index = -1;
const nodes = [];
const nodeByKey = new d3.InternMap([], JSON.stringify);;
const indexByKey = new d3.InternMap([], JSON.stringify);;
const links = [];
for (const k of keys) {
for (const d of neighbors) {
const key = [k, d[k]];
if (nodeByKey.has(key)) continue;
const node = {name: d[k]};
nodes.push(node);
nodeByKey.set(key, node);
indexByKey.set(key, ++index);
}
}
for (let i = 1; i < keys.length; ++i) {
const a = keys[i - 1];
const b = keys[i];
const prefix = keys.slice(0, i + 1);
const linkByKey = new d3.InternMap([], JSON.stringify);
for (const d of neighbors) {
const names = prefix.map(k => d[k]);
//const value = d.value || 1;
const value = d[sizeField] || 1;
let link = linkByKey.get(names);
if (link) { link.value += value; continue; }
link = {
source: indexByKey.get([a, d[a]]),
target: indexByKey.get([b, d[b]]),
names,
value
};
links.push(link);
linkByKey.set(names, link);
}
}
return {nodes, links};
}
filedata = FileAttachment("Final Covid 19 Data.csv").csv({typed: true})
toNum = (item) => {if (typeof(item)=="string") {return Number(item.replace(/,/g,''))} else {return item}}
setDeathBurden = d => {
if (d["Death Percent"] > .0005) {return "Ridiculous"}
else if (d["Death Percent"] > .00025) {return "High"}
else if (d["Death Percent"] > .00010) {return "Medium"}
else if (d["Death Percent"] > .00005) {return "Low"}
else {return "Very Low"}
}
setAffectedPopulation = d => {
if (d["Affected Percent"] > .0005) {return "Ridiculous"}
else if (d["Affected Percent"] > .00025) {return "High"}
else if (d["Affected"] > .00010) {return "Medium"}
else if (d["Affected Percent"] > .00005) {return "Low"}
else {return "Very Low"}
}
setVaccinatedPopulation = d => {
if (d["Death Percent"] > .0005) {return "Great"}
else if (d["Vaccination Percent"] > .00025) {return "Good"}
else if (d["Vaccination Percent"] > .00010) {return "Okay"}
else if (d["Vaccination Percent"] > .00005) {return "Low"}
else {return "Very Low"}
}
data = {
filedata.forEach(d => {
d["Total Cases"] = toNum(d["Total Cases"]);
d["Total Deaths"] = toNum(d["Total Deaths"]);
d["Population"] = toNum(d["Population"]);
d["total_vaccinations"] = toNum(d["total_vaccinations"]);
d["people_vaccinated"] = toNum(d["people_vaccinated"]);
d["Death Percent"] = d["Total Deaths"]/d["Population"];
d["Death Burden"] = setDeathBurden(d);
d["Vaccination Percent"] = d["people_vaccinated"]/d["Population"];
d["Vaccination Percent"] = setVaccinatedPopulation(d);
d["Affected Percent"] = d["Total Cases"]/d["Population"];
d["Affected Percent"] = setAffectedPopulation(d);
})
return filedata;
}
findDataNeighbors = (data,benchmarkElement,compareField,countAboveBelow,sortType) => {
if (!sortType) {sortType = d3.descending}
let toNum = (text) => Number(text.replace(/,/g,''))
let sortedData = d3.sort(data, (a,b) => sortType(a[compareField],b[compareField]));
let benchmarkIndex = sortedData.indexOf(benchmarkElement);
let countAbove, countBelow;
if (benchmarkIndex < countAboveBelow) { // this element is close to the beginning, shift count positions.
let leftover = countAboveBelow - benchmarkIndex;
countAbove = countAboveBelow + leftover;
countBelow = benchmarkIndex;
} else if (benchmarkIndex > data.length - countAboveBelow) { // this element is close to the end, shift count positions
let leftover = data.length - benchmarkIndex;
countAbove = leftover;
countBelow = countAboveBelow + leftover;
} else {
countAbove = countBelow = countAboveBelow;
}
return sortedData.slice(benchmarkIndex-countBelow,benchmarkIndex+countAbove);
}
neighbors = findDataNeighbors(data,benchmark,Compare,10,d3.descending)
d3 = require("d3@7", "d3-sankey@0.12")
data.columns
Object.keys(data[0])
Final Covid 19 Data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
