43:["$","title",null,{"children":"Data Visualizations Mini-Project: | joffreycodes | Observable"}] 4b:T6c6,Recently, various types of violence have been dominating national news headlines and most concerning is youth-related deaths due to [gun-violence](https://news.yahoo.com/record-high-gun-violence-sweeps-141731563.html?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuYmluZy5jb20v&guce_referrer_sig=AQAAAFAubWA9ELBHN3qTC_i_570QjGE6HvvlOaQKkP-TyG66Pv4T6A8KXkEgejqJ2aEdjRM4y83iHITU-gATmOD_oddEwjTlaDlcPQLnt5SxoN8TyL5dSJ4DC_wuLrjPM8MrLFD3CvzCVRCVpsPTaxp1ufjztsYZgFOgTSY-n_-EMmhe). HealthyPeople2030 has developed a potential objective to ["Reduce the proportion of public schools with a serious violent incident"](https://health.gov/healthypeople/objectives-and-data/browse-objectives/adolescents/reduce-proportion-public-schools-serious-violent-incident-ah-d03) and is currently under developmental status, meaning it is a "high-priority public health issue that has evidence-based interventions to address it, but doesn’t yet have reliable baseline data". To coincide with this effort, my goal will be to visualize how school violence is a public health problem that needs to be better understood. I have identified [noschoolviolence.org](https://www.noschoolviolence.org/) as a stakeholder and more specifically aid in their Apollo Project research effort. >[The Apollo Project](https://www.noschoolviolence.org/programs-impact) identifies hundreds of disconnected school violence databases, assesses their value, mines their content, and downloads them into a new national database whose unique structure provides new insights into the causes of school violence, identifies the best interventions for specific types of violence, and offers users a highly individualized tool platform for meeting the unique needs of a unique child. 4c:[{"id":"4777555b8f84b706e130da79f12310f8f7942cc2a26d5fe9111b0b973a918eff9153bbd2bf34fea278a6689285d68b00d28251229b09c6a795d165e7e897b0ee","href":"https://static.observableusercontent.com/files/4777555b8f84b706e130da79f12310f8f7942cc2a26d5fe9111b0b973a918eff9153bbd2bf34fea278a6689285d68b00d28251229b09c6a795d165e7e897b0ee","name":"pah_wikp_combo@1.csv","type":"text/csv","lastModified":1634701867735.123,"size":124746},{"id":"768db4f44f9dd28da654ca02492c7ec7db3fb704d5a03d96e75fc13e4f4f51435c989d55c8fee6dd990da7e97ba8d6ad2229a487e9d39f8e717cfac8fa5cf984","href":"https://static.observableusercontent.com/files/768db4f44f9dd28da654ca02492c7ec7db3fb704d5a03d96e75fc13e4f4f51435c989d55c8fee6dd990da7e97ba8d6ad2229a487e9d39f8e717cfac8fa5cf984","name":"us_cities.csv","type":"text/csv","lastModified":1634701867735.123,"size":1750091}] 47:{"id":"df93ba1c66bf394a","slug":"school-shootings-us-1990-present","title":"Data Visualizations Mini-Project:","thumbnail":"129f7417a81e189c4ff4ed9e2d2801d1e1b6eab7485a22a66b1dbab765957a42","access_level":"public","create_time":"$D2021-10-20T03:51:07.735Z","update_time":"$D2021-11-24T00:36:57.146Z","view_time":null,"first_public_time":"$D2021-10-20T18:16:06.136Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f9892825073e583b","login":"joffreycodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3daa83fe1a1a6ddc1321466109b203411d300f9eb047199eabc07754c3e37be","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1558,"publish_version":1558,"role":null,"authored":false,"authors":[{"type":"individual","id":"296a7098bf6416f0","login":"joffreycodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3daa83fe1a1a6ddc1321466109b203411d300f9eb047199eabc07754c3e37be","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"296a7098bf6416f0","login":"joffreycodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a3daa83fe1a1a6ddc1321466109b203411d300f9eb047199eabc07754c3e37be","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualizations Mini-Project:","cells":[{"id":0,"value":"# Data Visualizations Mini-Project: \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"# Part One: Visualizing Trends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"Among many types of school related violence, school shootings are a top concern. Here we explore data concerning school shootings in the US dated from the 1990s to the present by taking a look at state frequency, month frequency, and school setting to analyze for common trends that may be present. For interactivity, we implement this view model dashboard with an interactive date slider to visualize our data in a segmented fashion, accordingly to the users preference. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"### Date Range:
${dateFilter.range[0].toDateString()} - ${dateFilter.range[1].toDateString()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"grid = html`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof table = Inputs.table(joinedData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"## Changes To be Made","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"### Visualizing Relative frequencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"*via pie chart...*\n---\nBar charts are a great way to visualize the frequency or number of instances, but does not necessarily demonstrate comparative values. Instead, we can create pie charts to show relative frequencies in our trends. We demonstrate this using the type of schools attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"## Other Types of School-Violence","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"import {PieChart} from \"@d3/pie-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"# Part Two: Correlations ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"

Future Works:

\n1. Visualize potential correlates via [scatterplot](https://observablehq.com/@d3/brushable-scatterplot-matrix), heatmap, etc\n * Weather Patterns\n * Community Patterns\n * Household median income\n * Single Mothers & <$40k income\n * Demographics\n * [US Census](https://observablehq.com/@mbostock/working-with-the-census-api)\n * Accessibility \n * Guns/Gun Clubs\n * Clothing Stores\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"import {swatches as Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"import {topojson, d3, us, path, projection} from '@d3/u-s-state-capitals'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"import {Tooltip, margin} from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"

Cell A - DateSlider","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"viewof dateFilter = rangeSlider(data, d=>d.Date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"cellA.embed(viewof dateFilter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"

Cell B - Map

Cell C - School Type","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof schoolType = Plot.plot({\n width:1200,\n x: {\n domain: d3.groupSort(joinedData, g => -g.length, d => d.School),\n label: \"\",\n },\n y: {\n grid: true,\n },\n\n marks: [\n Plot.barY(joinedData, Plot.groupX({y: \"count\"}, {x: d => d.School, fill:d=> d.School})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"cellC.embed(viewof schoolType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"

Cell D - Frequency By Month","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"viewof monthChart = Plot.plot({\n width:1200,\n x: {\n domain: abrMonth\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(sortByMonth, Plot.groupX({y: \"count\"}, {x: sortByMonth, fill:\"orange\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"abrMonth=[\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"sortByMonth = {\n var monthFormatter = d3.timeFormat(\"%b\");\n return joinedData.map(d=> monthFormatter(new Date(d.Date)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"cellD.embed(viewof monthChart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"cellD = new Cell(grid.querySelector(\"[name=d]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"

Cell E - Frequency By State","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof stateChart = Plot.plot({\n width:1200,\n x: {\n domain: d3.groupSort(joinedData, g => -g.length, d => d.State).slice(0,10),\n label:\"\",\n },\n y: {\n grid: true,\n step: 1\n },\n marks: [\n Plot.barY(joinedData, Plot.groupX({y: \"count\"}, {x: \"State\", fill:\"red\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"cellE.embed(viewof stateChart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"cellE = new Cell(grid.querySelector(\"[name=e]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"

Defining Cells In Dashboard

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"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 = \"95%\";\n content.style.height = \"100%\";\n if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);\n else this.element.appendChild(content);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"html`