31:T956,chart = { const svg = d3.select(DOM.svg(outerWidth, outerHeight)).attr("id", "chart"); // Noticed have to append components to gChart group to have chart margin // If SVG defined the same as the block version, the node isn't returned const gChart = svg .append('g') .attr("transform", `translate(${margin.left},${margin.top})`); const nodes = data.nodes; const links = data.links; const defaultOpacity = 0.3; // Adding rects gChart .append("g") .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 => colorScale(d.name)) .append("title") .text(d => `${d.name}\n${format(d.value)}`); // links group const link = gChart .append("g") .attr("fill", "none") .selectAll("g") .data(links) .enter() .append("g") .style("mix-blend-mode", "multiply"); // link group gradients 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 => colorScale(d.source.name)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => colorScale(d.target.name)); // adding path links link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .style("stroke", d => d.uid) .style("stroke-opacity", defaultOpacity) .style("stroke-width", d => Math.max(1, d.width)) .on("mouseover", function() { d3.select(this).style("stroke-opacity", 0.5); }) .on("mouseout", function() { d3.select(this).style("stroke-opacity", defaultOpacity); }); // adding titles for links link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); // adding texts - for nodes gChart .append("g") .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:T466,md ` Block's version
Flow order for sankey is as follows:
Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure Date obtained data from Open Data (City of Edmonton) : July-23-2018 Help to read the sankey: Link
Some observations 1. All special events are central 2. Most of the disruptions activity type is construction 3. Central has the highest number construction - (44 + 16) 60 disruptions 4. Southeast and Northwest have the lowest number of construction - 20 disruptions 5. Total closure is the only impact with two activity types Some questions that I have
Can be answered by researching online or asking a Subject Matter Expert. 1. Why are some disruptions revised? 2. Why is there a high number of road construction on the Northeast traffic district? Mouseover the rectangles to get node stats and mouseover the thick lines to get link stats `33:T511,md ` ## Tweet

@TheYEGTraffic traffic disruptions flow. @mbostock, thanks, your notebook helped me. @micahstubbs thanks, your block helped me. Straight line bug I solved it differently.https://t.co/w2FPh9t5Qc @CityofEdmonton @PlanEdmonton @CSU52 @EdmontonFire @EPCOR @edmontonpolice pic.twitter.com/YemJ0PiNOt
— Michael_Otyz (@Michael_Otyz) August 27, 2018

`34:T704,// Function builds nodes and links and you can also specify order flow makeNetwork = function(csv) { // use only required attributes const data = csv.map(element => { return { Country: element["Country"], Organisation: element["Organisation"], "Personally identifiable information": element["Personally identifiable information"], "TLS secure": element["TLS secure"] }; }); // all the unique data values const reduceFunc = (acc, curVal) => acc.concat(curVal); const filterFunc = d => d.key != ""; const allValues = data .map(d => Object.values(d)) .reduce(reduceFunc, []) .filter(d => d != ""); // sankey nodes const nodes = [...new Set(allValues)]; const sankeyNodes = nodes.map(d => { return { name: d }; }); // sankey flow order // Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure const order = [ "TLS secure", "Personally identifiable information", "Organisation", "Country" ]; //sankey links const orderLinks = d3 .range(1, order.length) .map((d, i) => linkMaker(order[i], order[i + 1])) .reduce(reduceFunc, []); //sankey json const network = { nodes: sankeyNodes, links: orderLinks }; return network; // builds the links function linkMaker(attr1, attr2) { const links = d3 .nest() .key(d => d[attr1]) .key(d => d[attr2]) .entries(data) .filter(filterFunc) .map(d => { const flows = d.values.filter(filterFunc).map(p => { return { source: nodes.indexOf(d.key), target: nodes.indexOf(p.key), value: p.values.length }; }); return flows; }); return links.reduce(reduceFunc, []); } }35:[{"id":"a7eefc03095ecddfe2497e05b15604ab217194473c84451928cbb5fbbfb9bd0b9f149e798099a29678f9b71e689c379dcbf1d95fa304999b889c6369c791bbed","href":"https://static.observableusercontent.com/files/a7eefc03095ecddfe2497e05b15604ab217194473c84451928cbb5fbbfb9bd0b9f149e798099a29678f9b71e689c379dcbf1d95fa304999b889c6369c791bbed","name":"972.csv","type":"text/csv","lastModified":1581855715680.212,"size":6460}] 2f:{"title":"Edmonton - Traffic Disruptions - Sankey","cells":[{"id":0,"value":"md`## Edmonton - Traffic Disruptions - Sankey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`\n## Acknowledgements\n- Traffic Disruptions\n- Produced 20 Colors for nodes\n- Bostock's Sankey\n- Convert Set to Array\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`## Appendix\nCode for viz.
\nNetwork function formats csv to object with nodes and links as attributes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`#### Consts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"outerWidth = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"outerHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"width = outerWidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = outerHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"colorScale = d3.scaleOrdinal()\n .domain(data.nodes.map(d => d.name))\n .range(colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} Disruptions`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"colors = [\n \"#ad002d\",\"#3addc5\",\"#e600d2\",\"#007203\",\"#6b008e\",\n \"#ffa834\",\"#005da3\",\"#e76800\",\"#ceaeff\",\"#003503\",\n \"#ffa3d8\",\"#00885c\",\"#ac2600\",\"#331a49\",\"#8e6b00\",\n \"#ffa7ad\",\"#5d3a00\",\"#d5c593\",\"#6d0014\",\"#ffa178\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"disruptions = d3.csv(\"https://gist.githubusercontent.com/mikelotis/98000626c7332958b47fe4f4fc0cf4fc/raw/0b08cdabf738b1dc41de1e04072e57cfdfe214ea/Traffic_Disruptions(July-23-2018).csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"appData = d3.csvParse(await FileAttachment('972.csv').text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"FileAttachment('972.csv').text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = {\n // initial data\n const network = makeNetwork(appData);\n\n // sankey adds graphical attributes to initial data\n d3\n .sankey()\n .nodeWidth(15)\n .nodePadding(30)\n .size([width, height])(network);\n\n return network;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"JSON.stringify(makeNetwork(appData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`#### Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`#### Dependency`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5.5.0\", \"d3-sankey@0.7.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"TwitterWidget = require('https://bundle.run/twitter-widgets@2.0.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"TwitterWidget.load()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}