2f:T484,### Firearm Death Rates in Urban and Rural Areas How do firearm death rates differ across urban and rural areas in the United States? We can use CDC data to categorize regions across the United States as rural or urban. From 1999 to 2020, we can see that the average firearm death rate in urban and rural areas has shifted over time. Rural regions consistently have a higher average firearm death rate than urban areas. Within rural and urban areas, the CDC breaks out these areas into six urbanization categories: NonCore, Micropolitan, Small Metro, Medium Metro, Large Fringe Metro, and Large Central Metro. Micropolitan and NonCore urbanicity areas are considered rural, while the other four are considered urban. When we further breakout out these areas into these six urbanization sub-categories, we can see that while the rural urbanicity tends to have higher average death rates, Large Central Metro does have more yearly fluctuation and will sometimes have a higher average firearm death rate compared to the two rural urbanicity. Click on the below filter to see how rural vs. urban or how urbanization categories stack up against each other.30:T1233,//draw xAxis and xAxis label chart_draft = { const xAxis = d3 .axisBottom() .scale(xScale) .tickFormat(d3.timeFormat("%Y")); // const svg = select(svgRef.current) in React. const svg = d3.select(DOM.svg(width, height)); // if statement to swap chart to rural vs. urban if (layers.includes("Rural vs. Urban")) { svg .append("g") .attr("class", "axis") .attr("transform", `translate(0,${height -margin.bottom})`) .style('font-family', 'Arial') .call(xAxis); // xAxis label svg.append("text") .attr("class", "x-axis label") .attr("text-anchor", "middle") // width/2 (centers on x); height - margin.botton/2 (spaces between bottom margin and x-axis) .attr("transform", `translate(${width/2},${height - (margin.bottom/2)})`) .style('font-family', 'Arial') .style('font-size', 12) .text("Year"); //yAxis const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .attr("class", "axis") .attr("transform", `translate(${margin.left},0)`) .style('font-family', 'Arial') .call(yAxis); // yAxis label svg.append("text") .attr("class", "y-axis label") .attr("text-anchor", "middle") // width/2 (centers on x); height - margin.botton/2 (spaces between bottom margin and x-axis) .attr("transform", `translate(${margin.left/2},${height/2})rotate(-90)`) .style('font-family', 'Arial') .style('font-size', 12) .text("Avg. firearms death rates"); const colors = { Urban: "#F28E2B", Rural: "#4E79A7", }; svg .selectAll(".line") .append("g") .attr("class", "line") .data(grouped) .enter() .append("path") // d will be each entry in grouped. .attr("d", function (d) { // key will be either "updated", "deleted", "added" // values will be the array of [{date: __, key: __, value: }, ...] associated with key // const [key, values] = d; const [urban_rural, values] = d; return d3 .line() .curve(d3.curveNatural) .x((d) => xScale(d.year)) .y((d)=> yScale(d.death_rate))(values) }) .attr("fill", "none") .attr("stroke", (d) => colors[d[0]]) .attr("stroke-width", 2); } // ////////// // if statement to swap chart to urbanization category if (layers.includes("Urbanization Categories")) { svg .append("g") .attr("class", "axis") .attr("transform", `translate(0,${height -margin.bottom})`) .style('font-family', 'Arial') .call(xAxis); // xAxis label svg.append("text") .attr("class", "x-axis label") .attr("text-anchor", "middle") // width/2 (centers on x); height - margin.botton/2 (spaces between bottom margin and x-axis) .attr("transform", `translate(${width/2},${height - (margin.bottom/2)})`) .style('font-family', 'Arial') .style('font-size', 12) .text("Year"); //yAxis const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .attr("class", "axis") .attr("transform", `translate(${margin.left},0)`) .style('font-family', 'Arial') .call(yAxis); // yAxis label svg.append("text") .attr("class", "y-axis label") .attr("text-anchor", "middle") // width/2 (centers on x); height - margin.botton/2 (spaces between bottom margin and x-axis) .attr("transform", `translate(${margin.left/2},${height/2})rotate(-90)`) .style('font-family', 'Arial') .style('font-size', 12) .text("Avg. firearms death rates"); const colors = { "Large Central Metro": "#4e79a7", "Large Fringe Metro": "#6394be", "Medium Metro": "#89b8da", "Micropolitan (Nonmetro)": "#f69e41", "NonCore (Nonmetro)": "#eb6c1c", "Small Metro": "#b9ddf1" }; svg .selectAll(".line") .append("g") .attr("class", "line") .data(grouped_urban) .enter() .append("path") // d will be each entry in grouped. .attr("d", function (d) { // key will be either "updated", "deleted", "added" // values will be the array of [{date: __, key: __, value: }, ...] associated with key // const [key, values] = d; const [urbanization, values] = d; return d3 .line() .curve(d3.curveNatural) .x((d) => xScale(d.year)) .y((d)=> yScale(d.death_rate))(values) }) .attr("fill", "none") .attr("stroke", (d) => colors[d[0]]) .attr("stroke-width", 2); } return svg.node(); }31:T47f,html`

`32:[{"id":"9949c8bcdc4292b10e8f51707ecb6ba97b5c230a8a85c55aa85d39c74bd33d4f268fb20893f3b73371cbf3e17bd088392d6478d0b132146d3a380d94d76623f2","href":"https://static.observableusercontent.com/files/9949c8bcdc4292b10e8f51707ecb6ba97b5c230a8a85c55aa85d39c74bd33d4f268fb20893f3b73371cbf3e17bd088392d6478d0b132146d3a380d94d76623f2","name":"firearm death by state 1999-2020 urbanization category.csv","type":"text/csv","lastModified":1681050656803.607,"size":407273},{"id":"23f375e468ea13862d6cd04e2b1465ca00dc0c856876ec966d2ea3af153cd9847d872fc19305e186faba70db8675c51a34172e5ecf7714f21305f74242d13c99","href":"https://static.observableusercontent.com/files/23f375e468ea13862d6cd04e2b1465ca00dc0c856876ec966d2ea3af153cd9847d872fc19305e186faba70db8675c51a34172e5ecf7714f21305f74242d13c99","name":"urban_rural_crude_rate.csv","type":"text/csv","lastModified":1681061533110.024,"size":1093},{"id":"1c5ee444d98486f8cb0e901dd39df9ef61e8ce753ecb475cad0ae12c6d244826efdc982b2b4da5e6283c1a2e2dc2989593043b8aacbd1e077cf7288f23be22a9","href":"https://static.observableusercontent.com/files/1c5ee444d98486f8cb0e901dd39df9ef61e8ce753ecb475cad0ae12c6d244826efdc982b2b4da5e6283c1a2e2dc2989593043b8aacbd1e077cf7288f23be22a9","name":"urbanization_crude_rate.csv","type":"text/csv","lastModified":1681076983118.288,"size":4572},{"id":"a4de1eafe927661c2de51a0b0be2f009ff96e5ecc78bfeb4adc2f3c81f33dd4fa86000eb6a775508880fd83e5ff837c275d7f61598dbbc311c2f2175692f21e7","href":"https://static.observableusercontent.com/files/a4de1eafe927661c2de51a0b0be2f009ff96e5ecc78bfeb4adc2f3c81f33dd4fa86000eb6a775508880fd83e5ff837c275d7f61598dbbc311c2f2175692f21e7","name":"firearm death by state 1999-2020 urbanization category@1.csv","type":"text/csv","lastModified":1681096726030.919,"size":426017}] 2d:{"title":"Final Project Visualizations (Take 2-2)","cells":[{"id":0,"value":"# Final Project Visualizations (Take 2-2)","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"#### Firearm Death Rates Over Time (1999-2020)","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"viewof layers = Inputs.select([\"Rural vs. Urban\", \"Urbanization Categories\"], {\n label: \"Show firearm death rate by\",\n value: [\"Rural\"], \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"legend = {\nif (layers.includes(\"Rural vs. Urban\")) {\n return Swatches(d3.scaleOrdinal([\"Rural\", \"Urban\"], d3.schemeCategory10))\n }\n\nif (layers.includes(\"Urbanization Categories\")) {\n return Swatches(urban_cat_color)\n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"It is important to note that not all states have every urbanization category, which we can see in the heatmap below. State and Urbanization Categories are mapped to the x and y axes, and the average firearm death rate at each combination of those variable values is mapped to the color. The darker the color, the higher the average firearm death rate. If there is white space at one combination of those variables, this indicates that this type of urbanization category does not exist in a particular state. From the heatmap below, year-over-year, we see state outliers within each urbanization category, especially in the Large Central Metro areas. \n\nClick on the below filter to see how the data looks for each year.","pinned":false,"hidden":false,"mode":"md"},{"id":850,"value":"#### Heatmap of Firearm Death Rates by State and Urbanization Category","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"viewof i = Inputs.select(data_hmap.map(d => d.year), {sort: false, unique: true, label: \"Select a Year\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"viewof heatmap = vl.markRect({tooltip: {\"content\": \"data\"}, clip: true})\n .data(data_hmap.filter(d => (d.year === i)))\n .width(800)\n .encode(\n vl.y().fieldO(\"US States\"),\n vl.x().fieldO(\"Urbanization Categories\"),\n vl.color().average(\"Firearm Death Rates\").scale({ scheme: \"yellowgreenblue\"}),\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"As hinted in the above heatmap, we see some variance and outliers in the data across urbanization categories. Below are a box and whisker plot and a dumbbell plot to show the variance and outliers in firearm death rate. The box and whisker plot shows how the data is distributed within each urbanization category. We can see that within the Large Central Metro urbanicity, there are outliers within the data and a larger variance. \n\nIn the dumbbell plot, We can see how margin of the average firearm death rate between urban and rural areas. While firearm death rates are generally higher in rural areas, when we break it down to the state level, this is not always the case in each state. Additionally, some states have a closer margin in firearm death rates between rural and urban areas, while others have much longer distances between rural and urban firearm death rates.\n\nClick on the below filter to see how the data looks for each year.","pinned":false,"hidden":false,"mode":"md"},{"id":858,"value":"#### Variance and Outliers of Firearm Death Rates Among Urban and Rural Areas","pinned":false,"hidden":false,"mode":"md"},{"id":820,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"{ var divElement = document.getElementById('viz1681176210654'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"Regardless of whether the area is urban or rural, firearm death rates have shifted over time, with a tendency to trend upward between 1999 to 2020. While firearm death rates average higher in rural areas compared to urban areas, the urban Large Central Metro urbanicity has a higher variance and outliers driven by a few states. Inconclusive results probably indicate other endogenous factors of urbanicity that are better at explaining firearm deaths. ","pinned":false,"hidden":false,"mode":"md"},{"id":834,"value":"## END","pinned":false,"hidden":false,"mode":"md"},{"id":670,"value":"#### Styling and Attributes for Heat Map","pinned":false,"hidden":false,"mode":"md"},{"id":685,"value":"// test for dynamic filter\n\nyear_filter = data_hmap.filter(x => x.year === \"2020\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"#### Styling and Attributes for Line Charts ","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"urban_cat_color = d3.scaleOrdinal() // D3 Version 4\n .domain([\"Large Central Metro\", \"Large Fringe Metro\", \"Medium Metro\", \"Small Metro\", \"Micropolitan (Nonmetro)\", \"NonCore (Nonmetro)\"])\n .range([\"#4e79a7\", \"#6394be\" , \"#89b8da\", \"#b9ddf1\", \"#f69e41\", \"#eb6c1c\"]);\n\n // \"Large Central Metro\": \"#4e79a7\",\n // \"Large Fringe Metro\": \"#6394be\",\n // \"Medium Metro\": \"#89b8da\",\n // \"Micropolitan (Nonmetro)\": \"#f69e41\",\n // \"NonCore (Nonmetro)\": \"#eb6c1c\",\n // \"Small Metro\": \"#b9ddf1\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"margin = ({\n top: 20,\n bottom: 80,\n left: 80,\n right: 35\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"yExtent = d3\n.extent(data, (d) => d.death_rate)\n// .extent(data, (d) => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"xExtent = d3.extent(data, (d) => d.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"xScale = d3\n .scaleTime()\n .domain(xExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"yScale = d3\n .scaleLinear()\n .domain([0, yExtent[1] + 3]) // + 3 leaves some buffer\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"#### Grouped Data for Line Charts","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"grouped = d3.group(data, (d) => d.urban_rural)","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"grouped_urban = d3.group(data_urban, (d) => d.urbanization)","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"#### Import Data Sets","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"For Heatmap","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"data_hmap = d3.csvParse(\n await FileAttachment(\"firearm death by state 1999-2020 urbanization category@1.csv\").text(),\n (d) => {\n return {\n year: d[\"Year\"],\n // population: +d[\"Population\"],\n \"Urbanization Categories\": d[\"2013 Urbanization\"],\n // urban_rural: d[\"Urban or Rural\"],\n \"US States\": d[\"State\"],\n // death_rate: +d[\"Average of Crude Rate\"],\n \"Firearm Death Rates\": +d[\"Crude Rate\"]\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"For Line Charts","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = d3.csvParse(\n await FileAttachment(\"urban_rural_crude_rate.csv\").text(),\n (d) => {\n return {\n year: parseTime(d[\"Year\"]),\n // population: +d[\"Population\"],\n // urbanization: d[\"2013 Urbanization\"],\n urban_rural: d[\"Urban or Rural\"],\n // state: d[\"State\"],\n death_rate: +d[\"Average of Crude Rate\"],\n // value: +d[\"Crude Rate\"]\n };\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"data_urban = d3.csvParse(\n await FileAttachment(\"urbanization_crude_rate.csv\").text(),\n (d) => {\n return {\n year: parseTime(d[\"Year\"]),\n // population: +d[\"Population\"],\n urbanization: d[\"2013 Urbanization\"],\n // urban_rural: d[\"Urbanization\"],\n // state: d[\"State\"],\n death_rate: +d[\"Average of Crude Rate\"],\n // value: +d[\"Crude Rate\"]\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"// function to change year string to date\nparseTime = d3.timeParse(\"%Y\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"#### Import Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"// get latest vegalite\nVegaLite = require('vega-lite@2.3.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"Vega = require('vega@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"// Copied from https://beta.observablehq.com/@fil/d3-express-tips-vegalite\n// solution given by @mbostock\nfunction vegalite(spec) {\n var div = DOM.element(\"div\");\n spec = JSON.parse(JSON.stringify(spec)); // VegaLite modifies inline data!\n if (spec.data && spec.data.url == null && spec.data.values && spec.data.format) spec.data.url = \"data:\";\n var configCell = (spec.config || (spec.config = {})).cell || (spec.config.cell = {});\n if (!(\"width\" in configCell)) configCell.width = 720;\n if (!(\"height\" in configCell)) configCell.height = 405;\n new Vega.View(Vega.parse(VegaLite.compile(spec).spec)).initialize(div).hover().run();\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"import {LineChart} from \"@d3/multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"d3 = require('d3@6', 'd3@7')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}