2f:null 30:["$","title",null,{"children":"Visualizing Connections Between Skateboard Tricks | Alex Gao | Observable"}] 35:T9e7,md` ## Data The dataset was constructed from my knowledge, and is far from comprehensive. The list of skateboarding tricks is incredibly large, and nobody has formally catalogued all their connections and influences. It is fundamentally represented by a directed graph in which different tricks form "building blocks" for others. ## Innovations with the code - **Vertical Layout:** Nodes are arranged vertically instead of horizontally - **Coloring based on a legend:** Coloring is added to each node to reflect the approximate difficulty of the trick. The nodes are grouped and organized based on difficulty. - **Direction of Arcs:** The arcs/connections are directed (e.g. a kickflip depends ON an ollie, but is a dependency FOR a tre flip). The highlighting follows this convention. - **Highlighting:** Highlighting is activated when hovering over either a node or its corresponding label. Not only are the nodes and the connected arcs highlighted, the arcs are highlighted with different colors depending on the "direction" of the connection. The label is also bolded, and there is extra shading to make the selected node/highlighted nodes and arcs stand out. - **Show trick details upon hover:** Hovering over a node or a label not only activates highlighting but also displays more details about the selected trick. This also automatically counts the number of arcs in one direction or another and displays that in the text. - **Size of Nodes**: The size of each node corresponds to the number of tricks that the selected trick is a foundation for. The larger the size of the node, the greater the number of tricks that depend on it is. ## Code changes - Picked a yscale function and used it to set y-axis location of nodes, labels, arcs, images etc. - Added coloring function for nodes - Changed font size and font family of text - Added code to display text on hover - Added code to highlight arcs differently based on relationship between nodes - Changed size of nodes based on number of connections - Added additional highlighting of labels and nodes for readability. ## What I wanted to do but couldn't I wanted to expand the dataset to include tricks on obstacles and ramps, and thus have an extra categorical "feature" to represent the differences between these different genres of skateboarding. However, I did not have the time to compile a large enough dataset from scratch. I wish I could have more gifs/images as well, since for a niche topic, it is important to present the information in many types of ways. `36:T1969,justNodesAndLabels = { const radius = 10 const node_offset = 100 const y_offset = 10 // create a container for the svg; use standard margin notation const container = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom)) const arcGroup = container .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") const imageGroup = container .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") imageGroup.append('text') .text("Tricks organized by difficulty from top to bottom, on a scale from 0 (easiest) to 6 (hardest).") .attr("fill", "darkgrey") .style("text-anchor", "start") .style("font-size", "12px") .style("font-family", "Source Sans Pro") .attr("x", margin.left + 300) .attr("y", margin.top) const nodes = arcGroup.selectAll("nodes") .data(graphData) .enter().append("circle") .attr("cx",node_offset) .attr("cy", d => yScale(d.name) +5 + y_offset) .attr("r", d => d.part_of.length/4 + 4) .attr("fill", d => color(d.difficulty)) .attr("opacity", 0.5) .attr("id", d => d.id) const nodeLabels = arcGroup.selectAll("nodeLabels") .data(graphData) .enter().append("text") .attr("x", node_offset-20) .attr("y", d => yScale(d.name)+5 + y_offset) .attr("fill", "darkgrey") .style("text-anchor", "end") .style("font-size", "11px") .style("alignment-baseline","central") .text(d => d.name) // This code builds up the SVG path element; see nodesAndArcs for details function buildArc(d) { let start = yScale(idTrickHashmap[d.source])+5 + y_offset; let end = yScale(idTrickHashmap[d.target])+5 + y_offset; const arcPath = ['M', node_offset, start, 'A', (start - end)/8, ',', (start-end)/4.2, 0,0,",", start < end ? 1: 0, node_offset, end].join(' '); return arcPath; } // create the arcs const arcsPartOf = arcGroup.selectAll("arcsPartOf") .data(linksPartOf) .enter().append("path") .style("fill", "none") .attr("stroke", "darkgrey") .attr("opacity", 0.5) .attr("d", d => buildArc(d)) // Now, rules for highlighting. nodeLabels.on('mouseenter', function(event, d) { // Show info imageGroup.append('text') .text(d.name) .attr("fill", "black") .style("text-anchor", "start") .style("font-size", "22px") .style("font-family", "Source Sans Pro") .attr("x", node_offset + 300) .attr("y", (yScale(d.name) > 1300)? 1300 : ((yScale(d.name) < 80)? 80 : yScale(d.name))) .attr("id", "txttitle" + d.id) .style("font-weight","bold") // Show difficulty level imageGroup.append('text') .text("Difficulty: " + d.difficulty.toString() + " on a scale from 0-6.") .attr("fill", "black") .style("text-anchor", "start") .style("font-size", "12px") .style("font-family", "Source Sans Pro") .attr("x", node_offset + 300) .attr("y", (yScale(d.name) > 1300)? 1300+30 : ((yScale(d.name) < 80)? 80+30 : yScale(d.name)+30)) .attr("id", "txtcomment" + d.id) imageGroup.append('text') .text(d.depends_on.length + " tricks are required to learn this one (" + d.depends_on.join(', ') + ")") .attr("fill", "black") .style("text-anchor", "start") .style("font-size", "12px") .style("font-family", "Source Sans Pro") .attr("x", node_offset + 300) .attr("y", (yScale(d.name) > 1300)? 1300+45 : ((yScale(d.name) < 80)? 80+45 : yScale(d.name)+45)) .attr("id", "txtreq1" + d.id) imageGroup.append('text') .text(d.part_of.length + " tricks depend on the ability to do this trick (" + d.part_of.join(', ') + ")") .attr("fill", "black") .style("text-anchor", "start") .style("font-size", "12px") .style("font-family", "Source Sans Pro") .attr("x", node_offset + 300) .attr("y", (yScale(d.name) > 1300)? 1300+60 : ((yScale(d.name) < 80)? 80+60 : yScale(d.name)+60)) .attr("id", "txtreq2" + d.id) // do necessary highlighting: // Highlight target labels nodeLabels.style('fill', function (nodelabel_d) { if (d.depends_on.includes(nodelabel_d.name)) { return 'green'; } else if (d.part_of.includes(nodelabel_d.name)){ return 'red'; } else { return 'darkgray'; }}) // Highlight the selected label d3.select(this).style("font-weight", "bold"); // Highlight node nodes.style('fill', function (nodelabel_d) { if (d.depends_on.includes(nodelabel_d.name)) { return 'green'; } else if (d.part_of.includes(nodelabel_d.name)){ return 'red'; } else { return 'darkgray'; } }).style('opacity', function(node_label_d) { if (d.depends_on.includes(node_label_d.name) || d.part_of.includes(node_label_d.name)) { return 1.0; } else { return 0.5; } }) arcsPartOf .style('stroke', function (arcd) { if ( (arcd.source == trickIdHashmap[d.name])) {return 'red'} else if (arcd.target == trickIdHashmap[d.name]) {return 'green'} else {return 'lightgrey'}}) .style('stroke-width', function (arcd) { return arcd.source == trickIdHashmap[d.name] || arcd.target == trickIdHashmap[d.name] ? 3 : 1;}) .style("opacity", function (arcd) { return arcd.source == trickIdHashmap[d.name] || arcd.target == trickIdHashmap[d.name] ? 1 : 0.15;}) }) nodeLabels.on('mouseout', function(event, d) { nodes.style("fill", d => color(d.difficulty)) .style("opacity", 0.5); arcsPartOf.style("fill", "none") .style("stroke", "darkgrey") .style("opacity", 0.5); nodeLabels.style("fill", "darkgrey").style('font-weight',400); let toRemove = "#" + "txttitle" + d.id d3.select(toRemove).remove(); toRemove = "#" + "txtcomment" + d.id d3.select(toRemove).remove(); toRemove = "#" + "txtreq1" + d.id d3.select(toRemove).remove(); toRemove = "#" + "txtreq2" + d.id d3.select(toRemove).remove(); }) return container.node(); }37:[{"id":"a640b9d19960676861c5dae5c3bb9c81a56d5e37974784d70bdcf93fa07c2aeec5d0d1266a103cc398e64b2d063e5524581c769ddc76649389231c770990eed1","href":"https://static.observableusercontent.com/files/a640b9d19960676861c5dae5c3bb9c81a56d5e37974784d70bdcf93fa07c2aeec5d0d1266a103cc398e64b2d063e5524581c769ddc76649389231c770990eed1","name":"sk8tricks.json","type":"application/json","lastModified":1619396570774.934,"size":8605}] 33:{"id":"6782172008cf3fb0","slug":"visualizing-connections-between-skateboard-tricks","title":"Visualizing Connections Between Skateboard Tricks","thumbnail":"e3c5e2d036f0f251cf8e88501e0fa30546bc2a16326493cfc4ac69e3c4e7d06d","access_level":"public","create_time":"$D2021-04-26T00:04:34.869Z","update_time":"$D2021-04-26T04:24:58.721Z","view_time":null,"first_public_time":"$D2021-04-26T04:25:04.444Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4fc620a5b127aecd","login":"gaoag","name":"Alex Gao","avatar_url":"https://avatars-next.observableusercontent.com/aa2fd03f0de732fed3de5ad0e93498b2fd9515310f6af88304897ff04d4e0f95","tier":"starter_2024"},"version":213,"publish_version":213,"role":null,"authored":false,"authors":[{"type":"individual","id":"86e00f8658a5717b","login":"gaoag","name":"Alex Gao","avatar_url":"https://avatars-next.observableusercontent.com/aa2fd03f0de732fed3de5ad0e93498b2fd9515310f6af88304897ff04d4e0f95","tier":null}],"members":[{"type":"individual","id":"86e00f8658a5717b","login":"gaoag","name":"Alex Gao","avatar_url":"https://avatars-next.observableusercontent.com/aa2fd03f0de732fed3de5ad0e93498b2fd9515310f6af88304897ff04d4e0f95","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizing Connections Between Skateboard Tricks","cells":[{"id":0,"value":"md`# Visualizing Connections Between Skateboard Tricks`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"graphDataUnsorted = FileAttachment(\"sk8tricks.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"graphData = graphDataUnsorted.sort((elem1, elem2) => elem1.difficulty - elem2.difficulty)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"trickNames = { let trickNames = [];\n for (let i = 0; i < graphData.length; i++) {\n trickNames.push(graphData[i]['name'])\n }\n return trickNames\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"trickIdHashmap = {let trickIdHashmap = new Map();\nfor (let i = 0; i < graphData.length; i++) {\n trickIdHashmap[graphData[i]['name']] = i;\n}\nreturn trickIdHashmap}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"idTrickHashmap = {let idTrickHashmap = new Map();\nfor (let i = 0; i < graphData.length; i++) {\n idTrickHashmap[i] = graphData[i]['name']\n}\nreturn idTrickHashmap}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"linksPartOf = {\n let links = [];\n for (let i = 0; i < graphData.length; i++) {\n let partOf = graphData[i]['part_of'].map(elem=>trickIdHashmap[elem]);\n for (let j = 0; j < partOf.length; j++) {\n links.push({'source':i, 'target':partOf[j]})\n }\n }\n return links\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"linksDependsOn = {\n let links = [];\n for (let i = 0; i < graphData.length; i++) {\n let dependsOn = graphData[i]['depends_on'].map(elem=>trickIdHashmap[elem]);\n for (let j = 0; j < dependsOn.length; j++) {\n links.push({'source':i, 'target':dependsOn[j]})\n }\n }\n return links\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margin = ({top: 20, bottom: 20, left: 30, right: 30});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 900 - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"width = 3000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"yScale = d3.scalePoint()\n .domain(trickNames)\n .range([0,height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`### Assign color based on difficulty\ncode adapted from `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = {\n return d3.scaleOrdinal(d3.schemeSet1).domain([0, 1, 2, 3, 4, 5, 6]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"yScale('ollie')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"