2b:null 2c:["$","title",null,{"children":"SJP's Newest Sankey Diagram (Width Legend and Label Toggle) | shawn herron | Observable"}] 31:T6a9,function rightSideLabels() { return html`

Awareness

43%

Research

10%

Consideration

46%

Purchase

`};32:T6af,function rightSideRaceOutcomes() { return html`

Awareness

23%

Research

60%

Consideration

26%

Purchase

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

Awareness

43%

Research

10%

Consideration

46%

Purchase

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

Awareness

43%

Research

10%

Consideration

46%

Purchase

`};35:T6ff,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(.988, .553, .384, 1); vec4 color2 = vec4(.553, .627, .796, 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 if (c == 4.0) { gl_FragColor = color4; } else if (c == 5.0) { gl_FragColor = color5; } else if (c == 6.0) { gl_FragColor = color6; } }`, 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 }) 36:[] 2f:{"id":"818a6cb268a1dbfb","slug":"sjps-newest-sankey-diagram-width-legend-and-label-toggle","title":"SJP's Newest Sankey Diagram (Width Legend and Label Toggle)","thumbnail":"fa0ba1e94ddb9f86896f9a0f3618f38a177b7847386004dff4c3eed2c1c7f2be","access_level":"public","create_time":"$D2021-01-21T18:41:25.691Z","update_time":"$D2021-01-21T21:25:17.280Z","view_time":null,"first_public_time":"$D2021-01-21T18:41:32.127Z","has_unpublished_edits":null,"fork":{"id":"ffe77c557b2245fd","slug":"sjps-newest-sankey-diagram","title":"SJP's Newest Sankey Diagram (Width Legend and Label Toggle)","owner":{"id":"cd9493bf31083c85","login":"sangjunp4rk","name":"Sang Jun Park"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d4344d97a94b76fb","login":"shawnherron","name":"shawn herron","avatar_url":"https://avatars-next.observableusercontent.com/46836de358904dcaa9c9dcb8358e90dd2ac39af77dc00922b3ef113b72350d5a","tier":"starter_2024"},"version":1502,"publish_version":1502,"role":null,"authored":false,"authors":[{"type":"individual","id":"062807ecc374d364","login":"shawnherron","name":"shawn herron","avatar_url":"https://avatars-next.observableusercontent.com/46836de358904dcaa9c9dcb8358e90dd2ac39af77dc00922b3ef113b72350d5a","tier":null}],"members":[{"type":"individual","id":"062807ecc374d364","login":"shawnherron","name":"shawn herron","avatar_url":"https://avatars-next.observableusercontent.com/46836de358904dcaa9c9dcb8358e90dd2ac39af77dc00922b3ef113b72350d5a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SJP's Newest Sankey Diagram (Width Legend and Label Toggle)","cells":[{"id":0,"value":"md`# SJP's Newest Sankey Diagram (Width Legend and Label Toggle)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"viewof regl = createDiagram() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"left_side_one_source = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"md `# Label Function Calls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"function displayLegend() { return html`\n

\n \n \n

`};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"function displayLegend_toggle() {if (left_attribute_selection == \"Shooter Race\") {\n return displayLegendAge()\n} else if (left_attribute_selection == \"Relationship to Incident Location\") {\n return displayLegendRace()\n} else if (left_attribute_selection == \"Age Group\") {\n return displayLegendLocation()\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"md`# Playing with Canvas!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"viewof canvas = html`\n

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md `# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md `# Column Fields`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"races = [...new Set(our_data.map(item => item[\"Shooter Race\"]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"relationship_to_location = [...new Set(our_data.map(item => item[\"Relationship to Incident Location\"]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"age_groups = [...new Set(our_data.map(item => item[\"Age Group\"]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md `# Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"count = our_data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"// left_height_scale_range = [-.8]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"rightHeightScale = d3.scaleOrdinal()\n .domain(outcomes)\n .range([ -.91, -.4, .09, .61])\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md `# Convert data to moving points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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\n// dy_height = .15\n// dy_height = .3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = our_data.map( i => {\n var isB = left_attribute.indexOf(i[left_attribute_col_name]);\n\n return {\n speed: .65,\n x: (1 - (i['CaseID']/335)),\n y0: leftHeightScale(i[left_attribute_col_name]),\n y1: rightHeightScale(i['Fate of Shooter']),\n dy: Math.random() * dy_height,\n outcome: i['Fate of Shooter'],\n isB\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"Math.random()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md `# Draw Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"// function createGL (opts) {\n// var canvas = html`