32:T757,// dot: https://observablehq.com/@observablehq/dot md`# Data Driven Sankey Visualization of the [Vega Movie Dataset](https://github.com/vega/vega-datasets) Starting with [*Mike Bostock's Sankey Diagram*](https://observablehq.com/@d3/sankey-diagram) ([enhanced with draggable nodes](https://observablehq.com/@mariodelgadosr/sankey-diagram-with-draggable-nodes)), this generalized pattern demonstrates the analysis of a meausre (eg: ${sparkline} count of movies) as it 'flows' through a user- determined, dynamic hierarchy of dimensions and filters. The sankey is 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("yearFilter")}, ${anchor( "showTotal" )} | [*Toggle*](https://github.com/observablehq/inputs/blob/main/README.md#toggle) | [*Observable Inputs*](https://observablehq.com/@observablehq/inputs) ${anchor("edgeColor")}, ${anchor("year")}, ${anchor( "measure" )} | [*Select*](https://github.com/observablehq/inputs/blob/main/README.md#select)| [*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] ${digraphNodes.colors}${digraphNodes.nodes}; }`} `33:Tff8,sankeyChart = { 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(); }34: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}; } 35:T6e1,// https://graphviz.org/about/ digraphNodes ={ const digraphNodes = `data,year data,getDimensions data,getMeasures data,search getDimensions,sankeyDimensions getMeasures,measure measure,sankeyData yearFilter,year year,search search,tableRows sankeyDimensions,tableRows showTotal,sankeyData tableRows,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} } 36:[] 30:{"title":"Data Driven Sankey Visualization of the Vega Movie Dataset","cells":[{"id":0,"value":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"viewof measure = \n{ \n const measures = getMeasures(data);\n \n return Select(measures, \n {label: \"Measure\", format: d => d.replace(\"__\",\"\"), value: d => d } \n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"viewof showTotal = Toggle({label: \"Total\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof sankeyDimensions = { \n \n const datasetDimensions = getDimensions(data, 12);\n \n const sankeyDimensions = datasetDimensions.map(d => d.field);\n \n const initialDimensions = datasetDimensions.filter(({field,distinct}) => distinct < 8).map(d => d.field);\n\n return selectOrder(sankeyDimensions, {selected: initialDimensions, title:\"Dimensions\"})\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"viewof yearFilter = Toggle({label: \"Filter Release Year\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof year = \n{ \n const preSelected = [...new Set(data.map(d => d[\"Release Year\"]).sort())];\n \n return Select(preSelected, \n {label: \"Release Year\", value: preSelected, multiple: true, disabled: !yearFilter} \n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"viewof search = Search(data.filter(d => yearFilter ? year.find(y => y == d[\"Release Year\"] ) : true), \n { placeholder: \"Search movies\"}\n );","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(data[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":1366,"value":"// The virtual 'count' measure: should not be a property(column) in the data\ncountDim = \"__Count\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"// https://github.com/vega/vega-datasets\ndata = {\n \n const movies = await (await require('vega-datasets@1'))['movies.json']() \n \n dimensionalize(movies,\"US_Gross\",\"USG\", 6); \n dimensionalize(movies,\"Worldwide_Gross\",\"WWG\",6);\n dimensionalize(movies,\"Production_Budget\",\"Production\",6); \n \n movies.forEach((d,i) => {\n d[\"Release Year\"] = d3.timeFormat(\"%Y\")(new Date(d.Release_Date));\n }\n );\n \n return movies\n .filter(d => new Date(d.Release_Date) <= new Date() ) //Scrubbing illogical dates\n .filter(d => d.US_Gross > 0)\n .filter(d => d.MPAA_Rating != null)\n .filter(d => d.Major_Genre != null)\n .filter(d => d.Creative_Type != null);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"function dimensionalize(data, metric, abrev, minLog){\n \n const powMinLog = Math.pow(10,minLog);\n \n const GtoB = bucket => bucket.replace(/G/g,\"B\");\n \n const bucketRange = d => {\n const ceilLog = Math.ceil(Math.log10(d));\n const ceil = Math.pow(10,ceilLog);\n const floor = Math.pow(10,ceilLog-1) + 1;\n const range = d3.format(\"$.1s\")(floor) + `+ to ` + d3.format(\"$.1s\")(ceil);\n return GtoB(range)\n };\n\n data.forEach(d => d[metric.replace(\"_\", \" \") + \" Dimension\"] = \n d[metric] <= powMinLog ? `${abrev}: $0 to ${d3.format(\"$.0s\")(powMinLog)}`\n : `${abrev}: ${bucketRange(d[metric])}`\n );\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"function getDimensions(dataset,maxFrequency = 15){\n \n const summary = dl.summary(dataset); // https://github.com/vega/datalib/wiki/Statistics#dl_summary\n return d3.sort( summary.filter(({type}) => type == \"string\" || type == \"date\")\n .filter(({distinct}) => distinct <= maxFrequency)\n .map(({field,distinct}) => ({field, distinct})),\n ({distinct}) => distinct, ({field}) => field\n );\n\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"function getMeasures(dataset) {\n const summary = dl.summary(dataset); // https://github.com/vega/datalib/wiki/Statistics#dl_summary\n return [countDim].concat(\n d3.sort(\n summary.filter(({ type }) => type == \"number\").map(({ field }) => field)\n )\n );\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":13,"value":"format = {\n return d3.format(\",.0f\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"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":1456,"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":1355,"value":"$35","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 { Search, Table, Select, Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"import {hist} from \"@domoritz/inline\"","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"},{"id":1118,"value":"sparkline = {\n const dimension = \"Major_Genre\";\n const countByDimension = [...d3.rollup(tableRows, v => v.length, d => d[dimension]).values()];\n return hist(countByDimension, {\n domain: d3.extent(countByDimension),\n thresholds: 5,\n width: 60,\n height: 10,\n fillStyle: color(dimension),\n domainLineWidth: 1\n })\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}