29:null 2a:["$","title",null,{"children":"Parallel Sets2 | novotny1akub | Observable"}] 2f:T17b0,chart = { const svg = d3.create("svg") .attr("viewBox", "-" + adj + " -"+ adj + " " + (width + adj*2) + " " + (height + adj*2)) .style("background", "#ffffff"); const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); var total_men = 0; var total_women = 0; nodes.forEach(function(node,i){ if(node["targetLinks"]){ if(node.name == "active"){ total_men = node.value; } if(node.name == "Female "){ total_women = node.value; } } }); //adding nodes svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("id", d => d.name) .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("fill", color2) .attr("height", d => d.y1 - d.y0) .attr("width", d => "30px")//d.x1 - d.x0) .on("mouseover", rectMouseOver) .on("mouseout", rectMouseOut) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); var x_positions = []; svg.selectAll("rect").each(function(d,i){ var pos = d3.select(this).attr("x"); if(pos == 0){ pos = 10; } else{ pos = pos - 1; } if(!x_positions.includes(pos)){ x_positions.push(pos); } }); var x_objects = []; var i; for(i=0; i < keys.length; i++){ x_objects.push({columnName: keys[i], xpos: x_positions[i]}); } svg.append("g") .style("font", "25px sans-serif") .selectAll("text") .data(x_objects) .join("text") .attr("fill","#000000") .attr("id", "columns") .attr("font-weight", "bold") .attr("x", d => d.xpos - 30) .attr("y", -20) .text(function(d){return d.columnName}); const path = svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", color1) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .on("mouseover", d => { path.attr("stroke", l => { if(d.names.length==2 && _.isEqual(l.names[0],d.names[0])){ return color(d.names[0]); } if(_.isEqual(l.names,d.names.slice(0,l.names.length))){ return color(d.names[0]); } return color1; }); }) .on("mouseout", d => { path.attr("stroke",color1); }); path.append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); //adding title labels const label = svg.append("g") .style("font", "19px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 20 : d.x0 - 10) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("font-weight", "bold") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .attr("fill","#000000") .append("tspan") .attr("id", d=>d.name) .attr("class",d=>d.index) .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); function rectMouseOver(selected){ var sourceNodes = selected["targetLinks"]; var targetNodes = selected["sourceLinks"]; var sourceNodeInd = []; sourceNodes.forEach(function(node,index){ sourceNodeInd.push({id: node["source"]["index"], value: node.value}); }); targetNodes.forEach(function(node,index){ sourceNodeInd.push({id: node["target"]["index"], value: node.value}); }); var result = []; sourceNodeInd.reduce(function(res, value) { if (!res[value.id]) { res[value.id] = { id: value.id, value: 0 }; result.push(res[value.id]); } res[value.id].value += value.value; return res; }, {}); var ids = []; result.forEach(function(d,ind){ ids[ind] = d.id; }); ids.push(selected.index); var textArr = []; for(var i = 0; i < result.length; i++){ textArr[result[i].id] = result[i].value; } for(var key in textArr){ svg.select("tspan[class=\'" + key + "\']").text(` ${textArr[key]}`); } svg.selectAll("text") .filter(function(d){ if(!ids.includes(d.index) && !d.columnName && d.name != "Male " && d.name != "Female "){ return true; }else{ return false; } }).style("opacity" , .3); svg.selectAll("rect") .filter(d=> !ids.includes(d.index)) .style("opacity", .3); svg.select("tspan[id='Male ']") .attr("fill-opacity",1) .attr("font-weight","bold") .attr("font-size", "19px") .attr("fill","#000000") .text(function(d){ if(selected.name == "Male " || selected.name == "Female "){ return ` ${d3.format(".0%")(total_men / (total_men + total_women)).toLocaleString()}` } return ` ${d3.format(".0%")(selected.men_total / selected.value).toLocaleString()}` }); svg.select("tspan[id='Female ']") .attr("fill-opacity",1) .attr("font-weight","bold") .attr("font-size", "19px") .attr("fill","#000000") .text(function(d){ if(selected.name == "Female " || selected.name == "Male "){ return ` ${d3.format(".0%")(total_women / (total_men + total_women)).toLocaleString()}` } return ` ${d3.format(".0%")(selected.women_total / selected.value).toLocaleString()}` }); path.filter(d=>d.target.index !== selected.index) .filter(d=>d.source.index !== selected.index) .style("opacity",.1); } function rectMouseOut(selected){ svg.selectAll("tspan") .attr("fill-opacity", 1) .attr("font-size", "19px") .text(d => ` ${d.value.toLocaleString()}`); svg.selectAll("path").style("opacity", 1); svg.selectAll("rect").style("opacity", 1); svg.selectAll("text").style("opacity", 1); } return svg.node(); }30:T429,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.COUNT || 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}; }31:[{"id":"739da85bcd397bde9a4404daf9502471238f691d1d651e3c44e46211a29bb04836d2a5e1f82300de80c407798f199b547230a591fa80a05f4981c2df9687fc3b","href":"https://static.observableusercontent.com/files/739da85bcd397bde9a4404daf9502471238f691d1d651e3c44e46211a29bb04836d2a5e1f82300de80c407798f199b547230a591fa80a05f4981c2df9687fc3b","name":"sankey@4.csv","type":"text/csv","lastModified":1682328847356.129,"size":205}] 2d:{"id":"d285be57cc38bf65","slug":null,"title":"Parallel Sets2","thumbnail":"07e4c3ee1865828c7753468ca61f7c9da9ebe1b87a8993e0e2dbc6e34861d204","access_level":"public","create_time":"$D2023-04-23T17:20:53.694Z","update_time":"$D2023-04-24T10:06:07.772Z","view_time":null,"first_public_time":"$D2023-04-23T17:20:53.694Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"82ed9e6aaba8acb2","login":"novotny1akub","name":"novotny1akub","avatar_url":"https://avatars-next.observableusercontent.com/40e4321204a4470fbee5dcc275c513d1f8bc8dbd5732a4f01aad221d0426f271","tier":"starter_2024"},"version":172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1125ba366576bacb","login":"novotny1akub","name":"novotny1akub","avatar_url":"https://avatars-next.observableusercontent.com/40e4321204a4470fbee5dcc275c513d1f8bc8dbd5732a4f01aad221d0426f271","tier":null}],"members":[{"type":"individual","id":"1125ba366576bacb","login":"novotny1akub","name":"novotny1akub","avatar_url":"https://avatars-next.observableusercontent.com/40e4321204a4470fbee5dcc275c513d1f8bc8dbd5732a4f01aad221d0426f271","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Parallel Sets2","cells":[{"id":0,"value":"# Parallel Sets2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":148,"value":"viewof raw_data_string = csvInput({\n initialUrl: await FileAttachment(\"sankey@4.csv\").url()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"data = d3.csvParse(raw_data_string, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"## Data Input Processing Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"function csvInput({initialUrl, init, accept = \".csv\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init)\n .then(response => {\n if (!response.ok) throw new Error(response.status + \" \" + response.statusText);\n return response.text();\n });\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"function fileInput({\n initialUrl, // e.g., \"https://example.com/file.txt\"\n accept, // e.g., \".txt,.md\"\n load = value => value // A function to specify which value is exposed.\n}) {\n let file = null;\n const form = html`

\n ${Object.assign(html``, {value: initialUrl})}\n \n ${Object.assign(html``, {accept})}\n`;\n form.onsubmit = event => {\n form.value = load(form.url.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n event.preventDefault();\n };\n form.url.oninput = event => {\n event.stopPropagation();\n };\n form.file.oninput = () => {\n if (file !== null) URL.revokeObjectURL(file);\n file = URL.createObjectURL(form.file.files[0]);\n form.value = load(form.url.value = file);\n };\n if (initialUrl !== undefined) {\n form.value = load(initialUrl);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"## Parallel Sets Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"_ = require('lodash');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"keys = data.columns.slice(0, -1) // get all but last column from the data defined above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"data_color = [...new Set(data.map(d => d[Object.keys(d)[0]]))] // all unique values from the 1st column","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"// leaving like this if in the future different colors needed\ncolor = d3.scaleOrdinal(data_color.slice(0,2), [\"#7C6A6A\",\"#7C6A6A\"]).unknown(\"#7C6A6A\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"color1 = \"#DEDEDE\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"color2 = \"#CC0000\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"height = 720 - adj*2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"adj = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"sankey = d3.sankey()\n .nodeSort(null)//null and undefined are two options here\n .linkSort(null)//null and undefined are two options here\n .nodeWidth(30)\n .nodePadding(25)//space between two nodes\n .extent([[0, 5], [width, height - 5]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"