25:["$","title",null,{"children":"Food Loss and Waste Flows in the U.S. | I247_2023 | Observable"}] 49:T2ead,// the following function uses Observable's SankeyChart code. My code modifications/additions are commented inline below beginning with "az". function SankeyChart({ nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkValue = ({value}) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = ["#a8c545", "#003738", "#468966", "#74CEB7", "#2C858D", "#A0CFD1", "#8e8879", "#95ab63", "#22290d", "#CCD7D7", "#9b9073", "#ABACA6", "#6e8785"], // az: custom array of colors width = 600, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 8, // top margin, in pixels marginRight = 48, // right margin, in pixels marginBottom = 8, // bottom margin, in pixels marginLeft = 48, // left margin, in pixels } = {}) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id})); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]})); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey.sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]) ({nodes, links}); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; // az: create a div wrapper for the tooltip const wrapper = d3.create("div") const svg = wrapper.selectAll("svg").data([0]).join("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("rect") // add annotation background .attr("x", 565) .attr("y", 10) .attr("width", 20) .attr("height", 340) .attr("fill", "#47838B") .attr("opacity", 0.2); svg.append("rect") // annotation background rect .attr("x", 490) .attr("y", 350) .attr("width", 420) .attr("height", 120) .attr("fill", "#47838B") .attr("opacity", 0.2) .attr("rx", "10") .attr("ry", "10"); // az: Define the tooltip variable var tooltip = wrapper .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "#fff") .style("color", "#000") .style("padding", ".5rem") .style("border", "1px solid #313639") .style("border-radius", "8px") .style("font-size", "11px") .style("font-family", "Arial, Helvetica, sans-serif") .text(""); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .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("click", highlight_node_links) // az: add the function to highlight related node links on click // az: add hover effects to display values in tooltip .on("mouseover", function(e, d){ console.log(d); tooltip.text("All " + d.id + ": " + (d3.format(",")(d.value)) + " Tons"); // az: tooltip label d3.select(this) .transition() .duration(300) .style("opacity", 0.5); return tooltip.style("visibility", "visible"); }) // az: make tooltip visible on mouseover .on("mousemove", function(e){ //console.log(e) const [x, y] = d3.pointer(e) return tooltip.style("top", (y + 10)+"px").style("left",(x + 10)+"px"); //az: offset by 10px so tooltip stays visible }) // az: reset to original style when mouse leaves element .on("mouseleave", function(){ d3.select(this).style("opacity", 1) return tooltip.style("visibility", "hidden"); }) if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") // az: add an attr id to each link for highlighting purposes .attr("id", function (d, i) { d.id = i; return "link-" + i; }) .style("mix-blend-mode", linkMixBlendMode) // az: display text on tooltip showing flow path values on hover .on("mouseover", function(e, d) { console.log(d); tooltip.text(d.source.id + " → " + d.target.id + ": " + d3.format(",")(d.value) + " Tons"); d3.select(this) .transition() .duration(300) .style("stroke-opacity", function(l) { return l.source === d || l.target === d ? 0.5 : 0.2; }) return tooltip.style("visibility", "visible") ; }) .on("mousemove", function(e){ //console.log(e) const [x, y] = d3.pointer(e) return tooltip.style("top", (y + 10)+"px").style("left",(x + 10)+"px"); // az: offset by 10px so tooltip stays visible }) // az: reset styles when mouse leaves element .on("mouseleave", function(d) { link .transition() .duration(300) .style("stroke-opacity", linkStrokeOpacity) return tooltip.style("visibility", "hidden"); }); if (linkColor === "source-target") link.append("linearGradient") .attr("id", d => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") .attr("stop-color", ({source: {index: i}}) => color(G[i]))) .call(gradient => gradient.append("stop") .attr("offset", "100%") .attr("stop-color", ({target: {index: i}}) => color(G[i]))); link.append("path") .attr("d", linkPath) .attr("stroke", linkColor === "source-target" ? ({index: i}) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({source: {index: i}}) => color(G[i]) : linkColor === "target" ? ({target: {index: i}}) => color(G[i]) : linkColor) .attr("stroke-width", ({width}) => Math.max(1, width)) .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); if (Tl) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 11) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(({index: i}) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } svg.append("text") .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "#143637") .append("tspan") .attr("textLength", 290) .append("tspan") .attr("x", 340) .attr("y", 20) .attr("dy", "1.2em") // Set the line height .text("Unsold or uneaten food") .append("tspan") .attr("x", 340) .attr("y", 40) .attr("dy", "1.2em") // Set the line height .text("= Surplus") svg.append("text") .attr("font-family", "sans-serif") .attr("font-size", "14px") .append("tspan") .attr("textLength", 160) .attr("x", 340) .attr("y", 80) .text("(~35% of all food produced)"); svg.append("text") .attr("font-family", "sans-serif") .attr("font-size", "28px") .attr("font-weight", "bold") .append("tspan") .attr("textLength", 690) .append("tspan") .attr("x", 500) .attr("y", 350) .attr("dy", "1.5em") // Set the line height .text("While a small fraction of Surplus") .append("tspan") .attr("x", 500) .attr("y", 380) .attr("dy", "1.5em") // Set the line height .text("is Rescued or Recycled,") svg.append("text") .style("fill", "#47838B") .attr("font-family", "sans-serif") .attr("font-size", "28px") .attr("font-weight", "bold") .append("tspan") .attr("textLength", 360) .attr("x", 500) .attr("y", 410) .attr("dy", "1.5em") // Set the line height .text("the majority ends up as Waste."); svg.append("path") .attr("d", "M 568 300 L 575 280 L 582 300 Z") .attr("fill", "#47838B"); svg.append("line") .attr("x1", 575) .attr("y1", 295) .attr("x2", 575) .attr("y2", 350) .attr("stroke", "#47838B") .attr("stroke-width", 5); return Object.assign(wrapper.node(), {scales: {color}}); }4a:T479,// az: the following function is based off of @iashishsingh's highlight code, but modified to work with my setup of the Sankey chart. function highlight_node_links(ev, node) { var remainingNodes = [], nextNodes = []; var stroke_opacity = 0; if (d3.select(this).attr("data-clicked") == "1") { d3.select(this).attr("data-clicked", "0"); stroke_opacity = 0.5; } else { d3.select(this).attr("data-clicked", "1"); stroke_opacity = 0.9; } var traverse = [ { linkType: "sourceLinks", nodeType: "target" }, { linkType: "targetLinks", nodeType: "source" } ]; traverse.forEach(function (step) { node[step.linkType].forEach(function (link) { remainingNodes.push(link[step.nodeType]); highlight_link(link.id, stroke_opacity); }); while (remainingNodes.length) { nextNodes = []; remainingNodes.forEach(function (node) { node[step.linkType].forEach(function (link) { nextNodes.push(link[step.nodeType]); highlight_link(link.id, stroke_opacity); }); }); remainingNodes = nextNodes; } }); }4b:T63c,--- # Writeup: D3 interactivity and animation **Assignment option chosen:** I chose to focus on including (at least) two forms of interactivity instead of animation. **Data used:** I used data from the [ReFED Insights Engine Food Waste Monitor](http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx). I filtered the data to the latest year available, 2021, and manually reshaped the data using Tableau in order to fit the required format to build the Sankey chart. **Code innovations / Modifications:** I used Observable's [Sankey Diagram Template](https://observablehq.com/@d3/sankey) as a starting point. There was no interactivity built into this template, so I added additional code for a tooltip that reads out the value of the node that the user is hovering over. Additionally, I added the ability for the user to select which categorical breakdown order to view the food surplus flows in. I achieved this by writing a CSV-swapping function that loads different datasets into the chart based on which selection the user has made for the "Primary surplus breakdown" dropdown menu. Lastly, I added a click-based interaction to the chart such that when the user clicks on a specific node, all related stages of the flows to/from that node get highlighted. This was difficult to add, but I successfully modified [this user's Observable code](https://observablehq.com/@iashishsingh/sankey-diagram-path-highlighting) to make it work for the Sankey function and parameters I was using. I also animated the transitions to make the state changes smoother.4c:[{"id":"2d4f5efcf4c6041e5bb7af8c601ad0f4d7181c702c1ef9ff8b6a8ce778e85e652ccb2ba939ebf183bd49e5d12c7d5d07b3924c54666247823b28c160cec17a75","href":"https://static.observableusercontent.com/files/2d4f5efcf4c6041e5bb7af8c601ad0f4d7181c702c1ef9ff8b6a8ce778e85e652ccb2ba939ebf183bd49e5d12c7d5d07b3924c54666247823b28c160cec17a75","name":"byfinaldestn.csv","type":"text/csv","lastModified":1682016106559.876,"size":2462},{"id":"ad0c5b36d2d80dad0580752d76824e0474047691e7388e120cbd75cf2c3cdaf18b6fa39d52d72081516813fa9f31170552817eb863f585c01f8d89962c437f91","href":"https://static.observableusercontent.com/files/ad0c5b36d2d80dad0580752d76824e0474047691e7388e120cbd75cf2c3cdaf18b6fa39d52d72081516813fa9f31170552817eb863f585c01f8d89962c437f91","name":"bysector.csv","type":"text/csv","lastModified":1682016106559.876,"size":2203},{"id":"b1e03e47f66b16cc864c3767212ad2ae5f409235d4fb0baef05679774e0257a2e90b7c2fd998fd98632beeabe7427a3e620f128b310ab80c5a14e42d13603da7","href":"https://static.observableusercontent.com/files/b1e03e47f66b16cc864c3767212ad2ae5f409235d4fb0baef05679774e0257a2e90b7c2fd998fd98632beeabe7427a3e620f128b310ab80c5a14e42d13603da7","name":"bysurplustype.csv","type":"text/csv","lastModified":1682016106559.876,"size":2140}] 29:{"id":"14472a5a08975da3","slug":null,"title":"Food Loss and Waste Flows in the U.S.","thumbnail":"16b58e5804ce18b122af4fe353a052f87db164071b7309733e49480d47ada070","access_level":"public","create_time":"$D2023-04-20T18:41:46.559Z","update_time":"$D2023-05-01T23:19:44.409Z","view_time":null,"first_public_time":"$D2023-04-23T20:59:56.515Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d1bed9d2048f045f","login":"calviz2023","name":"I247_2023","avatar_url":"https://avatars-next.observableusercontent.com/22d35888af7250fc60b3abcbd64c0011d97dffde9269c43b6a2d9100383108f5","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":337,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b74323b59ce522d","login":"alzhao","name":"Alicia Zhao","avatar_url":"https://avatars-next.observableusercontent.com/ed5e44cd4b17b4f5d164a78fb0cb75a96afde3a32afc814cf127f4faf419a431","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8b74323b59ce522d","login":"alzhao","name":"Alicia Zhao","avatar_url":"https://avatars-next.observableusercontent.com/ed5e44cd4b17b4f5d164a78fb0cb75a96afde3a32afc814cf127f4faf419a431","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Food Loss and Waste Flows in the U.S.","cells":[{"id":0,"value":"# Food Loss and Waste Flows in the U.S.\n\n In an ideal world, all food that's produced for human consumption would end up being consumed, but in reality **over 1/3 ends up uneaten, AKA surplus.** This Sankey diagram tracks where that food surplus ends up. \n\n

Data sourced from: [ReFED Insights Engine Food Waste Monitor](http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx). \nSankey chart adapted from [Observable's Sankey template](https://observablehq.com/@d3/sankey). \n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"#### Adjust chart parameters:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"viewof linkColor = Inputs.select(new Map([\n [\"none\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"],\n]), {\n value: new URLSearchParams(html``.search).get(\"color\") || \"source\",\n label: \"Link color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof breakdown = Inputs.select([\"By surplus type\", \"By sector\", \"By final destination\"], {\n value: \"By surplus type\",\n label: \"Primary surplus breakdown\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### Food Loss and Waste Flows in the U.S., 2021","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"chart = SankeyChart({links: data}, {\n nodeGroup: d => d.id.split(/\\W/)[0], // take first word for color\n nodeAlign, // e.g., d3.sankeyJustify; set by input below\n linkColor, // e.g., \"source\" or \"target\"; set by input above\n breakdown,\n format: (f => d => `${f(d)} Tons`)(d3.format(\",\")),\n width: 1150,\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n

\n## Appendix\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"#### Load the data set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"data = loadCSV()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"#### Configurations and setup functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof nodeAlign = Inputs.select([\"left\", \"right\", \"center\", \"justify\"], {\n value: \"left\",\n label: \"Node alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// az: the following function is based off of @iashishsingh's highlight code, but modified to work with my setup of the Sankey chart.\n\nfunction highlight_link(id, opacity) {\n d3.select(\"#link-\" + id)\n .transition() // az: added transition effect for visual smoothness\n .duration(300)\n .style(\"stroke-opacity\", opacity);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// az: write a function to swap csv files based on which categorical breakdown the user selects\n\nfunction loadCSV() {\n // get the selected value from the dropdown menu\n const selectedValue = breakdown;\n \n // use FileAttachment to load the appropriate CSV file based on the selected value\n let csvData;\n if (selectedValue == \"By surplus type\") {\n csvData = FileAttachment('bysurplustype.csv').csv({typed: true});\n } else if (selectedValue == \"By sector\") {\n csvData = FileAttachment('bysector.csv').csv({typed: true});\n } else if (selectedValue == \"By final destination\") {\n csvData = FileAttachment('byfinaldestn.csv').csv({typed: true});\n }\n \n // return the CSV that was loaded\n return csvData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"// didn't end up using this formatting but keeping just in case\nformat = {\n const format = d3.format(\",.0f\");\n return data.value ? d => `${format(d)} ${data.value}` : format;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// didn't end up using this color scheme but keeping for the syntax\ncolor = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null