31:T71a,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .enter().append("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) .attr("fill", d => color(d.name)) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .enter().append("g") .style("mix-blend-mode", "multiply"); 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.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.value.toLocaleString()} ${d.source.name} / ${d.target.name}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .enter().append("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); return svg.node(); }32:T455,md`Sankey diagrams visualize the magnitude of flow between nodes in a network. This intricate diagram shows Chicago crimes by type and location distribution. The thickness of each link encodes the amount of flow from source to target. This notebook is built with d3-sankey, which computes positions via iterative relaxation. After fixing the horizontal position of each node, the algorithm starts from the sources on the left, positioning downstream nodes so as to minimize link distance. A reverse pass is then made from right-to-left, and then the entire process is repeated several times. Overlapping nodes are shifted to avoid collision. The fully automatic layout is convenient for rapid visualization—positioning nodes manually is tedious! However, the algorithm is not perfect; it could be improved to minimize link crossings and to prevent links from intersecting unrelated nodes. It also does not support cyclical networks. `33:[] 2f:{"title":"Chicago Crimes Sankey","cells":[{"id":0,"value":"md`# Chicago Crimes Sankey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [width - 1, height - 5]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {return {'nodes': nodeNames, 'links': nodeLinks}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"width = 964","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3-selection@1\", \"d3-fetch@1\", \"d3-format@1\", \"d3-scale@2\", \"d3-scale-chromatic@1\", \"d3-sankey@0.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md `## Crime Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"crimeData = groupByField(dataTable, 'PrimaryType')","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"locationData = groupByField(dataTable, 'LocationDescription')","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"assaults = groupChildren(crimeData['ASSAULT'], 'location')","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"crimeByLocation = Object.keys(crimeData)\n .map(crimeType => {\n return {\n 'crimeType': crimeType.toLowerCase(), \n 'locations': groupChildren(crimeData[crimeType], 'location'),\n 'count': crimeData[crimeType].length\n };\n })\n .sort((a, b) => b.count - a.count)","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"nodeNames = crimeByLocation\n .slice(0, 10) // top 10 crimes\n .map(crime => {\n return {'name': crime.crimeType.toLowerCase()};\n })\n .concat(Object.keys(locationData)\n .map(location => {\n return {'name': location.toLowerCase(), 'count': locationData[location].length};\n })\n .sort((a, b) => b.count - a.count)\n .slice(0, 10) // top 10 locations\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"nodeLinks = {\n const nodeNameMap = {};\n for (let i=0; i < nodeNames.length; i++) {\n nodeNameMap[nodeNames[i].name] = i;\n }\n const links = [];\n crimeByLocation.forEach(crime => {\n const src = nodeNameMap[crime.crimeType];\n if (src && src !== undefined) {\n crime.locations.forEach(location => {\n const target = nodeNameMap[location.name];\n if (target && target !== undefined) {\n links.push({'source': src, 'target': target, 'value': location.size});\n }\n });\n }\n });\n return links;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"function groupByField(data, groupField) {\n let groupData, location, results = {};\n const dateFilter = arrow.predicate.custom(i => {\n const date = toDate(data.getColumn('Date').get(i));\n return (date.getMonth() <= 6); // through June\n }, b => 1);\n data.filter(dateFilter) \n .scan((index) => {\n const groupFieldData = groupData(index);\n const groupArray = results[groupFieldData];\n if (!groupArray) {\n results[groupFieldData] = []; \n }\n const dataRecord = {};\n dataRecord[groupField] = groupFieldData;\n dataRecord['location'] = location(index); \n results[groupFieldData].push(dataRecord);\n }, (batch) => {\n groupData = arrow.predicate.col(groupField).bind(batch);\n location = arrow.predicate.col('LocationDescription').bind(batch);\n });\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import {loadData, toDate} from '@randomfractals/apache-arrow'","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"import {groupChildren} from '@randomfractals/chicago-crimes-sunburst'","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"arrow = require('apache-arrow@0.3.1')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}