30:Td35,function sankeyChord (data, { title = null, bind = '.chart', height = 500, _width = width * 0.6, // use observable width sourceCols = ["#ffd700", "#fa8775", "#ea5f94", "#9d02d7"], targetCols = ['#ccc'], margin = {top: 20, right: 100, bottom: 20, left: 100}, } = {}) { const w = _width - margin.left - margin.right const h = height - margin.top - margin.bottom const sourceColors = d3.scaleOrdinal() .range(sourceCols) const targetColors = d3.scaleOrdinal() .range(targetCols) const _data = nodesAndLinks(data) console.log('data', data) console.log('_data formatted', _data) // set up dom const sel = d3.create('div').attr('class', 'js-vis') createDOM(sel) // create svg in passed in div const svg = sel.select('.js-svg') .append('svg') .attr('width', _width) .attr('height', height) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') const sankey = d3Sankey.sankey() .nodeWidth(40) .nodePadding(10) .extent([[1, 1], [w - 1, h - 6]]) sankey(_data) // console.log('sankey(_data)', sankey(_data)) const link = svg.append('g') .attr('class', 'links') .attr('fill', 'none') .attr('stroke-opacity', 0.6) .selectAll('path') .data(_data.links) .enter().append('path') .attr('class', d => { // console.log('d', d) return `source-${d.source.node} target-${d.target.node}` }) .attr('d', d3Sankey.sankeyLinkHorizontal()) .attr('stroke', d => sourceColors(d.source.node)) .attr('stroke-width', d => Math.max(1, d.width)) const node = svg.append('g') .attr('class', 'nodes') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('g') .data(_data.nodes) .enter().append('g') node.append('rect') .attr('x', d => d.x0) .attr('y', d => d.y0) .attr('class', d => d.type + ' bar') .attr('height', d => d.y1 - d.y0) .attr('width', d => d.x1 - d.x0) // use colours depending on source or target .attr('fill', d => (d.type === 'source') ? sourceColors(d.subIndex) : targetColors(d.subIndex) ) .on('click', function (e, d) { if (d.type === 'source') { highlightSourcePaths(svg, d.index, d.type) updateTitle(sel, d.label, d.value) listInfo(sel, d.sourceLinks, { type: 'source', colorScale: sourceColors }) } else { highlightSourcePaths(svg, d.index, d.type) updateTitle(sel, d.label, d.value) listInfo(sel, d.targetLinks, { type: 'target', colorScale: sourceColors }) } }) .on('dblclick', function (d) { svg.selectAll('path') .attr('stroke-opacity', 0.4) }); node.append('text') .attr('x', d => d.x0 + 50) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('class', 'label') .attr('text-anchor', 'start') .text(d => d.label) .filter(d => d.x0 < _width / 2) .attr('x', d => d.x1 - 50) .attr('text-anchor', 'end'); function highlightSourcePaths (sel, index, type) { sel.selectAll('path') .attr('stroke-opacity', 0.05) // pass in type of source/target .filter(`path.${type}-${index}`) .attr('stroke-opacity', 0.6); } return sel.node(); }31:T721,function nodesAndLinks (data) { const targetsArray = listTargets(data) const sourceNode = createSourceNodes(data) const targetNodes = createTargetNodes(data) const linksArray = createLinks(data) console.log('sourceNode', sourceNode) console.log('targetNodes', targetNodes) console.log('linksArray', linksArray) console.log('sourceNode.concat(targetNodes)', sourceNode.concat(targetNodes)) function createSourceNodes (data) { const nodes = data.map((d, i) => { return { node: i, subIndex: i, label: d.label, type: 'source' } }) return nodes } function listTargets (data) { // list potential targets let _targets = [] data.forEach(o => { // push as flat array _targets.push(...o.values.map(d => d.label)) }) // remove duplicates const targetsArray = [...(new Set(_targets))] console.log('targetsArray', targetsArray) return targetsArray } function createTargetNodes (data) { // create required structure const nodes = targetsArray.map((d, i) => { return { node: (data.length) + i, subIndex: i, label: d, type: 'target' } }) return nodes } function createLinks (data) { const links = [] data.forEach((o, index) => { const val = o.values.map(d => { return { source: index, target: targetsArray.indexOf(d.label) + data.length, value: d.value, targetLabel: o.label, sourceLabel: d.label } }).filter(d => d.value !== null) links.push(val) }) // return a flattened array return links.reduce((a, b) => a.concat(b), []) } // return the formatted data return { nodes: sourceNode.concat(targetNodes), links: linksArray } }32:[] 2e:{"title":"sankey/chord chart","cells":[{"id":0,"value":"# sankey/chord chart\n\nClick on either the left or right stacked bars to select/highlight paths, and double-click to reset. This chart takes data as per `sampleData.js`:\n\n```\nconst sampleData = [\n {\n label: 'Region-a',\n values: [\n {label: 'Ash', value: 4},\n {label: 'Birch', value: 3},\n {label: 'Maple', value: 1}\n ]\n },\n ...\n```\n\n- it converts it to required format in `nodesAndLinks` function for d3-sankey\n- creates the required DOM elements in createDOM.js, to allow control/ease over internal selections\n- data is displayed in a html elements via `listInfo` and `updateTitle` functions\n","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"sankeyChord(sampleData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"sampleData = [\n {\n label: 'Region-a',\n values: [\n {label: 'Ash', value: 4},\n {label: 'Birch', value: 3},\n {label: 'Maple', value: 1}\n ]\n },\n {\n label: 'Region-b',\n values: [\n {label: 'Ash', value: 3},\n {label: 'Birch', value: 1},\n {label: 'Maple', value: 1}\n ]\n },\n {\n label: 'Region-c',\n values: [\n {label: 'Ash', value: 4},\n {label: 'Birch', value: 3}\n ]\n },\n {\n label: 'Region-d',\n values: [\n {label: 'Maple', value: 1},\n {label: 'Ash', value: null},\n {label: 'Birch', value: 2}\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"// using http://basscss.com/ classes\nfunction createDOM (selection) {\n const container = selection.append('section')\n .attr('class', 'clearfix mx-auto my2 js-wrap')\n // create DOM for svg chart\n const chart = container.append('div')\n .attr('class', 'col col-7')\n chart.append('div')\n .attr('class', 'js-svg')\n // create DOM for displaying info\n const info = container.append('div')\n .attr('class', 'col col-4 mt2')\n info.append('h2')\n .attr('class', 'h3 regular js-info-title')\n info.append('ul')\n .attr('class', 'list-reset js-info-ul')\n}\n\n// this will produce the below elements:\n/*\n

\n*/\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"// create list items for data paths\nfunction listInfo (selection, data, config) {\n config = {\n type: 'source',\n colorScale: null,\n ...config\n }\n const {type, colorScale} = config\n\n const join = selection.select('.js-info-ul')\n .selectAll('li')\n .data(data)\n\n join.enter().append('li')\n .attr('class', 'mb1')\n .merge(join)\n .html(d => {\n const index = d.source.node\n if (type === 'source') {\n return `${createColorBlock(index)} ${d.target.label}: ${d.value}`\n } else {\n return `${createColorBlock(index)} ${d.source.label}: ${d.value}`\n }\n })\n\n join.exit().remove()\n\n function createColorBlock (index) {\n return (`\n \n \n \n `)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function updateTitle (selection, label, value) {\n selection.select('.js-info-title')\n .html(`${label} (total: ${value})`)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}