2d:null 2e:["$","title",null,{"children":"InfoVis Lab Class Assignment 5 | rt00941 | Observable"}] 33:T5cc,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(); }34:T676,//https://observablehq.com/@d3/parallel-sets parallelSet={ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //visualise the flow of the data from the created graph with nodes and links const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); //add the nodes to the graph 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()}`); //create the links and color Male ones in to distinguish it from Female data 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()}`); //give the labels again getting them from nodes 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(); }35:T4ea,//create a graph of the nodes and links from the data //the graph will have an index, a list of nodes, a list of indexes, node key mappings and index key mappings //returns the links and nodes 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}; }36:[{"id":"8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","href":"https://static.observableusercontent.com/files/8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","name":"titanic.jpg","type":"image/jpeg","lastModified":1592564423003.404,"size":118761},{"id":"5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","href":"https://static.observableusercontent.com/files/5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","name":"titanic.csv","type":"text/csv","lastModified":1592564423003.404,"size":873},{"id":"35bc4b3a221be9c5fe27305843391eb98aa2e7604b8b7d079fcfbfdfa2a732ac693a5583f9ad6b5b580ae1d419793347983a7dc2e6b82b87083a94eb8ee2820f","href":"https://static.observableusercontent.com/files/35bc4b3a221be9c5fe27305843391eb98aa2e7604b8b7d079fcfbfdfa2a732ac693a5583f9ad6b5b580ae1d419793347983a7dc2e6b82b87083a94eb8ee2820f","name":"place_holder@3.png","type":"image/jpeg","lastModified":1592844436292.918,"size":1382046}] 31:{"id":"2b7ac7957a7dfee2","slug":"infovis-lab-class-assignment-5","title":"InfoVis Lab Class Assignment 5","thumbnail":"0396da0352eddff4c6abf1a9766d1e368351e3656781ed4d297c336022485ea0","access_level":"public","create_time":"$D2020-06-19T11:00:23.003Z","update_time":"$D2020-06-22T16:56:25.758Z","view_time":null,"first_public_time":"$D2020-06-22T16:48:13.696Z","has_unpublished_edits":null,"fork":{"id":"222099b8c8551337","slug":"infovis-lab-class-assignment-5","title":"InfoVis Lab Class Assignment 5","owner":{"id":"a1b9ebd70c301b58","login":"vrbuw","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"cc7ee37a61c6ebca","login":"rt00941","name":"","avatar_url":"https://avatars-next.observableusercontent.com/efd46d159d4d621ee03670c7f4f0732ac946c87968d2092a3fa12ae402ae0d0c","tier":"starter_2024"},"version":547,"publish_version":547,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba695b0697aa9e1d","login":"rt00941","name":"","avatar_url":"https://avatars-next.observableusercontent.com/efd46d159d4d621ee03670c7f4f0732ac946c87968d2092a3fa12ae402ae0d0c","tier":null}],"members":[{"type":"individual","id":"ba695b0697aa9e1d","login":"rt00941","name":"","avatar_url":"https://avatars-next.observableusercontent.com/efd46d159d4d621ee03670c7f4f0732ac946c87968d2092a3fa12ae402ae0d0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fa3a5343581dd1e5","slug":"visualization-course","title":"Visualization Course","owner":{"id":"cc7ee37a61c6ebca","login":"rt00941","name":""}},"type":"notebook","body":{"title":"InfoVis Lab Class Assignment 5","cells":[{"id":0,"value":"md`# InfoVis Lab Class Assignment 5`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`# Titanic Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"table(data,{title:\"Data set Titanic\", pageSize: data.length/2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"category_array=[\"Sex\", \"Survived\", \"Age\", \"Class\", \"value\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"//Draw the tree here using the graphTree function. It could look simlar to that. \ngraphTree(treedata, {label: d => d.data.name})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"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(d){return{name:d.key, children:d.values.map(function(s){return{name:s.key, children:s.values.map(function(a){return{name:a.key, children:a.values.map(function(c){return{name:c.key, children:c.values.map(function(v){return{name:v.key, children:v.values}})}})}})}})}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//Add the depth and height information to the nested data\ntreedata = d3.hierarchy({\nname: 'root',\nchildren: children})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"color = d3.scaleOrdinal([\"Male\"], [\"#ffc000\"]).unknown(\"#cccccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"//define the function to visualise the flow\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"keys = category_array.slice(0,4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Apendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = d3.csvParse(await FileAttachment(\"titanic.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"dx = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"dy = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"treeLink = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"shape2path = require(\"shape2path@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"height=400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"