2d:null 2e:["$","title",null,{"children":"CS765 - Design Challenge 3 | nkhishig | Observable"}] 33:Te8a,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(-10)) .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) / 5); const node = svg.append("g") .attr("stroke", "#000") .selectAll("circle") .data(nodes) .join("circle") .attr("r", (d => d.nodesize)) .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',12) .attr('font-size',12) .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) } }; } svg.append("circle").attr("cx",570).attr("cy",50).attr("r", 6).style("fill", d3.schemeSet2[0]) svg.append("circle").attr("cx",570).attr("cy",70).attr("r", 6).style("fill", d3.schemeSet2[1]) svg.append("circle").attr("cx",570).attr("cy",90).attr("r", 6).style("fill", d3.schemeSet2[2]) svg.append("circle").attr("cx",570).attr("cy",110).attr("r", 6).style("fill", d3.schemeSet2[3]) svg.append("circle").attr("cx",570).attr("cy",130).attr("r", 6).style("fill", d3.schemeSet2[4]) svg.append("text").attr("x", 580).attr("y", 55).text("Main nodes").style("font-size", "15px") svg.append("text").attr("x", 580).attr("y", 75).text("Nodes that have => 4 links").style("font-size", "15px") svg.append("text").attr("x", 580).attr("y", 95).text("Nodes that have 3 links").style("font-size", "15px") svg.append("text").attr("x", 580).attr("y", 115).text("Nodes that have 2 links").style("font-size", "15px") svg.append("text").attr("x", 580).attr("y", 135).text("Nodes that have 1 link").style("font-size", "15px") 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() } 34:[{"id":"3047da126bc9b094ae1e7bb106375f9a0a5a34ed6b53cb5c2616b602991fdac6c55fe91a148857a863dcb02e136f2cf6d38fc20438456e69a1d5625af4bd8c4c","href":"https://static.observableusercontent.com/files/3047da126bc9b094ae1e7bb106375f9a0a5a34ed6b53cb5c2616b602991fdac6c55fe91a148857a863dcb02e136f2cf6d38fc20438456e69a1d5625af4bd8c4c","name":"final@2.json","type":"application/json","lastModified":1607991475606.795,"size":36304}] 31:{"id":"0d028fc08f509d48","slug":"cs765-design-challenge-3","title":"CS765 - Design Challenge 3","thumbnail":"5cd11262fa0eaa2ea881970f065e73b26a20d96737c0e59579fb936447f50b7a","access_level":"public","create_time":"$D2020-12-14T21:56:19.315Z","update_time":"$D2020-12-15T07:03:30.207Z","view_time":null,"first_public_time":"$D2020-12-15T03:37:33.803Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"04946db2051735f0","login":"nkhishig","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ffedd1c55af2c1a80c7d09eb25d22513040b814a7754183e7d05e2af134600d1","tier":"starter_2024"},"version":686,"publish_version":686,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4051134fac04c38","login":"nkhishig","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ffedd1c55af2c1a80c7d09eb25d22513040b814a7754183e7d05e2af134600d1","tier":null}],"members":[{"type":"individual","id":"d4051134fac04c38","login":"nkhishig","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ffedd1c55af2c1a80c7d09eb25d22513040b814a7754183e7d05e2af134600d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CS765 - Design Challenge 3","cells":[{"id":0,"value":"md`# CS765 - Design Challenge 3\n\nNomin Khishigsuren`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"html ` \n

Amazon Product Catagories

Exploring Products with Multiple categories

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"drawChart()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md` ## What is being shown?\n\nThis data visualization aims to show information about 'Amazon Product Categories'. The data was provided by the class CS765 as part of Design Challenge 3. More specifically, I used the 'alsoCount' and 'alsos' information (in the given dataset) to rank and select a subset of the data to showcase here. \n \n**Dataset Type: Network** format containing nodes, links and attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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

Attribute	Type of Attribute
Links.source	Categorical
Links.target	Categorical
Links.value	Ordered Quantitative
Node.name	Categorical
Node.group	Categorical
Node.nodesize	Ordered Quantitative

\n
`;\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md `## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md `#### Network Graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md `#### Drag Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md `#### Color Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeSet2);\n return d => scale(d.group)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md `#### Data Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"final@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md `#### D3 Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"