2b:null 2c:["$","title",null,{"children":"Colors Represent Shooter Outcome | Lily He | Observable"}] 31:T164d,function rightSideRaceOutcomes() { return html`

White American

43%

Black American

10%

Asian American

46%

Other

Unknown

46%

`};32:T163a,function rightSideAgeOutcomes() { return html`

Youth

43%

Young Adult

10%

Adult

46%

Senior

Unknown

46%

`};33:T1662,function rightSideLocationOutcomes() { return html`

Residency

43%

Schooling

10%

Recreation

46%

Business, employment, or government

Unknown

46%

`};34:T4b4,function displayLegendRace() { return html`

White American or European American

Black American or African American

Unknown

Asian

`};35:T47d,function displayLegendAge() { return html`

Young Adult

Youth

Adult

Senior

`};36:T4b7,function displayLegendLocation() { return html `

Place of schooling

Unknown

Place of business/employment/government

Place of recreation

`};37:T4af,function displayLegendOutcome() { return html `

Deceased

Custody

Escaped

Unknown

`};38:T66b,drawPoints = regl({ vert: ` precision mediump float; attribute float speed, x, y0, y1, dy; attribute float isB; varying float c; uniform float interp; void main() { float t = mod(x + interp*speed, 1.0); // cubic ease float ct = t < 0.5 ? 4.0 * t * t * t : -0.5 * pow(abs(2.0 * t - 2.0), 3.0) + 1.0; float x = mix(-1.0, 1.0, t); float y = mix(y0, y1, ct); gl_Position = vec4(x, y + dy, 0, 1); gl_PointSize = 15.0; c = isB; }`, frag: ` precision mediump float; varying float c; void main() { vec4 color0 = vec4(.400, .761, .647, 1); vec4 color1 = vec4(.553, .627, .796, 1); vec4 color2 = vec4(.988, .553, .384, 1); vec4 color3 = vec4(.906, .541, .765, 1); vec4 color4 = vec4(.651, .847, .329, 1); vec4 color5 = vec4(1.00, .851, .184, 1); vec4 color6 = vec4(.898, .769, .580, 1); if (c == 0.0) { gl_FragColor = color0; } else if (c == 1.0) { gl_FragColor = color1; } else if (c == 2.0) { gl_FragColor = color2; } else if (c == 3.0) { gl_FragColor = color3; } else { gl_FragColor = color4; } }`, attributes: { speed: data.map(d => d.speed), x: data.map(d => d.x), y0: data.map(d => d.y0), y1: data.map(d => d.y1), dy: data.map(d => d.dy), isB: data.map(d => d.isB) }, uniforms: { interp: (ctx, props) => props.interp }, primitive: 'point', count }) 39:[] 2f:{"id":"a08d52d6a21e8039","slug":"colors-represent-shooter-outcome","title":"Colors Represent Shooter Outcome","thumbnail":"7e78a8b36b2f043c2c4c3b5de6837a802bc8ef5105836340ef00595485480379","access_level":"public","create_time":"$D2019-03-24T17:29:35.126Z","update_time":"$D2019-03-24T18:47:51.134Z","view_time":null,"first_public_time":"$D2019-03-24T18:38:03.943Z","fork":{"id":"03028e2385580c1d","slug":"sjps-newest-sankey-diagram","title":"Colors Represent Shooter Outcome (testing outcome selection)","owner":{"id":"9a2111b13add7980","login":"by2225","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"cd94045f8c13702c","login":"tigerlily-he","name":"Lily He","avatar_url":"https://avatars-next.observableusercontent.com/87f80d7cab2515941f5bad305c3fa31547e2d21248e323f89efc464dcda31e18","tier":"starter_2024"},"version":1718,"publish_version":1718,"role":null,"authored":false,"authors":[{"type":"individual","id":"56d92c607dc7d79c","login":"tigerlily-he","name":"Lily He","avatar_url":"https://avatars-next.observableusercontent.com/87f80d7cab2515941f5bad305c3fa31547e2d21248e323f89efc464dcda31e18","tier":null}],"members":[{"type":"individual","id":"56d92c607dc7d79c","login":"tigerlily-he","name":"Lily He","avatar_url":"https://avatars-next.observableusercontent.com/87f80d7cab2515941f5bad305c3fa31547e2d21248e323f89efc464dcda31e18","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colors Represent Shooter Outcome","cells":[{"id":0,"value":"md`# Colors Represent Shooter Outcome`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof left_attribute_selection = {\n const form = html`

${Object.assign(html``, {value: \"Age Group\"})} left attribute`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"viewof regl = createDiagram() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"function createDiagram(){\n // Dropdown menu change view: Race, Age Group, Relationship to Incident Location\n left_attribute_selection;\n \n const container = html`

`;\n let canvas = DOM.canvas(800, 500);\n \n container.appendChild(canvas);\n container.value = wrapREGL({\n canvas: canvas, \n });\n\n const legend= displayLegend_toggle();\n container.appendChild(legend);\n \n const labels = rightSideLabels_toggle();\n container.appendChild(labels);\n /* Functions for labels\n shooterRaceCategory()\n relationShipIncidentCategory()\n ageGroupCategory\n */\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"md`# Toggle this to true or false to change the left side input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"left_side_one_source = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"//What's this code???\n// code for drawing onto canvas\n// DO NOT DELETE\n{\n window.regltick = regl.frame(({ time }) => {\n drawPoints({ interp: time / 5 })\n })\n \n}\n\n// {\n// window.regltick = regl.frame(({ time }) => {\n// final_draw({ interp: time / 5 })\n// })\n \n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"md `# Label Function Calls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"md `### Function called within createDiagram to display the Right Side Labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"function rightSideLabels_toggle() {if (left_attribute_selection == \"Shooter Race\") {\n return rightSideRaceOutcomes()\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return rightSideLocationOutcomes()\n} else if (left_attribute_selection == \"Age Group\") {\n return rightSideAgeOutcomes()\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"md `### Function called within CreateDiagram to display the Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"function displayLegend_toggle() {\n return displayLegendOutcome()\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"md`# Playing with Canvas!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"viewof canvas = html`\n

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md `# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"//// The default method exposed by the module wraps a canvas element\nwrapREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// our_data = d3.csv(\"https://raw.githubusercontent.com/tigerlily-he/W4995-06-A4/master/msa.csv\", d3.autoType)\nour_data = d3.csv(\"https://raw.githubusercontent.com/tigerlily-he/W4995-06-A4/master/msa.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md `# Column Fields`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"possible_attributes = [\"Shooter Race\", \"Relationship to Incident Location\", \"Age Group\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"left_attribute_col_name = left_attribute_selection\n// left_attribute_col_name = \"Relationship to Incident Location\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"// left_attribute = relationship_to_location\n\nleft_attribute = {if (left_attribute_selection == \"Shooter Race\") {\n return races\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return relationship_to_location\n} else if (left_attribute_selection == \"Age Group\") {\n return age_groups\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"// races = [...new Set(our_data.map(item => item[\"Shooter Race\"]))];\nraces = [\"Unknown\", \"Other\", \"Asian American\", \"Black American or African American\",\"White American or European American\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"// relationship_to_location = [...new Set(our_data.map(item => item[\"Relationship to Incident Location\"]))];\nrelationship_to_location = [\"Unknown\", \"Place of business/employment/government\", \"Place of recreation\", \"Place of schooling\", \"Place of residency\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"// age_groups = [...new Set(our_data.map(item => item[\"Age Group\"]))];\nage_groups = [\"Unknown\", \"Senior\", \"Adult\", \"Young Adult\", \"Youth\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md `# Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"firstDataToken = our_data[0]['Date'].split('/')\n/*year, month, day*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"lastDataToken = our_data[our_data.length - 1]['Date'].split('/')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"timeScale = d3.scaleTime().domain([new Date(firstDataToken[2], firstDataToken[0] - 1, firstDataToken[1] + 1), new Date (lastDataToken[2], lastDataToken[0] - 1, lastDataToken[1] )]).range([0, 11])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// outcomes = [...new Set(our_data.map(item => item[\"Fate of Shooter\"]))];\noutcomes = [\"\", \"Custody\", \"Escaped\", \"Deceased\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"count = our_data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"left_height_scale_range = {\nif (left_side_one_source == true) {\n return [-.8]\n} else \n{if (left_attribute_selection == \"Shooter Race\") {\n return [-.8, -.4, 0, .4, .8]\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return [-.8, -.4, 0, .4, .8]\n} else if (left_attribute_selection == \"Age Group\") {\n return [-.8, -.4, 0, .4, .8]\n}\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"// left_height_scale_range = [-.8]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"leftHeightScale = d3.scaleOrdinal()\n .domain(left_attribute)\n .range(left_height_scale_range)\n\n// leftHeightScale = d3.scaleOrdinal()\n// .domain(races)\n// .range([ 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"rightHeightScale = {\nif (left_attribute_selection == \"Shooter Race\") {\n return d3.scaleOrdinal()\n .domain(races)\n .range([-.95, -.6, -0.1, .3, .8])\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return d3.scaleOrdinal()\n .domain(relationship_to_location)\n .range([-.95, -.6, -0.1, .3, .8])\n} else if (left_attribute_selection == \"Age Group\") {\n return d3.scaleOrdinal()\n .domain(age_groups)\n .range([-.95, -.6, -0.1, .3, .8])\n}\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md `# Convert data to moving points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"// dy_height = {\n// if (left_side_one_source == true) {\n// return .3\n// } else {\n// return .15\n// }\n \n// }\n\ndy_height = .2\n// dy_height = .3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = our_data.map( i => {\n var isB = outcomes.indexOf(i['Fate of Shooter']);\n console.log(i['Fate of Shooter'] + \" \" + isB)\n return {\n speed: .65,\n x: 1- (i['CaseID']/335),\n y0: leftHeightScale(i[left_attribute_col_name]),\n y1: rightHeightScale(i[left_attribute_selection]),\n dy: Math.random() * dy_height,\n isB\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"Math.random()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md `# Draw Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"// function final_draw (t) {\n// gl2.regl.clear({})\n// drawPoints({ interp: now / 5 })\n// }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"// function createGL (opts) {\n// var canvas = html`