3f:null 40:["$","title",null,{"children":"InfoVis Lab Class Assignment 5 | Jimmy Chen | Observable"}] 46:T4e4,//Create a hierarchical format //Nesting allows elements in an array to be grouped into a hierarchical tree structure. //https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nests children = d3.nest() .key(d => d[category_array[0]]) .key(d => d[category_array[1]]) .key(d => d[category_array[2]]) .key(d => d[category_array[3]]) //.key(d => d[category_array[4]]) .entries(data) //The following code is to rename key - value pair into name - children pair //https://stackoverflow.com/questions/17416186/d3-nest-key-and-values-conversion-to-name-and-children/17419311 //The map() method creates a new array with the results of calling a function for every array element. //http://www.4codev.com/javascript/rename-all-object-keys-of-an-array-using-javascript-idpx2458097450239050230.html .map(function(d){return{name: d.key, children:d.values .map(function(sex){return {name: sex.key, children: sex.values .map(function(age){return{name: age.key, children: age.values .map(function(classes){return{name: classes.key, children: classes.values .map(function(value){return {name: value.value}})}})}})}})}}); 47: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(); }48:T797,//Reference: //https://github.com/d3/d3-sankey //https://observablehq.com/@d3/parallel-sets //https://jarrettmeyer.com/2018/05/31/creating-a-d3-sankey-graph //https://www.d3-graph-gallery.com/graph/sankey_basic.html parallelSet={ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // your code //Computes the node and link positions for the given arguments, returning a graph representing the Sankey layout. const {nodes, links} = sankey({ //nodes: (feature of each elements) //links: (how elements are connected) //https://www.d3-graph-gallery.com/graph/sankey_basic.html nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); //Node in svg 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()}`); //Link in svg 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()}`); //Attach information on each node 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(); }49:T44a,//Graph: create nodes and links 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}; }4a:[{"id":"8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","href":"https://static.observableusercontent.com/files/8263d32c025caad297208f1db997526971f44d80e41dfbed4ab4c3bb38ffbb2295fca883b14e0c04134683bfa9ded4010331e7d283d9d568042bbb3246900e73","name":"titanic.jpg","type":"image/jpeg","lastModified":1592676322094.015,"size":118761},{"id":"5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","href":"https://static.observableusercontent.com/files/5ab5881b6a805f09f2b9d066550c459bb5bed453b9408b98ab92b3a3bbbea8b352051b3ada5d3726e0a8d591e1fe617e42f26249956d9b594ac7c5ed24530b9d","name":"titanic.csv","type":"text/csv","lastModified":1592676322094.015,"size":873},{"id":"eb1f8ef0b31d130b6a84d170a746ebb9e7b870895acac053f69f133ff06035f50054a7e44cbd6a73070252c69e31dc50ceb7b1dc0828854aace65ae406808f78","href":"https://static.observableusercontent.com/files/eb1f8ef0b31d130b6a84d170a746ebb9e7b870895acac053f69f133ff06035f50054a7e44cbd6a73070252c69e31dc50ceb7b1dc0828854aace65ae406808f78","name":"Draw_trerLayout.jpg","type":"image/jpeg","lastModified":1592832856921.405,"size":2262574}] 44:{"id":"76d3dfd32b0aad79","slug":"infovis-lab-class-assignment-5","title":"InfoVis Lab Class Assignment 5","thumbnail":"0396da0352eddff4c6abf1a9766d1e368351e3656781ed4d297c336022485ea0","access_level":"public","create_time":"$D2020-06-20T18:05:22.094Z","update_time":"$D2020-06-23T11:26:14.926Z","view_time":null,"first_public_time":"$D2020-06-23T16:37:05.292Z","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":"030f0c1c4bfa1e0f","login":"jimmychen0123","name":"Jimmy Chen","avatar_url":"https://avatars-next.observableusercontent.com/0f4c443de52876b25666baba0d9e7b1bd61af66260afed1d3e1f34a18d35bf2d","tier":"starter_2024","bio":"A daydreamer, traveler, also an ordinary person. ","following":false},"version":279,"publish_version":279,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6ecfc94b4be8b39","login":"jimmychen0123","name":"Jimmy Chen","avatar_url":"https://avatars-next.observableusercontent.com/0f4c443de52876b25666baba0d9e7b1bd61af66260afed1d3e1f34a18d35bf2d","tier":null,"bio":"A daydreamer, traveler, also an ordinary person. ","following":false}],"members":[{"type":"individual","id":"f6ecfc94b4be8b39","login":"jimmychen0123","name":"Jimmy Chen","avatar_url":"https://avatars-next.observableusercontent.com/0f4c443de52876b25666baba0d9e7b1bd61af66260afed1d3e1f34a18d35bf2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`# Titanic Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"//d3.hierarchy object: a data structure that represents a hierarchy.\n//https://observablehq.com/@d3/d3-hierarchy\ntitanicTree = d3.hierarchy({\n \n \n children:children\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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})\n\ngraphTree(titanicTree,{label: d => d.data.name})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//Add the depth and height information to the nested data\n//https://www.d3indepth.com/layouts/\n//https://www.developer.com/lang/jscript/creating-a-tree-diagram-with-d3.js.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"//color for links\ncolor = d3.scaleOrdinal([\"Male\"], [\"#da4f81\"]).unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"//Create a sankey instance. This creates a function that can be used to generate our Sankey data.\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"keys = category_array.slice(0,4);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Apendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"dx = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"dy = 90","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"shape2path = require(\"shape2path@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"height=400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"