chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const {nodes, links} = sankey({
nodes: graph.nodes.map(d => Object.assign({}, d)),
links: graph.links.map(d => Object.assign({}, d))
});
// these are the rectangles
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 => {
if (!howToColor(d.names)) {
return ("#F8F8F8")
}
else {
if (d.names.length == 2) {
return (color(d.names[0]))
}
else if (d.names.length == 3) {
return (color(d.names[1]))
}
else if (d.names.length == 4) {
return (color(d.names[2]))
}
else {
return (color(d.names[3]))
}
}
})
.attr("stroke-width", d => d.width)
.style("mix-blend-mode", "multiply")
.append("title")
.text( d => {
if (howToColor(d.names)) { // only include tooltip for highlighted links?
return (`${d.names.join(" → ")}\n${d.value.toLocaleString()}`)
}
});
svg.append("g")
.style("font", "10px 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()}`);
//column labels
// svg.append("g")
// .style("font", "15px sans-serif")
// .selectAll("text")
// .data(keys)
// .join("text")
// .attr("x", (d, i) => i*250)
// .attr("y", d => 20)
// .attr("dy", "0.35em")
// .attr("text-anchor","start")
// .text(d => d)
// .append("tspan")
// .attr("fill-opacity", 0.7)
return svg.node();
}
function howToColor(link) { //returns true if that link should be colored
// link is an array of all the factors selected, ie ["white", "Narcotics"] or ["Black", "Motor Vehicles", "None", "Not Incarceraed"] etc, 2 <= link.length < 6
if (!first) { //no radio buttons, show everything
return true
}
else if (first && second && third && fourth && fifth) { // all radio buttons, only show links containing this exact pattern, or shorter
if(link.includes(first) && link.includes(second) && link.includes(third) && link.includes(fourth) && link.includes(fifth)) {
return true
}
else if (link.includes(first) && link.includes(second) && link.includes(third) && link.includes(fourth) && link.length == 4) {
return true
}
else if (link.includes(first) && link.includes(second) && link.includes(third) && link.length == 3) {
return true
}
else if (link.includes(first) && link.includes(second) && link.length == 2) {
return true
}
else {
return false
}
}
else if (first && second && third && fourth) {
if(link.includes(first) && link.includes(second) && link.includes(third) && link.includes(fourth)) {
return true
}
else if (link.includes(first) && link.includes(second) && link.includes(third) && link.length == 3) {
return true
}
else if (link.includes(first) && link.includes(second) && link.length == 2) {
return true
}
else {
return false
}
}
else if (first && second && third) {
if(link.includes(first) && link.includes(second) && link.includes(third)) {
return true
}
else if (link.includes(first) && link.includes(second) && link.length == 2) {
return true
}
else {
return false
}
}
else if (first && second) {
if(link.includes(first) && link.includes(second)) {
return true
}
else if (link.includes(first) && link.length == 1) {
return true
}
else {
return false
}
}
else {
if(link.includes(first)) {
return true
}
else {
return false
}
}
}
width = 1100
height = 720
sankey = d3.sankey()
.nodeSort(null)
.linkSort(null)
.nodeWidth(4)
.nodePadding(20)
.extent([[0, 5], [width, height - 5]])
graph = {
let index = -1;
const nodes = [];
const nodeByKey = new Map;
const indexByKey = new Map;
const links = [];
for (const k of keys) {
for (const d of data) {
const key = JSON.stringify([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 Map;
for (const d of data) {
const names = prefix.map(k => d[k]);
const key = JSON.stringify(names);
const value = d.value || 1;
let link = linkByKey.get(key);
if (link) { link.value += value; continue; }
link = {
source: indexByKey.get(JSON.stringify([a, d[a]])),
target: indexByKey.get(JSON.stringify([b, d[b]])),
names,
value
};
links.push(link);
linkByKey.set(key, link);
}
}
return {nodes, links};
}
color = d3.scaleOrdinal(d3.schemePastel1)
data = d3.csvParse(await FileAttachment("VA_felony_only_rel_columns@7.csv").text(), d3.autoType)
d3 = require("d3@6", "d3-sankey@0.12")
keys_op_1 = ["ANY_INC", "CONV_TYPE", "OFFENSE_TYPE", "RACE_REC", "GENDER"]
keys_op_2 = ["GENDER", "RACE_REC", 'CONV_TYPE', 'OFFENSE_TYPE', 'ANY_INC']
keys_op_3 = ["OFFENSE_TYPE", "CONV_TYPE", "ANY_INC", "RACE_REC", "GENDER"]
keys_op_4 = ["RACE_REC", "GENDER", "OFFENSE_TYPE", "CONV_TYPE", "ANY_INC"]
keys_op_5 = ["CONV_TYPE", "OFFENSE_TYPE", "RACE_REC", "GENDER", "ANY_INC"]
keys = switchSt
switchSt = {
if (Selection == "Gender") {
return keys_op_2;
}
else if (Selection == "Incarcerated"){
return keys_op_1
}
else if (Selection == "Offense Type"){
return keys_op_3
}
else if (Selection == "Conviction Type") {
return keys_op_5
}
else { //Race
return keys_op_4;
}
}
viewArray = []
arrAssign = { // dynamically change the order of radio buttons shown based on the chart order selected
if (Selection == "Race") {
viewArray.length = 0; // clear array each time
viewArray.push(Inputs.radio(["Black", "White"], {label: "Race"}));
viewArray.push(Inputs.radio(["Male", "Female"], {label: "Gender"}));
viewArray.push(Inputs.radio(["Narcotics", "Motor Vehicle", "Larceny", "Violent", "Weapon", "Fraud", "Burglary", "Other"], {label: "Offense Type"}, {width : 1000})); //{width : num}
viewArray.push(Inputs.radio(["None", "Misdemeanor", "Felony"], {label: "Conviction Type"}));
viewArray.push(Inputs.radio(["Incarcerated", "Not incarcerated"], {label: "Incarceration"}));
return viewArray;
}
else if (Selection == "Gender") {
viewArray.length = 0;
viewArray.push(Inputs.radio(["Male", "Female"], {label: "Gender"}));
viewArray.push(Inputs.radio(["Black", "White"], {label: "Race"}));
viewArray.push(Inputs.radio(["None", "Misdemeanor", "Felony"], {label: "Conviction Type"}));
viewArray.push(Inputs.radio(["Narcotics", "Motor Vehicle", "Larceny", "Violent", "Weapon", "Fraud", "Burglary", "Other"], {label: "Offense Type"}));
viewArray.push(Inputs.radio(["Incarcerated", "Not incarcerated"], {label: "Incarceration"}));
return viewArray;
}
else if (Selection == "Incarcerated") {
viewArray.length = 0;
viewArray.push(Inputs.radio(["Incarcerated", "Not incarcerated"], {label: "Incarceration"}));
viewArray.push(Inputs.radio(["None", "Misdemeanor", "Felony"], {label: "Conviction Type"}));
viewArray.push(Inputs.radio(["Narcotics", "Motor Vehicle", "Larceny", "Violent", "Weapon", "Fraud", "Burglary", "Other"], {label: "Offense Type"}));
viewArray.push(Inputs.radio(["Black", "White"], {label: "Race"}));
viewArray.push(Inputs.radio(["Male", "Female"], {label: "Gender"}));
return viewArray;
}
else if (Selection == "Offense Type") {
viewArray.length = 0;
viewArray.push(Inputs.radio(["Narcotics", "Motor Vehicle", "Larceny", "Violent", "Weapon", "Fraud", "Burglary", "Other"], {label: "Offense Type"}));
viewArray.push(Inputs.radio(["None", "Misdemeanor", "Felony"], {label: "Conviction Type"}));
viewArray.push(Inputs.radio(["Incarcerated", "Not incarcerated"], {label: "Incarceration"}));
viewArray.push(Inputs.radio(["Black", "White"], {label: "Race"}));
viewArray.push(Inputs.radio(["Male", "Female"], {label: "Gender"}));
return viewArray;
}
else if (Selection == "Conviction Type") {
viewArray.length = 0;
viewArray.push(Inputs.radio(["None", "Misdemeanor", "Felony"], {label: "Conviction Type"}));
viewArray.push(Inputs.radio(["Narcotics", "Motor Vehicle", "Larceny", "Violent", "Weapon", "Fraud", "Burglary", "Other"], {label: "Offense Type"}));
viewArray.push(Inputs.radio(["Black", "White"], {label: "Race"}));
viewArray.push(Inputs.radio(["Male", "Female"], {label: "Gender"}));
viewArray.push(Inputs.radio(["Incarcerated", "Not incarcerated"], {label: "Incarceration"}));
return viewArray;
}
if (reset > 0) {
viewArray.length = 0;
}
}
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.
