41:null 42:["$","title",null,{"children":"New York City Waste Flow | Ashley Louie | Observable"}] 48:Tbed,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); const total = d3.sum(data, d => d.value); let div = d3.select("body").append("div") .attr("class", "tooltip") .style("display", "none") .style('z-index', '10') .text("new tooltip"); svg.append("g") .selectAll("rect") .data(nodes) .join("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) .on("mouseover", function (e, i) { div.html(d => i.name + "
" + Math.round(i.value/total*100) + "% (" + i.value.toLocaleString() + " tons)") .style("display", "block"); }) .on("mousemove", function (e) { div.style("top", e.pageY - 48 + "px") .style("left", e.pageX + "px"); }) .on('mouseout', function () { div.style("display", "none"); }) .append("title") .text(d => d.name + "\n" + Math.round(d.value/total*100) + "% (" + d.value.toLocaleString() + " tons)"); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => color(d.names[1])) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .on("mouseover", function (e, i) { d3.select(this).transition() .duration("50") .attr("opacity", "0.7"); div.html(d => i.names.join(" → ") + "
" + Math.round(i.value/total*100) + "% (" + i.value.toLocaleString() + " tons)") .style("display", "block"); }) .on("mousemove", function (e) { div.style("top", e.pageY - 48 + "px") .style("left", e.pageX + "px"); }) .on('mouseout', function () { d3.select(this).transition() .duration('50') .attr('opacity', '1'); div.style("display", "none"); }) .append("title") .text(d => d.names.join(" → ") + "\n" + Math.round(d.value/total*100) + "% (" + d.value.toLocaleString() + " tons)"); svg.append("g") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2 - 6) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => Math.round(d.value/total*100) + `% ` + d.name) .attr("class", "t1") .append("tspan") .attr("fill-opacity", 0.7) .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2 + 12) .text(d => `${d.value.toLocaleString()} tons`) .attr("class", "t2"); return svg.node(); }49:T429,graph = { let index = -1; const nodes = []; const nodeByKey = new Map; const indexByKey = new Map; const links = []; for (const k of keys) { for (const d of data) { const key = JSON.stringify([k, d[k]]); if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map; for (const d of data) { const names = prefix.map(k => d[k]); const key = JSON.stringify(names); const value = d.value || 1; let link = linkByKey.get(key); if (link) { link.value += value; continue; } link = { source: indexByKey.get(JSON.stringify([a, d[a]])), target: indexByKey.get(JSON.stringify([b, d[b]])), names, value }; links.push(link); linkByKey.set(key, link); } } return {nodes, links}; }4a:[{"id":"ec57633c75cc70f4f2d39934e35f82d84684a28a0f083739f6d8df0276751f7fde9769721ca6a936eb38ea4725ec17376b6f891996a29eb0c2400c97fb7cd77c","href":"https://static.observableusercontent.com/files/ec57633c75cc70f4f2d39934e35f82d84684a28a0f083739f6d8df0276751f7fde9769721ca6a936eb38ea4725ec17376b6f891996a29eb0c2400c97fb7cd77c","name":"nyc-annual-waste_2017.csv","type":"text/csv","lastModified":1599177009088.783,"size":450}] 46:{"id":"cae1362b0bf410a3","slug":"new-york-city-waste-flow","title":"New York City Waste Flow","thumbnail":"3f97e62988a2c321f6e5bea714a84a6e494d7f8f870ad4e1f63090ea88f0c48a","access_level":"public","create_time":"$D2020-09-01T21:20:56.996Z","update_time":"$D2020-09-05T00:00:55.681Z","view_time":null,"first_public_time":"$D2020-09-01T21:30:21.044Z","has_unpublished_edits":null,"fork":{"id":"dde4715990f04109","slug":"parallel-sets","title":"Parallel sets","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":5,"starred":false,"owner":{"type":"team","id":"6b751a0c60a09ee2","login":"ashsicle","name":"Ashley Louie","avatar_url":"https://avatars-next.observableusercontent.com/66e5634fc80a141839711a6b552536e441074941e7e922680fd3f16b78081c8e","tier":"starter_2024","bio":"Chief Technology Officer at BetaNYC, former Research Associate at the MIT Civic Data Design Lab. I work with data and technology for social good.","following":false},"version":495,"publish_version":495,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ba31b7a7c87688c","login":"ashsicle","name":"Ashley Louie","avatar_url":"https://avatars-next.observableusercontent.com/66e5634fc80a141839711a6b552536e441074941e7e922680fd3f16b78081c8e","tier":null,"bio":"Chief Technology Officer at BetaNYC, former Research Associate at the MIT Civic Data Design Lab. I work with data and technology for social good.","following":false}],"members":[{"type":"individual","id":"2ba31b7a7c87688c","login":"ashsicle","name":"Ashley Louie","avatar_url":"https://avatars-next.observableusercontent.com/66e5634fc80a141839711a6b552536e441074941e7e922680fd3f16b78081c8e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"New York City Waste Flow","cells":[{"id":0,"value":"md`# New York City Waste Flow\n\nAlthough 75% of New York City's waste stream is composed of recyclable materials, *over 50% of waste is improperly refused* into landfills and incinerators.\n\nData: [DSNY Average Monthly Tonnage Data, 2017](https://data.cityofnewyork.us/City-Government/DSNY-Monthly-Tonnage-Data/ebb7-mvp5) & [Zero Waste Designing Guidelines](https://www.zerowastedesign.org/)\n\nForked Chart: [Parallel Sets](https://observablehq.com/@d3/parallel-sets)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"sankey = d3.sankey()\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(4)\n .nodePadding(20)\n .extent([[0, 5], [width, height - 5]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"color = d3.scaleOrdinal([\"Paper\", \"Metal, Glass, Plastic\", \"Textile\", \"Organic\", \"Other\", \"Non-Divertable\"], [\"#a6cc5b\", \"#8acad5\", \"#5d7ecc\", \"#e5aa25\", \"#91b7bf\", \"#bbbbbb\"]).unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"keys = data.columns.slice(0, -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"data = d3.csvParse(await FileAttachment(\"nyc-annual-waste_2017.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 47:"$46:body"