31:T413,md` ## How ? The idiom used for this visualization is a type of network graph called **Force Directed Graph**. - **Encode->Arrange->Separate:** D3 forces are used to separate and connect the nodes. Firstly, the 'link' force is used to connect related nodes. Secondly, a 'charge' force is used to separate unrelated (unlinked) nodes. Finally, a 'center' force makes the visualization stay centered in the viewbox. - **Encode->Map->Hue:** The resulting clustering categories are indicated using categorical hues. - **Manipulate->Select:** A tooltip creates a highlight of the chosen node and all its direct neighours including their node names. - **Manipulate->Change:** A drag simulation allows the user to move nodes and clusters around the viewbox to avoid **occlusion**. Also, the nodes have been forced to stay in the viewbox to prevent loss of information in case they might leave the viewbox due to 'charge' forces. - **Encode->Map->Motion:** A simulation when loading or changing the visualization highlights bonds between data. `32:Ta82,function drawChart() { const links = data.links.map(d => Object.create(d)) const nodes = data.nodes.map(d => Object.create(d)) const radius = 7; var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody().strength(-15)) .force("center", d3.forceCenter(width/2, height/2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const link = svg.append("g") .attr("stroke", "#aaa") .attr("stroke-opacity", 0.3) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value) / 2); const node = svg.append("g") .attr("stroke", "#000") .selectAll("circle") .data(nodes) .join("circle") .attr("r", radius) .attr("fill", color) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)); const textElems = svg.append('g') .selectAll('text') .data(nodes) .join('text') .text(d => d.name) .attr('font-size',10) .attr('font-size',10) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", function(d) { return d.x = Math.max((radius+1), Math.min(width - (radius+1), d.x)); }) .attr("cy", function(d) { return d.y = Math.max((radius+1), Math.min(height - (radius+1), d.y)); }); textElems .attr("x", d => d.x + 10) .attr("y", d => d.y) .attr("visibility", "hidden"); }); function fade(opacity) { return d => { node.style('opacity', function (o) { return isConnected(d, o) ? 1 : opacity }); textElems.style('visibility', function (o) { return isConnected(d, o) ? "visible" : "hidden" }); link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity)); if(opacity === 1){ node.style('opacity', 1) textElems.style('visibility', 'hidden') link.style('stroke-opacity', 0.3) } }; } const linkedByIndex = {}; links.forEach(d => { linkedByIndex[`${d.source.index},${d.target.index}`] = 1; }); function isConnected(a, b) { return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index; } invalidation.then(() => simulation.stop()); return svg.node() }33:T450,md`## MIT License ### Copyright (c) 2019 Philipp Freiherr von Ulm-Erbach.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.`34:[] 2f:{"title":"Network of Stack Overflow Tags","cells":[{"id":0,"value":"md`# Network of Stack Overflow Tags\n\n**Homework 5** - ISIS 4822: Visual Analytics\n\n**Philipp Freiherr von Ulm-Erbach**, p.freiherr@uniandes.edu.co`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`## Context\n\nIn order to be able to find out which technology ecosystems are related to each other, a data team of Stack Overflow has analyzed the frequency of related appearance of technology tags in their Developer Stories (Stack Overflows professional profiles).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md `## Visualization: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html ` \n

Stack Overflow Tag Network

Network of Stack Overflow tags based on their use in Developer Stories

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"drawChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"html `\n

\n By: Philipp Ulm-Erbach\n
\n Source: Stack Overflow - Kaggle\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md `## Analysis of Visualization based on Munzer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md` ## What ?\n\nThe data used for this assignment was taken from [Kaggle](https://www.kaggle.com/stackoverflow/stack-overflow-tag-network/data).\n\nThe data in JSON format can be found [here](https://gist.githubusercontent.com/philipp-ulm/8aac32439e2fb92a3dad3da443f692e8/raw/93710da0594c0344a9d1f55bcbdfd67782946b96/stack-overflow-network.json).\nThis dataset has the following structure:\n \n**Dataset Type: Network** format containing nodes, links and attributes\n\n**Static availability**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const table = html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Attribute	Type of Attribute	Ordering direction
Links.source	Categorical	-
Links.target	Categorical	-
Links.value	Ordered Quantitative	Sequential
Node.name	Categorical	-
Node.group	Categorical	-

\n
`;\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md` ## Why ?\n### Tarea Principal:\n**T1:** Explore how technological ecosystems are related to each other **{Explore, Topology}**\n\n### Tareas Secundarias:\n**T2:** Locate the relationship between different technologies **{Locate, Paths}**\n\n**T3:** Visualize the membership of a technology to a specific group or cluster of related technologies **{Locate, Clusters}**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md `## Example Insights\n\n- Darker green area represents a tech ecosystem closely related to web development, including for example JS, CSS, HTML, PHP and similar.\n\n- Nodes like 'java' create a bridge between different clusters. In this example it is linked to its own group containing java-related fields such as maven, eclipse or jsp (java server pages), but also to other categories such as operating systems (pink) or other object orientated programming languages (light green)\n\n- Tag groups such as [excel,vba] or [agile, tdd (test driven design)] are not often used in combination with other tags in Stack Overflows professional profiles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md `## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md `#### Network Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md `#### Drag Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md `#### Color Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeSet2);\n return d => scale(d.group)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md `#### Data Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = d3.json(\"https://gist.githubusercontent.com/philipp-ulm/8aac32439e2fb92a3dad3da443f692e8/raw/93710da0594c0344a9d1f55bcbdfd67782946b96/stack-overflow-network.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"md `#### D3 Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md `## Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md `This visualization is based on the ideas and code of the following works of the following academics:\n\nM. Bostock: [Force Directed Graph](https://observablehq.com/@d3/force-directed-graph)\n\nA. Suarez: [Layout Highlights](https://bl.ocks.org/almsuarez/4333a12d2531d6c1f6f22b74f2c57102)\n\nT. Roth: [Bounding Box](https://tomroth.com.au/fdg-bounding-box/)\n\nAll Stack Overflow user contributions are licensed under CC-BY-SA 3.0 with attribution required.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}