31:T858,showWorkflow ? md` In this notebook, the [*Sankey Diagram With Draggable Nodes*](https://observablehq.com/@mariodelgadosr/sankey-diagram-with-draggable-nodes) is restructured for analysis of serveral [vega-datasets](https://github.com/vega/vega-datasets). Sankeys can be visualized and filtered via: Variable(s) | Interface Component | Source ----|----|---- ${anchor( "sankeyDimensions" )} | [*Select Order Input*](https://observablehq.com/@jashkenas/select-order-input) ([customized](https://observablehq.com/@mariodelgadosr/data-driven-table-column-selection-and-sorting#selectOrder))| [Jeremy Ashkenas](https://observablehq.com/@jashkenas) ${anchor("edgeColor")}, ${anchor("measure")}, ${anchor( "datasets" )} | [*Select*](https://github.com/observablehq/inputs/blob/main/README.md#select)| [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "maxDistinct" )} | [*Range*](https://github.com/observablehq/inputs/blob/main/README.md#range) | [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor("useNumericDimensions")}, ${anchor( "showTotal" )} | [*Toggle*](https://github.com/observablehq/inputs/blob/main/README.md#toggle) | [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "search" )} | [*Search*](https://github.com/observablehq/inputs/blob/main/README.md#search)| [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor( "tableRows" )} | [*Table*](https://github.com/observablehq/inputs/blob/main/README.md#table)| [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${dot`digraph {rankdir="LR"; node [style=filled, height=.9] ${digraphNodes.colors}${digraphNodes.nodes}; }`} **Note**:

Some numeric properties (eg: *year* in *barley.json*) are data row attributes and yield illogical summations across rows.
Using two or more non-distinct numbered columns as dimensions will generate **circular link** errors; eg: columns *Penicillin*, *Neomycin* and *Stroptomycin* in *burtin.json*.

` : md``32:T117f,sankeyChart = { if (circularReference){ const cR = circularReference; return html`Dimensions ${cR.source} and ${cR.target} create a circular reference with a value of ${cR.circularValue}.`; } try{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const sankey = d3.sankey() .nodeId(d => d.name) .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); //https://github.com/vega/datalib/wiki/Utilities#dl_duplicate const {nodes, links} = sankey(dl.duplicate(sankeyData)); const nodeWidth = nodes[0].x1 - nodes[0].x0; // Container for draggable nodes const node = svg.selectAll("g") .data(nodes) .join("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); // d3V6 events: https://observablehq.com/@d3/d3v6-migration-guide#events node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) ); // Relative to container node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", color) .attr("stroke", "#000") .append("title") .text(d => `${d.name}\n${format(d.value)}`) // Relative to container/rect node.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("x", d => d.x0 < width / 2 ? 6 + (d.x1 - d.x0) : - 6) // +/- 6 pixels relative to container .attr("y", d => (d.y1 - d.y0) / 2) // middle of node .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (edgeColor === "path") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); } // if link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source) : color(d.target)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); function dragStart (event, d) { d.__x = event.x; d.__y = event.y; d.__x0 = d.x0; d.__y0 = d.y0; d.__x1 = d.x1; d.__y1 = d.y1; } //dragStart function dragMove(event, d) { d3.select(this) .attr('transform', function (d) { const dx = event.x - d.__x; const dy = event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } // if if (d.x1 > width) { d.x0 = width - nodeWidth; d.x1 = width; } // if if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } // if if (d.y1 > height) { d.y0 = height - (d.__y1 - d.__y0); d.y1 = height; } // if return `translate(${d.x0}, ${d.y0})`; }); // .attr('transform', function (d) { // https://github.com/d3/d3-sankey#sankey_update sankey.update({nodes, links}); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } //dragMove return svg.node(); } catch(e){ return html`Sankey can not be generated because selections generated: ${e}` } }33:T878,sankeyData = { const measureText = measure.replace(countDim,countDim.replace("__","")); const topNode = "Total " + measureText; const sum = v => d3.sum(v, d => measure == countDim ? 1 : d[measure]) const sort = [...sankeyDimensions].map(g => d => d[g] ); // https://observablehq.com/@d3/d3-group#rollups const rollup = d3.rollup(tableRows, sum, ...sort); let nodes, links; if (rollup instanceof Map){ // Eg: https://observablehq.com/@mbostock/2019-h-1b-employers const hierarchy = d3.hierarchy(rollup).sum(([, value]) => value); // re-summarize at each hierarchy level links = hierarchy.links() .filter(({source}) => showTotal || (sankeyDimensions.length > 1 ? source.data[0] : false)) .map(({source,target}) => ({source: source.data[0] || topNode, target: target.data[0], value: target.value } ) ); if (showTotal){ nodes = [topNode].concat([... new Set(links.map(({target}) => target))]).map(n => ({name: n})); } // if else if (sankeyDimensions.length > 1){ const nodeSet = new Set; for (const link of links){ nodeSet.add(link.source), nodeSet.add(link.target) } nodes = [...nodeSet].map(name => ({name})); } // else if else { nodes = d3.merge([...rollup].map(([node,value]) => [{name: node}, {name: `${measureText} ${node}`}])); links = [...rollup].map(([node,value]) => ({source: node, target: `${measureText} ${node}`, value})); } // else } else { // No dimenions; with or without total const targetEmpty = "⇒" + measureText; nodes = [topNode].concat([targetEmpty]).map(n => ({name: n})); links= [{source: topNode, target: targetEmpty,value: rollup}]; } // else return {nodes, links}; } 34:T81a,// https://graphviz.org/about/ // https://observablehq.com/@observablehq/notebook-visualizer digraphNodes ={ const digraphNodes = `vegaDatasets,datasets datasets,data data,dataProfile data,filteredData dataProfile,datasetDimensions datasetDimensions,filteredData dataProfile,getMeasures filteredData,search filteredData,getMeasures maxDistinct,datasetDimensions useNumericDimensions,datasetDimensions datasetDimensions,getMeasures datasetDimensions,sankeyDimensions getMeasures,measure measure,sankeyData search,tableRows sankeyDimensions,tableRows tableRows,circularReference showTotal,sankeyData circularReference,sankeyData sankeyData,sankeyChart edgeColor,sankeyChart` ; const nodes = d3.csvParseRows(digraphNodes, ([n1, n2]) => `${n1}->${n2.trimEnd()}`).join(" "); // https://observablehq.com/@observablehq/notebook-visualizer const Runtime = (await require("@observablehq/runtime@4")).Runtime let colors; try{ // Won't work for forked notebooks that have not been published or shared const viewofs = await import(moduleUrl(document.baseURI)) .then(async ({default: define}) => { const runtime = new Runtime(); const main = runtime.module(define, name => name); await runtime._compute(); runtime.dispose(); return Array.from(main._runtime._variables, (v, i) => (v._id = i, v)) .map(v => v._name) .filter(name => name != null && name.startsWith("viewof ")) .map(name => name.replace("viewof ","")); }) colors = [...new Set(nodes.replace(/->/g,' ').split(' '))] .map(n => viewofs.find(v => v == n) ? `${n} [fillcolor="${dotColor(n)}" URL="#${n}"]` : `${n} [fillcolor="white" URL="#${n}"]`) .join(" "); }catch(err){ colors = [...new Set(nodes.replace(/->/g,' ').split(' '))] .map(n => `${n} [fillcolor="${dotColor(n)}" URL="#${n}"]`) .join(" "); } return {nodes,colors} } 35:[] 2f:{"title":"Sankey Quick Start","cells":[{"id":0,"value":"// dot: https://observablehq.com/@observablehq/dot\nmd`# Sankey Quick Start`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2138,"value":"viewof showWorkflow = Inputs.toggle({\n label: \"Show Application's Workflow\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"//https://github.com/vega/vega-datasets\nviewof datasets = \n{ \n \n const listFilter = \"barley,burtin,cars,disasters,income,iowa,iris,jobs,la,movies,stocks\";\n \n const dataList = Object.keys(vegaDatasets)\n .sort() \n .filter(dataset => listFilter.split(\",\").find(filter => dataset.startsWith(filter)));\n \n return Select(dataList, \n {label: md`[Datasets](https://github.com/vega/vega-datasets)`} \n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"viewof maxDistinct = {\n\ndatasets; \n \nreturn Range([1, maxDimensions], {value: 12, step: 1, label: \"Maximum Distinct Dimension Instances\"})\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"viewof useNumericDimensions = Toggle({label: \"Use Distinct Numbers As Dimensions\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"viewof showTotal = Toggle({label: \"Total\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof sankeyDimensions = { \n \n const sankeyDimensions = datasetDimensions.map(d => d.field);\n \n const initialDimensions = datasetDimensions\n .filter(({field,distinct}) => distinct < maxDistinct).map(d => d.field);\n\n return selectOrder(sankeyDimensions, {selected: initialDimensions, title:\"Dimensions\"})\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"viewof measure = \n{ \n const measures = getMeasures(filteredData);\n \n return Select(measures, \n {label: \"Measure\", format: m => m.replace(countDim, countDim.replace(\"__\",\"\")), value: m => m } \n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof edgeColor = {\n \n const options = new Map([[\"Color by input\",\"input\"],\n [\"Color by output\", \"output\"],\n [\"Color by input-output\", \"path\"],\n [\"No color\",\"none\"]\n ])\n \n return Select(options, {value: \"path\", label: \"Edge Color\"})\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"viewof search = Search(filteredData, { placeholder: \"Search \" + datasets});","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof tableRows = Table(\n d3.sort(search, ...sankeyDimensions.map(columnName => searchRow => searchRow[columnName]) ) , \n {columns: [...new Set([...sankeyDimensions,...Object.keys(filteredData[0])])] }\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// https://en.wikipedia.org/wiki/Golden_ratio\nheight = parseInt(width / 1.6180339887);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"// The virtual 'count' measure: should not be a property(column) in the data\ncountDim = \"__Count\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"// Maximum distinct values that will be displayed for an individual node\nmaxDimensions = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"dataProfile = dl.summary(data); // https://github.com/vega/datalib/wiki/Statistics#dl_summary","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"//https://github.com/vega/vega-datasets\nvegaDatasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"data = vegaDatasets[datasets]()","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"filteredData = {\n\n const duplicate = dl.duplicate(data);\n \n const fields = datasetDimensions.map(d => d.field);\n const dateFields = datasetDimensions.filter(d => d.type == \"date\").map(d => d.field);\n \n //Untype dates: https://observablehq.com/@d3/d3-autotype\n dateFields.forEach(field => duplicate.forEach(d => d[field] = d[field].slice(0,10) )) ;\n \n \n let filteredData = duplicate;\n \n // No rows with nulls or undefined for dimensions\n fields.forEach(dimension => filteredData = filteredData.filter(d => d[dimension]));\n \n return filteredData;\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"circularReference = {\n \n const circular = new Map;\n \n for (const dimension of sankeyDimensions){\n for (let i =0; i < tableRows.length; i++){\n let source = circular.get(tableRows[i][dimension]);\n if (source && source != dimension)\n return {source, \n target: dimension,\n circularValue: tableRows[i][dimension]\n } \n circular.set(tableRows[i][dimension], dimension)\n } //for \n } // for\n return null;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"// Use datalib's (https://github.com/vega/datalib) statistics to determine dimensions\ndatasetDimensions ={\n \n return d3.sort( dataProfile.filter(({type}) => type == \"string\" || \n type == \"date\" || \n (type == \"number\" && useNumericDimensions) \n )\n .filter(({distinct}) => distinct <= maxDimensions)\n .map(({field, distinct, type}) => ({field, distinct, type})) ,\n ({distinct}) => distinct, ({field}) => field //sorting sequence\n );\n\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"// Use datalib's (https://github.com/vega/datalib) statistics to determine measures\nfunction getMeasures() {\n const fields = new Set(datasetDimensions.map((d) => d.field));\n\n return [countDim].concat(\n d3.sort(\n dataProfile\n .filter(({ type }) => type == \"number\")\n .filter(({ field }) => !fields.has(field))\n .map(({ field }) => field)\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"format = {\n return d3.format(\",.0f\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n // https://github.com/d3/d3-scale#scaleOrdinal\n // https://github.com/d3/d3-scale-chromatic#schemeCategory10\n // https://observablehq.com/@d3/d3-scaleordinal\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2089,"value":"// From: https://observablehq.com/@observablehq/notebook-visualizer\n// Also: https://talk.observablehq.com/t/access-current-cell-metadata/1873/2\nfunction moduleUrl(notebook) {\n let v = notebook, m;\n\n if (m = /\\.js(\\?|$)/i.exec(v)) v = v.slice(0, m.index);\n if (m = /^[0-9a-f]{16}$/i.test(v)) v = `d/${v}`;\n if (m = /^https:\\/\\/(api\\.|beta\\.|)observablehq\\.com\\//i.exec(v)) v = v.slice(m[0].length);\n \n return `https://api.observablehq.com/${v.split(\"?\")[0]}.js?v=3`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"dotColor = {\n // https://github.com/d3/d3-scale#scaleOrdinal\n // https://github.com/d3/d3-scale-chromatic#schemeSet3 \n // https://observablehq.com/@d3/d3-scaleordinal\n const color = d3.scaleOrdinal(d3.schemeSet3 );\n return d => color(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function anchor(text) {\n return html`${text}`;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"import {selectOrder} from \"@mariodelgadosr/data-driven-table-column-selection-and-sorting\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"import { Toggle, Search, Table, Select, Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"// https://github.com/vega/datalib\ndl = require('datalib')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}