2b:null 2c:["$","title",null,{"children":"assignment 6: CSS tag is the tag that is mostly used with other tags inside the web technology group and JavaScript is the tag that is mostly used with other technology groups based on stack overflow data. | LilyLi | Observable"}] 31:Te25,chart = { const arc = d => { const y1 = d.source.y; const y2 = d.target.y; const r = Math.abs(y2 - y1) / 2; return `M${130},${y1}A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${130},${y2}`; } const y= d3.scalePoint(graph.nodes.map(d => d.id).sort(d3.ascending), [20, 1100]) const nodeRadius = d3.scaleSqrt().range([3, 10]).domain(d3.extent(graph.nodes, d => d.nodesize)); const color = d3.scaleOrdinal(graph.nodes.map(d => d.group).sort(d3.ascending), d3.schemeSet2) const linkValue = d3.scaleSqrt().range([1, 4]).domain(d3.extent(graph.links, d => d.value)); const svg = d3.select(DOM.svg(width, 1200)); svg.append("style").text(` .hover path { stroke:white; } .hover text { fill: #ccc; } .hover g.primary text { fill: #FF0000; font-weight: bold; } .hover g.secondary text { fill: #333; } .hover path.primary { stroke: #FF0000; stroke-opacity: 1; } `); const label = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "end") .selectAll("g") .data(graph.nodes) .join("g") .attr("transform", d => `translate(${130},${d.y = y(d.id)})`) .call(g => g.append("text") .attr("x", -10) .attr("dy", "0.35em") .attr("fill", d => d3.lab(color(d.group)).darker(2)) .text(d => d.id)) .call(g => g.append("circle") .attr("r", d => nodeRadius(d.nodesize)) .attr("fill", d => color(d.group))); const path = svg.insert("g", "*") .attr("fill", "none") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .selectAll("path") .data(graph.links) .join("path") .attr("stroke", d => d.source.group === d.target.group ? color(d.source.group) : "#aaa") .attr("stroke-width", d => linkValue(d.value)) .attr("d", arc); const overlay = svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(graph.nodes) .join("rect") .attr("width", 170) .attr("height", 14) .attr("y", d => y(d.id) - 7) .on("mouseover", d => { svg.classed("hover", true); label.classed("primary", n => n === d); label.classed("secondary", n => n.sourceLinks.some(l => l.target === d) || n.targetLinks.some(l => l.source === d)); path.classed("primary", l => l.source === d || l.target === d).filter(".primary").raise(); }) .on("mouseout", d => { svg.classed("hover", false); label.classed("primary", false); label.classed("secondary", false); path.classed("primary", false).order(); }); const value = (a, b) => d3.sum(b.sourceLinks, l => l.value) + d3.sum(b.targetLinks, l => l.value) - d3.sum(a.sourceLinks, l => l.value) - d3.sum(a.targetLinks, l => l.value) || d3.ascending(a.id, b.id) function update() { y.domain(graph.nodes.sort(value // viewof order.value ).map(d => d.id)); const t = svg.transition() .duration(750); label.transition(t) .delay((d, i) => i * 20) .attrTween("transform", d => { const i = d3.interpolateNumber(d.y, y(d.id)); return t => `translate(${130},${d.y = i(t)})`; }); path.transition(t) .duration(750 + graph.nodes.length * 20) .attrTween("d", d => () => arc(d)); overlay.transition(t) .delay((d, i) => i * 20) .attr("y", d => y(d.id) - 7); } viewof order.addEventListener("input", update); invalidation.then(() => viewof order.removeEventListener("input", update)); return svg.node(); }32:Ta70,drawChart = { const links = data2.links.map(d => Object.create(d)) const nodes = data2.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, 400)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 800]) 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(800 - (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:T50f,## Two Made up insights(Hypothesis) 1. On stack overflow, most of technology and languages are connected to each by some middle nodes such as Java and Postgresql. But some technologies are isolated from others such as agile and scala. 2. CSS tag is the tag that is mostly used with other tags inside the web technology group and JavaScript is the tag that is mostly used with other technology groups based on stack overflow data. **Consideration for the insights** 1. For Insight 1: I need the dataset from stack overflow listing the connected technologies. then I need to create nodes for different technology and links for the connection between them. I also should use color to represent different group. After having this network graph, I can easily point out what technologies are isolated and what technologies are well connected to others. 2. For Insight 2: I need the dataset from stack overflow listing the connected technologies. then I need to create nodes for different technology and links for the connection between them. I also should use color to represent different group. This network graph should also be ordered by how many connections each node has, so that we can see the number of connections of each node. I select insight 2 for assignment 6.34:[{"id":"95c8de67d3e3c1d8d1e965c5d5c0a1d0f43e9ec21b932cf3f52fdcf47b1eb4e0865986d97d87ee958b62bcc10141c3dec64b244d7a47aa8dac34a1b8885c1168","href":"https://static.observableusercontent.com/files/95c8de67d3e3c1d8d1e965c5d5c0a1d0f43e9ec21b932cf3f52fdcf47b1eb4e0865986d97d87ee958b62bcc10141c3dec64b244d7a47aa8dac34a1b8885c1168","name":"stack_network_nodes.csv","type":"text/csv","lastModified":1679258779105.374,"size":1845},{"id":"ebd9ae71c5ab384aa2fc84caa6ac4441c7322ead424e27eb199c24c7c7a28b192d598335489fd1de05f0e8c4d84248dcde7d492621aad481aaa72e655e2ebdbf","href":"https://static.observableusercontent.com/files/ebd9ae71c5ab384aa2fc84caa6ac4441c7322ead424e27eb199c24c7c7a28b192d598335489fd1de05f0e8c4d84248dcde7d492621aad481aaa72e655e2ebdbf","name":"stack_network_links.csv","type":"text/csv","lastModified":1679258779113.509,"size":16490}] 2f:{"id":"938351cedcc843c3","slug":null,"title":"assignment 6: CSS tag is the tag that is mostly used with other tags inside the web technology group and JavaScript is the tag that is mostly used with other technology groups based on stack overflow data.","thumbnail":"6ce64b06633b0503d89e984630de7d5cf5199822682a3777f71068f405f57915","access_level":"public","create_time":"$D2023-03-17T06:49:38.385Z","update_time":"$D2023-03-22T20:59:08.057Z","view_time":null,"first_public_time":"$D2023-03-17T06:49:38.385Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"132517a03a3dd931","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":"starter_2024"},"version":540,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null}],"members":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"assignment 6: CSS tag is the tag that is mostly used with other tags inside the web technology group and JavaScript is the tag that is mostly used with other technology groups based on stack overflow data.","cells":[{"id":0,"value":"# assignment 6: CSS tag is the tag that is mostly used with other tags inside the web technology group and JavaScript is the tag that is mostly used with other technology groups based on stack overflow data.\n\nCreated by [Jiangyan Li](https://observablehq.com/@lilyneu?tab=profile)
\nClass: [Data Visualization / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\nTweet: [Link](https://twitter.com/neu7295/status/1637978318367608833)
\nYoutube: [Link](https://youtu.be/tERYXzxWJNA)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"For Anshul grading:
\n[Real Insight](https://observablehq.com/d/938351cedcc843c3#cell-0)
\n[Work description](https://observablehq.com/d/938351cedcc843c3#cell-291)
\n[Data Abstraction](https://observablehq.com/d/938351cedcc843c3#cell-300)
\n[Data Processing](https://observablehq.com/d/938351cedcc843c3#cell-51)
\n[Made-up insights (Hypothesis)](https://observablehq.com/d/938351cedcc843c3#cell-345)
\n[Task abstraction & Audience](https://observablehq.com/d/938351cedcc843c3#cell-397)
\n[How abstraction](https://observablehq.com/d/938351cedcc843c3#cell-400)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## Introduction\n\nStack Overflow is a popular online community for programmers to share knowledge and troubleshoot coding issues. It features a vast collection of questions and answers on a wide range of programming topics, with users contributing and upvoting the best responses. Stack Overflow has become an invaluable resource for developers of all levels, offering quick solutions and insights into common programming problems.\n\nIn this assignment, I got dataset json file from [this website](https://gist.githubusercontent.com/philipp-ulm/8aac32439e2fb92a3dad3da443f692e8/raw/93710da0594c0344a9d1f55bcbdfd67782946b96/stack-overflow-network.json) and will visualize this network dataset. From the chart, I can see that web development languages such as css and javascript have the most connections with other technology on Stack Overflow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"- imported data looks like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"- define the nodes format, which contains id, sourceLinks list, targetLinks list, group and nodesize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"formatted_nodes = data.nodes.map(({id, group, nodesize}) => ({\n id,\n sourceLinks: [],\n targetLinks: [],\n group,\n nodesize\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"- Get all the nodes ID","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"nodeIDs = new Map(formatted_nodes.map(d => [d.id, d]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"- Define the links format, which contains source, target and value","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"formatted_links = data.links.map(({source, target, value}) => ({\n source: nodeIDs.get(source),\n target: nodeIDs.get(target),\n value\n }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"- add links to the nodes; Each link should be added to the source node's sourceLinks and target node's targetLinks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"{\n for (const link of formatted_links) {\n const {source, target, value} = link;\n source.sourceLinks.push(link);\n target.targetLinks.push(link);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"- Combine the imported nodes and links data to a graph object;","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"graph = {\n return {\n nodes: formatted_nodes, \n links: formatted_links\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"navio(graph.nodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"navio(graph.links)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"## Data Abstraction\n- Dataset Type: Network, json file;\n- Attributes (from raw dataset):\n - id: Categorical\n - group: Ordered Ordinal, sequential\n - nodesize: Ordered Quantitative, sequential\n - value: Ordered Quantitative, sequential\n - target: Categorical\n - source: Categorical \n- Derived Attributes:\n - source_id: Categorical\n - target_id: Categorical\n - source_group: Ordered ordinal, sequential\n - target_group: Ordered ordinal, sequential\n - sorce_nodesize: Ordered Quantitative, sequential\n - target_nodesize: Ordered Quantitative, sequential\n - target_y: Ordered Quantitative, sequential, Express\n - source_y: Ordered Quantitative, sequential, Express\n- Data Availability: Static","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"## Task Abstracktion\n- Audience\n - **Students** who are wondering what languages are the most important in web development and which language connect other web development technologies.\n- Tasks\n - T1: **Identify** the node that have the most connection inside the web development group.(**Identify, Features**)\n - T2: **Identify** the node that connect web development with other group(**Identify, Features**)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"## How Abstraction\n- *Marks*:\n - **Point** (representing nodes)\n - **line**(representing links)\n- *Channels*:\n - **Stroke Width**: value;[for the first chart](https://observablehq.com/d/938351cedcc843c3#chart)\n - **Color Hue**: group, target_group, source_group;\n - **Area**: nodesize, target_nodesize, sorce_nodesize;\n - **vertical position**: target_y, source_y; [for the first chart](https://observablehq.com/d/938351cedcc843c3#chart)\n- *Effectiveness & Expressiveness*: The chart shows all the information in the dataset and helps me to do the tasks much faster and easier. Therefore, this visualization is effective and expressive.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"import { ForceGraph } from \"@john-guerra/force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"data = d3.json(\"https://raw.githubusercontent.com/bludrop/arcdiagram-stack/master/arc_diagram_d3.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"data2 = d3.json(\"https://gist.githubusercontent.com/philipp-ulm/8aac32439e2fb92a3dad3da443f692e8/raw/93710da0594c0344a9d1f55bcbdfd67782946b96/stack-overflow-network.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof order = {\n const options = [\n // {name: \"Technology Name\", value: (a, b) => d3.ascending(a.id, b.id)},\n {name: \"Number of connections with other technology\", value: (a, b) => d3.sum(b.sourceLinks, l => l.value) + d3.sum(b.targetLinks, l => l.value) - d3.sum(a.sourceLinks, l => l.value) - d3.sum(a.targetLinks, l => l.value) || d3.ascending(a.id, b.id)},\n {name: \"Technology Group\", value: (a, b) => a.group - b.group || d3.ascending(a.id, b.id)},\n ];\n const form = html`