Public
Edited
Apr 26, 2023
style = html`<style> svg text {
font-family: sans-serif;
text-anchor: middle;
cursor: pointer
}`
style2 = html`<style> svg circle {
cursor: pointer
}`
opacity = d3
.scaleLog()
.domain(d3.extent(network.links, (d) => d.value))
.range([0.1, 1])
link_width = d3
.scaleSqrt()
.domain(d3.extent(network.links, (d) => d.value))
.range([2, 10])
size = d3
.scaleLinear()
.domain(d3.extent(network.nodes, (d) => d.value))
.range([8, 22])
state_color = d3
.scaleOrdinal()
.domain(network.nodes)
.range(["#2A64C5", "#D94A41"])
// color = d3.scaleOrdinal(d3.schemeCategory10)
// .domain(d3.extent(network.nodes, (d) => d.value))
// .range([4, 18])
network.nodes
stateRadius = d3
.scaleLinear()
.domain(d3.extent([...nodesToArray(generateNodes("State"))], (d) => d.value)) // generateNodes("State")
.range([5, 20])
raceRadius = d3
.scaleLinear()
.domain(d3.extent([...nodesToArray(generateNodes("Race"))], (d) => d.value)) // generateNodes("Race")
.range([5, 20])
rFN = (d) => (d.cluster !== 3 ? stateRadius(d.value) : raceRadius(d.value))
height = 700
fociX = (d) =>
d.cluster === 3 ? width / 2 : d.cluster === 1 ? width * 0.3 : width * 0.7
// fociX = (d) =>
// d.cluster === 3 ? width / 2 : width/2 + width * 0.4 * Math.sin(tetha(d.id))
fociY = (d) => height / 2
// fociY = (d) =>
// d.cluster === 3 ? height / 2 : height / 2 + width * 0.4 * Math.cos(tetha(d.id))
linkStrength = d3.scaleLinear()
.domain(d3.extent(network.links, d => d.value ))
.range([0.01, 0.3])
// tetha = d3
// .scalePoint()
// .domain(network.nodes.filter((d) => d.cluster !== 3).map((d) => d.id))
// .range([0, 2 * Math.PI])
// tetha(network.nodes[4].id)
// circle = network.nodes.map(d => ({x: fociX(d), y: fociY(d)}))
// vl.markPoint()
// .encode(vl.x().fieldQ("x"), vl.y().fieldQ("y")).data(circle).render()
node_link = new Map()
raw_data = FileAttachment("usa_suicides_2016_onwards@1.csv").csv()
data = raw_data.filter((s) => s.Count !== "")
data
Type Table, then Shift-Enter. Ctrl-space for more options.
function generateNodes(param) {
return d3.rollup(
data,
(v) =>
d3.mean(
v,
(d) =>
(parseInt(d.Count) * 100000) / parseInt(d.Population.replace(",", ""))
),
(d) => d[param].replace(/ *\([^)]*\) */g, "")
);
}
generateNodes("State")
function generatePop() {
let map = new Map();
data.forEach((d) => {
map.set(
d.State.replace(/ *\([^)]*\) */g, ""),
parseInt(d.Population.replace(",", ""))
);
});
return map;
}
population_map = generatePop()
function nodesToArray(state_count) {
let arr = [];
for (let [k, v] of state_count.entries()) {
let key = k.replace(/ *\([^)]*\) */g, "");
let obj = {
id: key,
value: v,
// population_map.has(key)
// ? (v * 100000) / population_map.get(key)
// : v,
cluster: states_color_map.get(key)
};
node_link.set(key, obj);
arr.push(obj);
}
return arr;
}
generateNodes("Race")
function generateLinks() {
return d3.rollup(
data,
(v) =>
d3.mean(
v,
(d) =>
(parseInt(d.Count) * 100000) / parseInt(d.Population.replace(",", ""))
),
(d) => d.State.replace(/ *\([^)]*\) */g, ""),
(d) => d.Race
);
}
node_link
function generateLinksForViz(linkData) {
let arr = [];
for (let [key, value] of linkData.entries()) {
for (let [k, v] of value.entries()) {
arr.push({
source: node_link.get(key.replace(/ *\([^)]*\) */g, "")),
target: node_link.get(k),
value: v
});
}
}
return arr;
}
generateLinks()
network.nodes
network = ({
nodes: [
...nodesToArray(generateNodes("State")), // generateNodes("State")
...nodesToArray(generateNodes("Race")) // generateNodes("Race")
],
links: generateLinksForViz(generateLinks())
})
forceBoundary = require("d3-force-boundary") // to ensure that all the nodes are within the boundary of the svg
function mapStatesRedBlue() {
// let red = [
// "Alabama",
// "Alaska",
// "Arizona",
// "Arkansas",
// "Georgia",
// "Idaho",
// "Indiana",
// "Iowa",
// "Kansas",
// "Kentucky",
// "Louisiana",
// "Mississippi",
// "Missouri",
// "Montana",
// "Nebraska",
// "North Carolina",
// "North Dakota",
// "Oklahoma",
// "South Carolina",
// "South Dakota",
// "Tennessee",
// "Texas",
// "Utah",
// "West Virginia",
// "Wyoming"
// ];
// let blue = [
// "California",
// "Colorado",
// "Connecticut",
// "Delaware",
// "District of Columbia",
// "Hawaii",
// "Illinois",
// "Maine",
// "Maryland",
// "Massachusetts",
// "Michigan",
// "Minnesota",
// "Nevada",
// "New Hampshire",
// "New Jersey",
// "New Mexico",
// "New York",
// "Oregon",
// "Pennsylvania",
// "Rhode Island",
// "Vermont",
// "Virginia",
// "Washington",
// "Wisconsin",
// "Florida",
// "Ohio"
// ];
let red = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"Georgia",
"Idaho",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"North Carolina",
"North Dakota",
"Oklahoma",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"West Virginia",
"Wyoming",
"Pennsylvania",
"Wisconsin",
"Florida",
"Ohio"
];
let blue = [
"California",
"Colorado",
"Connecticut",
"Delaware",
"District of Columbia",
"Hawaii",
"Illinois",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"Oregon",
"Rhode Island",
"Vermont",
"Virginia",
"Washington"
];
let race = [
"American Indian or Alaska Native",
"Asian or Pacific Islander",
"Black or African American",
"White"
];
let stateColor = new Map();
red.forEach((r) => {
stateColor.set(r, 1);
});
blue.forEach((b) => {
stateColor.set(b, 2);
});
race.forEach((r) => {
stateColor.set(r, 3);
});
return stateColor;
}
states_color_map = mapStatesRedBlue()
state_suicide_rate_map = new Map()
race_suicide_rate_map = new Map()
suicide100k()
state_suicide_rate_map
race_suicide_rate_map
import { Legend, Swatches } from "@d3/color-legend"
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.
