2b:null 2c:["$","title",null,{"children":"Suicide Rates Higher among White Populations in California, Texas, and Florida in US | Harshit Gajjar | Observable"}] 31:T1551,nl = { // we need to do force simulation let all_links = [...network.links]; let current_links = [...network.links]; const nodes = network.nodes.map((d) => ({ ...d // fx: fociX(d), fy: fociY(d) })), links = current_links.map((d) => ({ source: d.source.id, target: d.target.id, value: d.value })); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const lines = svg .selectAll("line") .data(links) .join("line") .style("stroke", "#ccc") .style("pointer-events", "none") .style("stroke-opacity", (l) => opacity(l.value)) .style("stroke-width", (l) => link_width(l.value)); const circles = svg .selectAll("circle") // select all the circles .data(nodes) // data binding .join("circle") // join/create the circle // .style("fill", "steelblue") .style("fill", (d) => (d.cluster !== 3 ? state_color(d.cluster) : "green")) .attr("r", rFN) .on("mouseover", (event, d) => { // circles.style("fill", (a) => // a.id !== d.id // ? "#B8B8B8" // : d.cluster !== 4 // ? state_color(d.cluster) // : "green" // ); tooltip .html("

" + "Number of suicide cases: " + d.value + "

") .style("pointer-events", "none") .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px") .style("border-width", "2pt") .style("border-color", "black"); lines .style("stroke", (x) => { return x.source.id === d.id || x.target.id === d.id ? "black" : "#fff"; }) .style("stroke-opacity", (l) => opacity(l.value)); // return arr.__data__.source.id === d.id || arr.__data__.target.id === d.id // ? "#69b3b2" // : "#b8b8b8"; }) .on("mouseout", (event, d) => { // circles.style("fill", (d) => // d.cluster !== 4 ? state_color(d.cluster) : "green" // ); lines .style("stroke", "#ccc") .style("stroke-opacity", (l) => opacity(l.value)); tooltip .transition() .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves .style("visibility", "hidden"); }); const text = svg .selectAll("text") // select all the text .data(nodes) // data binding .join("text") // join/create the text .attr("fill", "#333") .style("font-size", "11pt") //size(s.value) + .style("text-align", "left") .style("cursor", "pointer") .style("pointer-events", "none") .text((d) => d.id); // One of the keys of force simulation is that you want it to be updating it everytime a simulation iterates //return nodes; // it puts x and y value in the nodes object // everytime the simulation runs we will be calling this function const ticked = () => { lines .attr("x1", (l) => l.source.x) .attr("y1", (l) => l.source.y) .attr("x2", (l) => l.target.x) .attr("y2", (l) => l.target.y); text .attr( "x", (d) => d.x + (d.cluster !== 3 ? stateRadius(d.value) : raceRadius(d.value)) ) .attr( "y", (d) => d.y + (d.cluster !== 3 ? stateRadius(d.value) : raceRadius(d.value)) + 10 ); circles.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }; // function mouseover(d) { // console.log("working??", d.id); // let arr = network.links.filter( // (e) => e.target.id == d.id || e.source.id == d.id // ); // console.log(arr); // // .style("opacity", 1) // // .style("stroke", "black"); // } // function mouseout(d) { // network.links.style("stroke", "#9cf").style("stroke-opacity", 0.6); // } const simulation = d3 .forceSimulation(nodes) // it takes nodes as parameter. // we add forces, so they change the way the simulation works. .force("charge", d3.forceManyBody().strength(-200)) // Using d3.forceManyBody()=> all the nodes repel each other .force("fociX", d3.forceX((d) => fociX(d)).strength(0.09)) .force("fociY", d3.forceY((d) => fociY(d)).strength(0.03)) // .force("center", d3.forceCenter(width / 2, height / 2)) // this will try to put the nodes in center // .force("collide", d3.forceY(height / 2)) // this will try to put the nodes in center. We use forceX and forceY only if you have unconnecyed network. .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance(100) .strength(0.1) ) // force we join the nodes by the links // .force("boundary", forceBoundary(3, 3, width, height)) // this will ensure that all the nodes are within the boundary .force("collide", d3.forceCollide(rFN).iterations(4)) .on("tick", ticked); // we will be calling this function everytime the simulation updates // text.call(drag(simulation)); circles.call(drag(simulation)); // this is only for observable. We put a rule that takes the cell and if the cell needs to be rerun, we need to stop the simulation. If we don't then multiple simulations will go on and we will get garbage values invalidation.then(() => simulation.stop()); return svg.node(); }32:T1658,## Made-up Insights (Hypothesis) * Red states in US has weaker gun laws and Texas has the second-largest population in the United States and has the highest poverty rate, making it more vulnerable to suicides. Suicide by firearms is common in the state. Hence Texas should have highest suicide rates in United States. [**Selected**] * **Considerations** * I will need enough data of all the suicide cases in United States from 2016 to 2020. * I need to iterate all the records and group all the suicides by state. * In terms of the idiom (visualization), I would need to display the summation of all suicides by each state for all race/ethnicity. Plotting a Node-Link visualization with nodes of States and Races and links of summation of suicides across years will help me determine races with most and least suicide rates in each state, along with determining if the state is red or blue. * Asian Americans and Pacific Islanders (AAPIs) are less likely to seek mental health treatment and experience significant cultural and linguistic barriers to accessing care, making them the race/ethnicity with the highest suicide rate. * **Considerations** * I will need enough data of all the suicide cases in India from 2016 to 2020. * I need to iterate all the records and group all the suicides by race/ethnicity. * In terms of the idiom (visualization), I would need to display the summation of all suicides for each race/ethnicity across each state. Plotting a BarChart will help me determine the number of suicide cases for each race/ethnicity. ## Target Audience * Mental health professionals and researchers who study suicide rates and trends in the United States. * Policymakers who are responsible for implementing suicide prevention programs and policies at the national, state, and local levels. * Journalists and media professionals who report on public health issues and may be interested in visualizing suicide rates in different regions of the country or among different demographic groups. ## Data Abstraction (What) * **Dataset type:** Table (converted to network) * **Attributes used:** * Race * Attribute Type - Categorical * State * Attribute Type - Categorical * Deaths * Attribute type - Quantitative * Orientation - Sequential * **Derived Attributes:** A attributed named "value" which is summation of total suicide cases * Attribute Type - Quantitative * Orientation - Sequential * **Availability:** Static * **Time frame of Data:** 2016 - 2020 * **Data Source:** [Suicides in United States](https://wonder.cdc.gov/controller/datarequest/D76;jsessionid=C8B84AE25B40557654EAE4E01326) ## Task Abstraction (Why) * **Selected Insight:** Red states in US has weaker gun laws and Texas has the second-largest population in the United States and has the highest poverty rate, making it more vulnerable to suicides. Suicide by firearms is common in the state. Hence Texas should have highest suicide rates in United States * T1: Summarize the state as blue or red. **[Summarize, Feature]** * T2: Summarize the suicide trends in the red and blue states **[Summarize, Feature]** * T3: Identify the race/ethnicity with highest number of suicide cases. **[Identify, Extreme]** ## Marks and Channels (How) * **Marks:** Point, Line * **Channel:** * Position: The position of the node determined by the force simulation algorithm. * Attribute: State and Race * Task: T2, T3 * Used to separate different types of node, which can be republic/democratic states or race.ethnicity. * **Expressiveness principle** - "State" and "Race" is a categorical attribute and they are represented by node. * **Effectiveness principle** - The best way to show red and blue states and race/ethnicity is to use the position. The nodes can be aligned as the outcome of the force simulation algorithm and we can place the nodes depending upon forces applied. * Color Hue: To identify type of node, which can be red/blue state or race/ethnicity. * Attribute: State and Race * Task: T1 * Using **seperate** * **Expressiveness principle** - "State" and "Race" is a categorical attribute so it is represented with color hue. * **Effectiveness principle** - The best way to show red and blue states and race/ethnicity is to use color hue. The colors determines if it is a red/blue state or race/ethnicity. * Color Saturation: Used in the links. This denotes the magnitude of suicide cases. Darker the color, more the suicide cases, lighter the color less suicide cases. * Attribute: value * Task: T2, T3 * Using **express** * **Expressiveness principle** - "Value" is a quantitative attribute so it is represented with color saturation. * **Effectiveness principle** - The best way to see determine number of suicide cases across different race/ethnicity for a given US state is to use color saturation. The color saturation is directly proportional to number of suicide cases. More the opacity, more the suicide cases. * Area: Used in nodes and links. Nodes -> Number of suicide cases in a particular state or race/ethnicity. Links -> Number of suicide cases for different race/ethnicity for a given state. * Attribute: value * Task: T3 * Using **express** * **Expressiveness principle** - "Value" is a quantitative attribute so it is represented with Area. * **Effectiveness principle** - The best way to see determine number of suicide cases across different red and blue states a is to use Area in a Force Simulation (Node-Link). The Node-Link idiom will help us summarize the states as red or blue and show the number of suicide cases for each state.33:T501,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 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; }34:[{"id":"577fa490252e5e49b4a53da732203f04d1823af74fb7823d0ae4a86e269c7ce9fc2c287956de961ff9c750e9c8d24c80925fac22035bf7f67b1ac3f252c1096a","href":"https://static.observableusercontent.com/files/577fa490252e5e49b4a53da732203f04d1823af74fb7823d0ae4a86e269c7ce9fc2c287956de961ff9c750e9c8d24c80925fac22035bf7f67b1ac3f252c1096a","name":"Suicide_race_state.csv","type":"text/csv","lastModified":1679188049212.137,"size":64424},{"id":"2eb63398b5862f049db17f49b8ddd71f924494a4b2ef202e0e73527b88ec5cfddd2bf68579ca446c87f6f9bac4b95ad198405012df543150d851ffa84db54d26","href":"https://static.observableusercontent.com/files/2eb63398b5862f049db17f49b8ddd71f924494a4b2ef202e0e73527b88ec5cfddd2bf68579ca446c87f6f9bac4b95ad198405012df543150d851ffa84db54d26","name":"suicide_usa_2016_2020.csv","type":"text/csv","lastModified":1679294996327.719,"size":121243},{"id":"78272560f9fefa0ef8ec6e655db2b0656a5fab998e8be41bcac6d35fb1ab98b422af494d51f584e4b983c367893a5800948dd2e0414f05288ee7be858f24cde1","href":"https://static.observableusercontent.com/files/78272560f9fefa0ef8ec6e655db2b0656a5fab998e8be41bcac6d35fb1ab98b422af494d51f584e4b983c367893a5800948dd2e0414f05288ee7be858f24cde1","name":"usa_suicides_2016_onwards.csv","type":"text/csv","lastModified":1679332622607.396,"size":322080},{"id":"78272560f9fefa0ef8ec6e655db2b0656a5fab998e8be41bcac6d35fb1ab98b422af494d51f584e4b983c367893a5800948dd2e0414f05288ee7be858f24cde1","href":"https://static.observableusercontent.com/files/78272560f9fefa0ef8ec6e655db2b0656a5fab998e8be41bcac6d35fb1ab98b422af494d51f584e4b983c367893a5800948dd2e0414f05288ee7be858f24cde1","name":"usa_suicides_2016_onwards@1.csv","type":"text/csv","lastModified":1679333693735.423,"size":322080}] 2f:{"id":"84db57b75e04bfb1","slug":null,"title":"Suicide Rates Higher among White Populations in California, Texas, and Florida in US","thumbnail":"1ac3ee9e02e81fb8c1c5f8cd33302ca6cedb6cb766dbb135ee6096fea0141f0a","access_level":"public","create_time":"$D2023-03-19T01:07:18.824Z","update_time":"$D2023-09-03T02:07:11.127Z","view_time":null,"first_public_time":"$D2023-03-19T01:07:18.824Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"666e343e9fc70af6","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":"starter_2024"},"version":901,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e2ba07857faed1b","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":null}],"members":[{"type":"individual","id":"5e2ba07857faed1b","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":null,"role":"editor"},{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Suicide Rates Higher among White Populations in California, Texas, and Florida in US","cells":[{"id":0,"value":"# Suicide Rates Higher among White Populations in California, Texas, and Florida in US\nSpanning across years 2016 to 2020\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"Swatches(\n d3.scaleOrdinal(\n [\"Republic US States\", \"Democratic US States\", \"Race/Ethnicity\"],\n [\"#2A64C5\", \"#D94A41\", \"green\"]\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"md`\nCreated by [Harshit Gajjar](https://observablehq.com/@5e2ba07857faed1b?tab=profile)
\nClass: [Data Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\nInstructor: [John Alexis Guerra Gomez](https://observablehq.com/@john-guerra)
\n[Youtube Video](https://youtu.be/-b--5C5Uo3c)
\n[Tweet](https://twitter.com/HarshitSFHusky/status/1638569141039923201)
\n[Dataset](https://wonder.cdc.gov/controller/datarequest/D76;jsessionid=C8B84AE25B40557654EAE4E01326)
\n[Red/Blue States Map in US](https://www.nytimes.com/2016/09/09/upshot/red-states-blue-states-does-this-map-look-familiar.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"## Introduction\nSuicide is the act of intentionally taking one's own life, and it is a complex and serious issue that affects individuals, families, and communities worldwide. The causes of suicide are often complex and multifaceted, involving a range of individual, societal, and environmental factors. This notebook delves into suicide cases in United States between 2016 and 2020, examining patterns and trends among different states and race/ethnicity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":823,"value":"## Actual Insights\n* Suicides among Asians were found in only blue states and one red state that is Texas.\n* suicides among American Indian or Alaskan Native were mostly found in red states and one blue state that is new mexico.\n* California has highest suicide rates in the country and maximum suicides were linked with Whites as compared to other race/ethnicity.\n* White was the only race/ethnicity which had suicides in all the states and other races such as Asians, Black or African American didn't report suicide cases in all the states from the timeframe of 2016-2020","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"### Functions for the node-link idiom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\") // the tooltip always \"exists\" as its own html div, even when not visible\n .style(\"position\", \"absolute\") // the absolute position is necessary so that we can manually define its position later\n .style(\"visibility\", \"hidden\") // hide it from default at the start so it only appears on hover\n .style(\"background-color\", \"#b8b8b8\")\n .attr(\"class\", \"tooltip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// this to implmenet the drag function in the viz\ndrag = (simulation) => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"style = html`