2f:Tec4,grid1 = html`

${min_death_rate_state}

Min. Firearm Death Rate

US Minimum

${global_min}

${mean_death_rate}

Avg. Firearm Death Rate

US Average

${global_average}

${max_death_rate_state}

Max. Firearm Death Rate

US Maximum

${global_max}

`30:T438,viewof plots = { const line_plot = vl.markLine({strokeWidth: 3, interpolate: 'monotone'}) .data(data.filter(d => (d["states"] === statesFilter || d["states"] === "US Average"))) // .width("container") // .transform( // vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid') // ) .encode( vl.x().fieldN('year').title('Year'), vl.y().average('firearm_death_rates').title('Avg Firearm Death Rates'), vl.color().fieldN('states').scale({domain: data['states'], range: ['#4E79A7', '#BAB0AC']}).title('US States').legend(null), ) .title('Firearm Death Rate Over Time') ; // .render(); const density_plot = vl .markArea() .data(data.filter(x => (x.states === statesFilter))) // .width("container") .transform(vl.density('firearm_death_rates').bandwidth(0.3)) .encode( vl .x() .fieldQ('value') .title('Firearm Death Rate'), vl .y() .fieldQ('density') .title('Density') ) .title("Density of Firearm Death Rates") return vl.hconcat(line_plot, density_plot).spacing(50).render() }31:Tace,// Repurposed from Indicator Widget by Marcus Collier on Observable indicatorWithSecondaryValue = ({ value = 0, secondaryValue = 0, valueStyleOptions = {}, secondaryValueStyleOptions = {}, label = '', ignorePluralizeOnLabel = true, secondaryLabel = '', ignorePluralizeOnSecondaryLabel = true, labelStyleOptions = {}, secondaryLabelStyleOptions = {}, }) => { const valueStyleOptionsDefaults = { color: '#4E79A7', fontSize: '3em', marginRight: '8px' }; const labelStyleOptionsDefaults = { color: 'black', fontSize: '1.2em' }; const secondaryValueStyleOptionsDefaults = { color: 'rgb(158, 162, 171)', fontSize: '1rem', marginRight: '8px' }; const secondaryLabelStyleOptionsDefaults = { color: 'rgb(158, 162, 171)', fontSize: '1rem' }; const valueCssOptions = { ...valueStyleOptionsDefaults, ...valueStyleOptions, }; const labelCssOptions = { ...labelStyleOptionsDefaults, ...labelStyleOptions, }; const secondaryValueCssOptions = { ...secondaryValueStyleOptionsDefaults, ...secondaryValueStyleOptions, }; const secondaryLabelCssOptions = { ...secondaryLabelStyleOptionsDefaults, ...secondaryLabelStyleOptions, }; const description = ignorePluralizeOnLabel ? label : pluralize(label, value); const secondaryDescription = ignorePluralizeOnSecondaryLabel ? secondaryLabel : pluralize(secondaryLabel, secondaryValue); return htl.html`

${value.toLocaleString()}

${description}

${secondaryDescription}

${secondaryValue.toLocaleString()}

` }32:[{"id":"e62d71695f969337d17cf194a9be51a7c19d780edb5c9864f8fc974097ba182d3faf7dbf6171ea5e2fba6320313aa71a037a88ded2e2ed5c3006892bac335e64","href":"https://static.observableusercontent.com/files/e62d71695f969337d17cf194a9be51a7c19d780edb5c9864f8fc974097ba182d3faf7dbf6171ea5e2fba6320313aa71a037a88ded2e2ed5c3006892bac335e64","name":"firearm_death_rates_state_rank.csv","type":"text/csv","lastModified":1681612923824.587,"size":1779},{"id":"a4de1eafe927661c2de51a0b0be2f009ff96e5ecc78bfeb4adc2f3c81f33dd4fa86000eb6a775508880fd83e5ff837c275d7f61598dbbc311c2f2175692f21e7","href":"https://static.observableusercontent.com/files/a4de1eafe927661c2de51a0b0be2f009ff96e5ecc78bfeb4adc2f3c81f33dd4fa86000eb6a775508880fd83e5ff837c275d7f61598dbbc311c2f2175692f21e7","name":"firearm death by state 1999-2020 urbanization category-1.csv","type":"text/csv","lastModified":1681351725397.195,"size":426017},{"id":"13b40d7800f90e63ee8e7dad0969152a8f0baad8ed385d9458a96aec2ded256fecbea643e2d25e71b00de73c1ce91e25a494a973d20513b8361f64c6fe0fd191","href":"https://static.observableusercontent.com/files/13b40d7800f90e63ee8e7dad0969152a8f0baad8ed385d9458a96aec2ded256fecbea643e2d25e71b00de73c1ce91e25a494a973d20513b8361f64c6fe0fd191","name":"firearm death rate by state 1999 - 2020-2.csv","type":"text/csv","lastModified":1681353174347.698,"size":59554},{"id":"33a483a79b74fea281459595da07e088b153811f724d908936ed1266a760650111e05226d35db292bde88abe12e60de26545c132632c2bec16080d6687989c68","href":"https://static.observableusercontent.com/files/33a483a79b74fea281459595da07e088b153811f724d908936ed1266a760650111e05226d35db292bde88abe12e60de26545c132632c2bec16080d6687989c68","name":"firearm death rate by state 1999 - 2020-2@1.csv","type":"text/csv","lastModified":1681354159198.458,"size":60518}] 2d:{"title":"Final Project Visualizations (Take 2-1)","cells":[{"id":0,"value":"# Final Project Visualizations (Take 2-1)","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Death Rates by State (1999-2020)\n\nDo firearm deaths vary across states? How does a state's firearm death rate compare to the US average? Using CDC data on Firearm Deaths from 1999-2020, this visualization shows a set of charts for each state. The top three show the maximum mean average, and minimum firearm death rate for each state during these two decades. Below the three indicators/scorecards is a line chart that shows the firearm death rate of a selected state against the US average. The chart to the right of the line chart is a density chart that shows the density of firearm death rates during these two decades for the state of interest.\n\nUse the below filter to select an individual state of interest.","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"viewof statesFilter = Inputs.select(uniqueStatesArr, {sort: false, unique: true, label: \"Select a State\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"legend = { return Swatches(line_colors)} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"widthA = cellA.width","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"heightA = cellA.height","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"filtered_data = data.filter(d => (d[\"states\"] === statesFilter))","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"class Cell {\n constructor(element) {\n this.element = element;\n element.style.position = \"relative\";\n }\n get width() {\n return resizer(this.element, \"clientWidth\");\n }\n get height() {\n return resizer(this.element, \"clientHeight\");\n }\n embed(content) {\n content.style.position = \"absolute\";\n content.style.width = \"100%\";\n content.style.height = \"auto\";\n if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);\n else this.element.appendChild(content);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"function resizer(element, dimension = \"clientWidth\") {\n return Generators.observe(notify => {\n let width = notify(element[dimension]);\n const resized = () => {\n let w = element[dimension];\n if (w !== width) notify(width = w);\n };\n window.addEventListener(\"resize\", resized);\n return () => window.removeEventListener(\"resize\", resized);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"cellB = new Cell(grid.querySelector(\"[name=b]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"cellA.embed(indicatorWithSecondaryValue({ value: max_death_rate_state, label: 'Max. Firearm Death Rate', secondaryValue: global_max, secondaryLabel: 'US Maximum' }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"cellB.embed(indicatorWithSecondaryValue({ value: mean_death_rate, label: 'Avg. Firearm Death Rate', secondaryValue: global_average, secondaryLabel: 'US Average' }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"cellC.embed(indicatorWithSecondaryValue({ value: min_death_rate_state, label: 'Min. Firearm Death Rate', secondaryValue: global_min, secondaryLabel: 'US Minimum' }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"#### Attributes and Styling","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"styleString = (style) => {\n return Object.entries(style).map(([k, v]) => `${caseHandler(k)}:${v};`).join(';');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"caseHandler = (property) => {\n return property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"pluralize = require('pluralize');","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"line_colors = d3.scaleOrdinal() // D3 Version 4\n .domain([statesFilter, \"US Average\"])\n .range(['#4E79A7', '#BAB0AC']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"#### Import Data","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"uniqueStatesArr = createUniqueStatesArr()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"createUniqueStatesArr = () => {\n const uniqueStates = [];\n data.forEach((d) => {\n if (!d3.set(uniqueStates).has(d[\"states\"]) && d[\"states\"] !== null && d[\"states\"] !== \"US Average\") {\n uniqueStates.push(d[\"states\"]);\n }\n });\n return uniqueStates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"mean_death_rate = d3.mean(data.filter(d => (d[\"states\"] === statesFilter)), d => d.firearm_death_rates).toFixed(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"max_death_rate_state = d3.max(data.filter(d => (d[\"states\"] === statesFilter)), d => d.firearm_death_rates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"min_death_rate_state = d3.min(data.filter(d => (d[\"states\"] === statesFilter)), d => d.firearm_death_rates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"global_max = d3.max(data, d => d.firearm_death_rates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"global_min = d3.min(data, d => d.firearm_death_rates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"global_average = 11.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"// for the summary statistics\ndata_rank = d3.csvParse(\n await FileAttachment(\"firearm_death_rates_state_rank.csv\").text(), \n (d) => {\n return {\n // year: d[\"Year\"],\n \"states\": d[\"State\"],\n \"firearm_death_rates\": +d[\"Crude Rate\"], \n \"deciles\": +d[\"Deciles\"]\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"// for the summary statistics\ndata = d3.csvParse(\n await FileAttachment(\"firearm death rate by state 1999 - 2020-2@1.csv\").text(), \n (d) => {\n return {\n year: d[\"Year\"],\n \"states\": d[\"State\"],\n \"firearm_death_rates\": +d[\"Crude Rate\"]\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"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":15,"value":"#### Import Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"d3 = require(\"d3@6\", \"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"vega = require('vega')","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"embed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"# SCRATCH PAD TO DELETE","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"// grid = html`\n//

\n//

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"embed({\n 'data': {\n 'values': data.filter(x => (x.states === statesFilter))\n },\n // \"width\": 440,\n // \"height\": 100,\n \"transform\":[{\n \"density\": \"firearm_death_rates\",\n \"bandwidth\": 0.3\n }],\n \"mark\": \"area\",\n \"encoding\": {\n \"x\": {\n \"field\": \"value\",\n \"title\": \"Firearm Death Rates\",\n \"type\": \"quantitative\"\n },\n \"y\": {\n \"field\": \"density\",\n \"type\": \"quantitative\", \n \"title\": 'Density'\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"vl\n .markArea()\n .data(data.filter(x => (x.states === statesFilter)))\n .transform(vl.density('firearm_death_rates').bandwidth(0.3))\n .encode(\n vl\n .x()\n .fieldQ('value')\n .title('Firearm Death Rate'),\n vl\n .y()\n .fieldQ('density')\n .title('Density')\n )\nv1.markRule({color: 'red'})\n .encoding( vl.x().fieldQ('value')) \n .title(\"Density of Firearm Death Rates\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"viewof density_plot = \n embed({\n \"title\": {\"text\": \"Density of Firearm Death Rate\"} ,\n 'data': {\n 'values': data.filter(x => (x.states === statesFilter))\n },\n \"width\": \"500\",\n \"height\": 400,\n \"transform\":[{\n \"density\": \"firearm_death_rates\",\n \"bandwidth\": 0.3\n }],\n \"mark\": \"area\",\n \"encoding\": {\n \"x\": {\n \"field\": \"value\",\n \"title\": \"Firearm Death Rates\",\n \"type\": \"quantitative\"\n },\n \"y\": {\n \"field\": \"density\",\n \"type\": \"quantitative\", \n \"title\": 'Density'\n }, \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"// embed({\n// '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',\n// 'data': {\n// 'values': data_hmap.filter(x => (x.year === i))\n// },\n// 'height': 800,\n// 'width': 800,\n// 'autosize': \"fit\", \n// 'mark': 'rect',\n// 'encoding': {\n// 'y': {\n// 'field': 'US States',\n// 'type': 'ordinal',\n// },\n// 'x': {\n// 'field': 'Urbanization Categories',\n// 'type': 'ordinal',\n// },\n// 'color': {\n// 'field': 'count',\n// 'aggregate': 'sum',\n// 'type': 'quantitative'\n// }\n// }\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"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"}],"files":"$W32","stdlib":"1","titling":"auto"}