31:T5ca,function graphTree(root, { label = d => d.data.id, highlight = () => false, marginLeft = 50 } = {}) { root = tree(root); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + dx * 2]) .style("overflow", "visible"); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${marginLeft},${dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("stroke-opacity", 0.5) .attr("d", treeLink); const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") .attr("fill", d => highlight(d) ? "red" : d.children ? "#555" : "#999") .attr("r", 2.5); node.append("text") .attr("fill", d => highlight(d) ? "red" : null) .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .text(label) .clone(true).lower() .attr("stroke", "white"); return svg.node(); }32:T56f,parallelSet={ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //Reference: https://observablehq.com/@d3/parallel-sets const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => color(d.names[0])) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }33:T462,//Reference: https://observablehq.com/@d3/parallel-sets graph = { let index = -1; const nodes = []; const nodeByKey = new Map; const indexByKey = new Map; const links = []; for (const k of keys) { for (const d of data) { const key = JSON.stringify([k, d[k]]); if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map; for (const d of data) { const names = prefix.map(k => d[k]); const key = JSON.stringify(names); const value = d.value || 1; let link = linkByKey.get(key); if (link) { link.value += value; continue; } link = { source: indexByKey.get(JSON.stringify([a, d[a]])), target: indexByKey.get(JSON.stringify([b, d[b]])), names, value }; links.push(link); linkByKey.set(key, link); } } return {nodes, links}; }34:[{"id":"8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","href":"https://static.observableusercontent.com/files/8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","name":"titanic.jpg","type":"image/jpeg","lastModified":1592895856828.161,"size":118761},{"id":"5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","href":"https://static.observableusercontent.com/files/5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","name":"titanic.csv","type":"text/csv","lastModified":1592895856828.161,"size":873},{"id":"2867aac8b9ebb694cfda514a4e45f289530a4b6067d273be284cce073faf1066173d78a06fcbf41883bb1e2a0c03bbb989d6788059f55054501f22ffca92851b","href":"https://static.observableusercontent.com/files/2867aac8b9ebb694cfda514a4e45f289530a4b6067d273be284cce073faf1066173d78a06fcbf41883bb1e2a0c03bbb989d6788059f55054501f22ffca92851b","name":"VIS_Tree.jpg","type":"image/jpeg","lastModified":1592948836945.047,"size":1461981}] 2f:{"title":"InfoVis Lab Class Assignment 5","cells":[{"id":0,"value":"md`# InfoVis Lab Class Assignment 5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`# Parallel Sets + Tree\n\nParallel Sets is a visualization for categorical data, like census and survey data, inventory, and many other kinds of data that can be summed up in a cross-tabulation.\n\nParallel Sets can be considered as special kind of layered graphs. The thickness of each edge (sometimes called ribbon) represents a quantity that is repeatedly subdivided by category. This assigment looks at the data of the Titanic disaster of 1912 you are already familiar with from the lecture about sets. \n\n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`# Titanic Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"table(data,{title:\"Data set Titanic\", pageSize: data.length/2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`# Task 1: Tree Drawing %10\nParallel Sets can also be considered being a tree with the entire data set as its root. \nDraw the data in the table as a tree by hand. Each level in the tree represents one attribute.\nScan or take a picture of the drawing and replace the placeholder`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`# Task 2.1: Tree 30%\nDraw the representation using the D3 tree functionality. Max sure that the order of the tree levels follow the order of the labels of the categories (sets) in category_array.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"category_array=[\"Survived\", \"Sex\", \"Age\", \"Class\", \"value\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"//Reference: https://github.com/d3/d3-hierarchy\n//Reference: https://github.com/d3/d3-collection\n\ngraphTree(d3.hierarchy({\n label: \"Passengers\",\n children: d3.nest()\n .key(d => d[category_array[0]])\n .key(d => d[category_array[1]])\n .key(d => d[category_array[2]])\n .key(d => d[category_array[3]])\n .entries(data)\n .map(function(level_1){\n return {label: level_1.key, children: level_1.values.map(function(level_2){\n return {label: level_2.key, children: level_2.values.map(function(level_3){\n return {label: level_3.key, children: level_3.values.map(function(level_4){\n return {label: level_4.key}\n })}\n })}\n })}\n })\n}), {label: d => d.data.label}); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md` The tree graph needs nested data with specific information of the nodes, this includes height and depth. Have a look at the nest and hierarchy functionalities in D3. Remember to include the functionality to alter the order of the level in the tree according to the order in category_array.` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`# Task 3: Parallel Sets 60%\nDraw the Parallel Sets. You can use D3 functionalities or plain svg drawing. D3 sankey-diagram can also be used to create a nodes and link structure. \n\nRemember to add comments with every online reference you use to draw the graph.\n\nThe order of the categories in the axes needs to be linked with the category_array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"//Reference: https://observablehq.com/@d3/parallel-sets\n\ncolor = d3.scaleOrdinal([\"Survived\"], [\"lightblue\"]).unknown(\"lightgreen\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"//Reference: https://observablehq.com/@d3/parallel-sets\n\nsankey = d3.sankey()\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(4)\n .nodePadding(20)\n .extent([[0, 5], [width, height - 5]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"keys = category_array.slice(0, -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Apendix`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = d3.csvParse(await FileAttachment(\"titanic.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"dx = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"dy = 90","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"treeLink = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"shape2path = require(\"shape2path@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"height=400","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}