31:T5ca,function graphTree(root, { label = d => d.data.id, highlight = () => false, marginLeft = 40 } = {}) { 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:T63c,parallelSet={ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // your code // REFERENCE: https://observablehq.com/@d3/parallel-sets?collection=@d3/d3-sankey // use sankey-diagram to create a nodes and links structure const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); // draw the axis for each level (represents the attributes) as nodes 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); // draw all links 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"); // name and alignment of each value in each level svg.append("g") .style("font", "14px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 10 : d.x0 - 10) .attr("y", d => (d.y1 + d.y0) / 2) .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .attr("font-weight", "bold") .text(d => d.name) // add style for text for a better appearance .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 0.4); return svg.node(); }33:T5da,// REFERENCE: https://observablehq.com/@d3/parallel-sets?collection=@d3/d3-sankey graph = { let index = -1; const nodes = []; const nodeByKey = new Map; const indexByKey = new Map; const links = []; for (const k of category_array) { for (const d of data) { if(k !== "value") { // ignore the "value" in category_array to remove the "value" level (node) 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 < category_array.length; ++i) { if(category_array[i] !== "value") { // ignore the "value" in category_array to remove the "value" level (node) const a = category_array[i - 1]; const b = category_array[i]; const prefix = category_array.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":"83a8d0c26964c55525f51cf34949d6f3dcf10038b1b3c06b3ffe9bb8e8d051465e8a78282c14348f2f7a7e754b2d18e5662d84114941f8e83909b3cab3593ace","href":"https://static.observableusercontent.com/files/83a8d0c26964c55525f51cf34949d6f3dcf10038b1b3c06b3ffe9bb8e8d051465e8a78282c14348f2f7a7e754b2d18e5662d84114941f8e83909b3cab3593ace","name":"dataSet.jpg","type":"image/jpeg","lastModified":1592935442355.29,"size":76367},{"id":"8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","href":"https://static.observableusercontent.com/files/8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","name":"titanic.jpg","type":"image/jpeg","lastModified":1592557537521.019,"size":118761},{"id":"5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","href":"https://static.observableusercontent.com/files/5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","name":"titanic.csv","type":"text/csv","lastModified":1592557537521.019,"size":873}] 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":true,"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=[\"Sex\", \"Survived\", \"Age\", \"Class\", \"value\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"//Draw the tree here using the graphTree function. It could look simlar to that. \n//graphTree(hierarchyData, {label: d => d.data.name})\ngraphTree(hierachyData, {label: d => d.data.name})","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"//Add the depth and height information to the nested data\n/*\nhierachyData = d3.nest()\n .key(d => d.Sex)\n .entries(data);\n*/\n// TEST to understand how hierarchy and nest work, source from d3 documentation about nest and hierarchy\n/*\nhierachyData = d3.hierarchy({\n name:\"Data Set\", children: [\n {name: \"Female\", children: [{name: \"Adult\"},\n {name: \"Child\"}]},\n {name: \"Male\", children: [{name: \"Adult\"},\n {name: \"Child\"}]}\n ]\n})\n*/\n\nhierachyData = d3.hierarchy({\n name: \"root\",\n children: childNode\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"childNode = 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 .key(d => d[category_array[4]])\n .entries(data)\n .map(function(first_level) { // 5 level of the nested data\n return {name: first_level.key, children: first_level.values.map(function(second_level) {\n return {name: second_level.key, children: second_level.values.map(function(third_level) {\n return {name: third_level.key, children: third_level.values.map(function(fourth_level) {\n return {name: fourth_level.key, children: fourth_level.values.map(function(fifth_level) {\n return {name: fifth_level.key}})}})}})}})}})\n\n// category_array.forEach(element => childNode.map(showChildren(element)));","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"// try to recursively do the above code, not working\n\nfunction showChildren(d) {\n return {name: d.key}\n}","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":true,"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":288,"value":"// REFERENCE: https://observablehq.com/@d3/parallel-sets?collection=@d3/d3-sankey\nsankey = d3.sankey()\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(2)\n .nodePadding(30)\n .extent([[0, 5], [width, height - 5]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"$33","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 = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"color = d3.scaleOrdinal([\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}