2c:null 2d:["$","title",null,{"children":"Colors Represent Shooter Outcome (testing outcome selection) | Sang Jun Park | Observable"}] 32:T1733,function rightSideRaceOutcomes() { return html`

White American

43%

54%

45%

Black American

27%

31%

65%

Asian American

53%

47%

Other

10%

50%

Unknown

15%

23%

14%

63%

`};33:T17fb,function rightSideAgeOutcomes() { return html`

Youth (< 18 years old)

11%

13%

87%

Young Adult (18 - 35 years old)

43%

45%

55%

Adult (35 - 55 years old)

30%

64%

35%

Senior (> 55 years old)

63%

37%

Unknown

11%

90%

`};34:T1758,function rightSideLocationOutcomes() { return html`

Residency

30%

60%

38%

Schooling

15%

31%

69%

Recreation

12%

27%

71%

Business, employment, or government

19%

65%

35%

Unknown

24%

19%

38%

42%

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

White American or European American

Black American or African American

Unknown

Asian

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

Young Adult

Youth

Adult

Senior

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

Place of schooling

Unknown

Place of business/employment/government

Place of recreation

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

Deceased

Custody

Escaped

Unknown

`};39:T71b,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); vec4 color7 = vec4(1.00, 1.00, 1.00, 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 if (c == 4.0) { gl_FragColor = color4; } else if (c == 10.0) { gl_FragColor = color7; } 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 }) 3a:[] 30:{"id":"447e355a1bcb81cd","slug":"colors-represent-shooter-outcome-testing-outcome-selecti","title":"Colors Represent Shooter Outcome (testing outcome selection)","thumbnail":"8727b2fd3fb6795ff8020562ff773aef1512a09b99696ac28780c52d3e6a8896","access_level":"public","create_time":"$D2019-03-25T01:02:23.472Z","update_time":"$D2019-03-25T02:25:53.004Z","view_time":null,"first_public_time":"$D2019-03-25T01:03:55.971Z","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":"cd9493bf31083c85","login":"sangjunp4rk","name":"Sang Jun Park","avatar_url":"https://avatars-next.observableusercontent.com/e5ae9ad58c7b6fe74a13334617dfbf0f39ad6f4d74a5a01148d52b8c04757cf9","tier":"starter_2024"},"version":1816,"publish_version":1816,"role":null,"authored":false,"authors":[{"type":"individual","id":"42cc192dc772c442","login":"sangjunp4rk","name":"Sang Jun Park","avatar_url":"https://avatars-next.observableusercontent.com/e5ae9ad58c7b6fe74a13334617dfbf0f39ad6f4d74a5a01148d52b8c04757cf9","tier":null}],"members":[{"type":"individual","id":"42cc192dc772c442","login":"sangjunp4rk","name":"Sang Jun Park","avatar_url":"https://avatars-next.observableusercontent.com/e5ae9ad58c7b6fe74a13334617dfbf0f39ad6f4d74a5a01148d52b8c04757cf9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colors Represent Shooter Outcome (testing outcome selection)","cells":[{"id":0,"value":"md`# Colors Represent Shooter Outcome (testing outcome selection)`","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\"})} Right 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":1795,"value":"viewof outcome_attribute_selection = {\n const form = html`${Object.assign(html``, {value: \"All\"})} Shooter Outcome Selection`;\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 outcome_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":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"$34","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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"$38","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":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":1797,"value":"shooter_outcomes_for_selection = [\"All\", \"Unknown\", \"Custody\", \"Escaped\", \"Deceased\"]","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":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([-1, -.55, -0.15, .27, .7])\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return d3.scaleOrdinal()\n .domain(relationship_to_location)\n .range([-1, -.55, -0.15, .27, .70])\n} else if (left_attribute_selection == \"Age Group\") {\n return d3.scaleOrdinal()\n .domain(age_groups)\n .range([-1, -.55, -0.15, .27, .70])\n // e([-.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":1785,"value":"outcome_selection = {if (outcome_attribute_selection == \"Unknown\") {\n return null\n} else {\n return outcome_attribute_selection\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = our_data.map( i => {\n if (i['Fate of Shooter'] == outcome_selection) {\n var isB = outcomes.indexOf(i['Fate of Shooter']);\n } else if (outcome_selection == \"All\") {\n var isB = outcomes.indexOf(i['Fate of Shooter']);\n } else {\n var isB = 10;\n }\n \n if (i['Fate of Shooter'] == outcome_selection) {\n var x_val = 1 - (i['CaseID']/335);\n } else if (outcome_selection == \"All\") {\n var x_val = 1 - (i['CaseID']/335);\n } else {\n var x_val = 0;\n }\n \n if (i['Fate of Shooter'] == outcome_selection) {\n var speed_val = .65;\n } else if (outcome_selection == \"All\") {\n var speed_val = .65;\n } else {\n var speed_val = 0;\n }\n // var isB = outcomes.indexOf(i['Fate of Shooter']);\n console.log(i['Fate of Shooter'] + \" \" + isB)\n return {\n speed: speed_val,\n x: x_val,\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":"$39","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`