43:["$","title",null,{"children":"Edmonton - Traffic Disruptions - Sankey | Harim Jung | Observable"}] 4b:T922,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(); }4c: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 `4d: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

`4e:T7d5,// Function builds nodes and links and you can also specify order flow makeNetwork = function(csv) { // log(csv); // use only required attributes const data = csv.map(element => { return { "Disruptions": "Disruptions", "Status": element["Status"], "Impact": element["Impact"], "Activity Type" : element["Activity Type"], "Traffic District": element["Traffic District"], "Infrastructure": element["Infrastructure"] }; }); // 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 = [ "Disruptions", "Status", "Impact", "Activity Type", "Traffic District", "Infrastructure" ]; //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, []); }; }4f:[] 47:{"id":"723b9cc37433fe24","slug":"edmonton-traffic-disruptions-sankey","title":"Edmonton - Traffic Disruptions - Sankey","thumbnail":"a215ac2999be408b331088aae7bb4639dfe7bede232242977cbd4aa91934a0a5","access_level":"public","create_time":"$D2021-12-26T10:17:10.631Z","update_time":"$D2021-12-26T10:17:10.631Z","view_time":null,"first_public_time":"$D2021-12-26T10:23:48.267Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"edacb788fb59ce32","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"777fab06c061b82c","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"777fab06c061b82c","login":"harimjung","name":"Harim Jung","avatar_url":"https://avatars-next.observableusercontent.com/5d9fd7abde557dd1cb1ab74c93112ac5a35883ff8c3e87e6fa45fb27f0d09911","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Edmonton - Traffic Disruptions - Sankey","cells":[{"id":0,"value":"md`## Edmonton - Traffic Disruptions - Sankey`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`#### Consts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"outerWidth = 964","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"outerHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"width = outerWidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = outerHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"colorScale = d3.scaleOrdinal()\n .domain(data.nodes.map(d => d.name))\n .range(colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} Disruptions`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = {\n // initial data\n const network = makeNetwork(disruptions); \n \n // sankey adds graphical attributes to initial data\n d3.sankey()\n .nodeWidth(15)\n .nodePadding(30)\n .size([width, height])\n (network);\n \n return network;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`#### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`#### Dependency`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5.5.0\", \"d3-sankey@0.7.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"TwitterWidget = require('https://bundle.run/twitter-widgets@2.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"TwitterWidget.load()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null