2b:null 2c:["$","title",null,{"children":"Sankey Test with Labels new Nosterra data and line chart | Bill White's Workspace | Observable"}] 31:T1694,function LineChart(data, highlightYear) { // Define SVG dimensions const width = _width; const height = 400; const marginTop = 20; const marginRight = 40; const marginBottom = 30; const marginLeft = 40; function convertCost(cost,cons){ return (cost/(cons/3.41))//quad to MWh } const leftMax = d3.max(data, d => d.Emissions); const leftMin = d3.min(data, d => d.Emissions); const rightMax = d3.max(data, d => convertCost(d.Cost,d.Consumption)); const rightMin = d3.min(data, d => convertCost(d.Cost,d.Consumption)); // Define scales const xScale = d3.scaleTime() .domain(d3.extent(data, d => d.Year)).nice() .range([marginLeft, width - marginRight]); const yScaleEmissions = d3.scaleLinear() .domain([0, leftMax]).nice() .range([height - marginBottom, marginTop]); const yScaleCost = d3.scaleLinear() .domain([0, rightMax]).nice() .range([height - marginBottom, marginTop]); // Define line functions const lineEmissions = d3.line() .x(function(d) { return xScale(d.Year); }) .y(function(d) { return yScaleEmissions(d.Emissions); }); const lineCost = d3.line() .x(function(d) { return xScale(d.Year); }) .y(function(d) { return yScaleCost(convertCost(d.Cost,d.Consumption)); }); //create svg container const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; overflow: visible; font: 10px sans-serif;"); // Add title for linechart svg.append("text") .attr("text-anchor", "middle") .attr("font-size", 25) .attr("x", width/2) .attr("y", marginTop/2) .text("Simulation Scenario Summary"); // Append X axis svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .attr("stroke-width", "0.3") .style("opacity", "0.5") .call(d3.axisBottom(xScale).tickSize(-(height-marginTop-marginBottom)).ticks(width/60).tickSizeOuter(0).tickFormat("")); svg.append("g") .attr("stroke-width", "0.5") .style("stroke", "black") .style("font-size",12) .style("opacity", "1") .attr("transform", "translate(0," + (height - marginBottom) + ")") .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); // Add X axis label: svg.append("text") .attr("text-anchor", "end") .attr("font-size", 20) .attr("x", width / 2 + marginLeft) .attr("y", height + marginBottom/2) .style("fill", d3.color("grey")) .text("Year"); // Append Emissions Y axis on left svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .attr("class", "y axis emissions") .attr('stroke',"steelblue") .call(d3.axisLeft(yScaleEmissions)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "steelblue") .attr("text-anchor", "start") .text("Emissions (mT CO2)")); // Append Cost Y axis on right svg.append("g") //.attr("transform", `translate(${marginRight},0)`) .attr("class", "y axis cost") .attr('stroke',"darkgreen") .attr("transform", "translate(" + (width - marginRight) + ",0)") .call(d3.axisRight(yScaleCost)) .call(g => g.append("text") .attr("x", -marginRight) .attr("y", 10) .attr("fill", "darkgreen") .attr("text-anchor", "start") .text("Cost $/MWh")); // Append lines svg.append("path") .attr("fill","none") .attr("stroke","steelblue") .datum(data) .attr("class", "line emissions") .attr("d", lineEmissions); svg.append("path") .attr("fill","none") .attr("stroke","darkgreen") .datum(data) .attr("class", "line cost") .attr("d", lineCost); // Highlight selected year svg.append("line") .attr("class", "highlight-line") .attr("x1", xScale(highlightYear)) .attr("y1", marginTop) .attr("x2", xScale(highlightYear)) .attr("y2", height) .style("stroke", "red") .style("stroke-width", 2) .style("stroke-dasharray", "5,5"); // Call out values if (_mode === "Verbose") svg.append("text") .attr("Stroke","steelblue") .attr("font-size", 13) .attr("text-anchor", _year<2045 ? "start" : "end") .attr("x", _year<2045 ? xScale(_year)+5 : xScale(_year)-5) .attr("y", (data[_year-2021].Emissions/leftMax)+0.1 < convertCost((data[_year-2021].Cost,data[_year-2021].Consumption))/rightMax ? yScaleEmissions(data[_year-2021].Emissions) + 17.5 :yScaleEmissions(data[_year-2021].Emissions) - 7.5) .text(String(data[_year-2021].Emissions.toFixed(0))+"MT CO2"); if (_mode === "Verbose") svg.append("text") .attr("Stroke","darkgreen") .attr("font-size", 13) .attr("text-anchor", _year<2045 ? "start" : "end") .attr("x", _year<2045 ? xScale(_year)+5 : xScale(_year)-5) .attr("y", (data[_year-2021].Emissions/leftMax)+0.1 < convertCost((data[_year-2021].Cost,data[_year-2021].Consumption))/rightMax ? yScaleCost(convertCost(data[_year-2021].Cost,data[_year-2021].Consumption)) - 7.5 : yScaleCost(convertCost(data[_year-2021].Cost,data[_year-2021].Consumption)) + 17.5) .text("$"+String(convertCost(data[_year-2021].Cost,data[_year-2021].Consumption).toFixed(0))+"/MWh"); //console.log(xScale(_year)) return svg.node(); } 32:T839,function straightLine(d) { console.log('hello world') console.log(d) const startKnee = d.y0 <= _height/2 ? startKneeOffset + (d.source.y0-d.y0) + (_layerValEntry*((d.target.layer-d.source.layer)-1)) : startKneeOffset - (d.source.y0-d.y0) + (_layerValEntry*((d.target.layer-d.source.layer)-1)); // maybe fix some of this with a layer amount const endKnee = d.y1 <= _height/2 ? d.target.id === 'Rejected Energy' ? (endKneeOffset + (d.target.y0-d.y1)) + 50 + (_layerValExit*((d.target.layer-d.source.layer)-1)) : (endKneeOffset + (d.target.y0-d.y1)) + (_layerValExit*((d.target.layer-d.source.layer)-1)) : d.target.id === 'Energy Services' ? (endKneeOffset - (d.target.y0-d.y1)) - 50 + (_layerValExit*((d.target.layer-d.source.layer)-1)) : (endKneeOffset - (d.target.y0-d.y1)) + (_layerValExit*((d.target.layer-d.source.layer)-1)) //: d.target.id === 'Total Cost' // ? (endKneeOffset - (d.target.y0-d.y1)) - 50 + (_layerValExit*((d.target.layer-d.source.layer)-1)) // : (endKneeOffset - (d.target.y0-d.y1)) + (_layerValExit*((d.target.layer-d.source.layer)-1)) const returnArray = d.source.id in _nodeShift[0] ? ['M', d.source.x1, d.y0 - (d.source.y0 - _height*_nodeShift[0][d.source.id]), 'h', startKnee , 'C', // Two control points for the curve d.source.x1 + startKnee+ r, d.y0 -(d.source.y0 - _height*_nodeShift[0][d.source.id])] : ['M', d.source.x1, d.y0, 'h', startKnee , 'C', // Two control points for the curve d.source.x1 + startKnee+ r, d.y0] if(d.target.id in _nodeShift[0]){ return returnArray.concat([d.target.x0 - endKnee - r, d.y1- (d.target.y0 - _height*_nodeShift[0][d.target.id]), // Curve endpoint d.target.x0 - endKnee, d.y1- (d.target.y0 - _height*_nodeShift[0][d.target.id]), 'h', endKnee, ]).join(' ') } else{ return returnArray.concat([d.target.x0 - endKnee - r, d.y1, // Curve endpoint d.target.x0 - endKnee, d.y1, 'h', endKnee, ]).join(' ') } }33:T3c2e,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 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 = d3.sankeyLeft, // Sankey node alignment strategy: left, right, justify, center nodeWidth = _nodeWidth, // width of node rects nodePadding = _padding, // vertical separation between adjacent nodes nodeLabelPadding = 5, // 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 = straightLine, // given d in (computed) links, returns the SVG path # working on this linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = 'layered', //"#aaa", // source, target, source-target, or static color linkStrokeOpacity = linkOpacity/100, // link stroke opacity colors = colorScale, // array of colors width = _width, // outer width, in pixels height = _height, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 1, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 1, // left margin, in pixels } = {}) { // 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]})); // 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. const sankey = d3 .sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .nodeSort(null) .iterations(_itterations) .linkSort(linkSort) .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)}`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("fill", "none") .selectAll("g") .data(links.sort(drawSort)) .join("g") .attr("stroke-opacity", d => { if (d.value <= linkThreshold) return 0; return linkStrokeOpacity; }) //var totalNodes = _view === "Consumption" ? 16 : 17; var totalNodes = 16; link.append("path") .attr("d", linkPath) .attr("stroke", function(d) { if (linkColor === "layered") { // Use the color of the target node for the last two nodes if (d.target.index >= totalNodes - 2) { return color(G[d.target.index]); } else { // Use the color of the source node for other nodes return color(G[d.source.index]); } } else if (linkColor === "source-target") { return `url(#${uid}-link-${d.index})`; } else if (linkColor === "source") { return color(G[d.source.index]); } else if (linkColor === "target") { return color(G[d.target.index]); } else { // Handle other cases or default behavior here return linkColor; } }) .attr("stroke-width", ({width}) => Math.max(1, width)) .attr('stroke-linejoin', 'bevel') .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", 1) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr('y', d => d.id in _nodeShift[0] ? _height*_nodeShift[0][d.id] : d.y0) .attr("height", d => d.y1 - d.y0,30) .attr("width", d => d.x1 - d.x0); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const nodeVal = 20; const nodeValsm = 10; const Labels = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 + 34 + (d.layer * 2)) .attr("y", d => { if(_mode==='Verbose'){ if (d.id === 'Grid') return ((d.y1 - d.y0) / 2); else if (d.y1-d.y0 <= nodeValsm ) { if (["Coal","Biomass","Petroleum"].includes(d.id)) return d.y0 - 20; return d.y1 + 8; } else if (d.y1-d.y0 > nodeVal) return d.id in _nodeShift[0] ? ((d.y1 - d.y0) / 2) - 5 +_height*_nodeShift[0][d.id] : ((d.y1 + d.y0) / 2) - 5; return d.id in _nodeShift[0] ? ((d.y1 - d.y0) / 2) +_height*_nodeShift[0][d.id] : (d.y1 + d.y0) / 2; } else { if (d.y1-d.y0 <= nodeValsm ) { if (d.id === 'Solar') return d.y1 + 8; return d.id in _nodeShift[0] ? _height*_nodeShift[0][d.id] -8 : d.y0-8; } return d.id in _nodeShift[0] ? ((d.y1 - d.y0)/2) +_height*_nodeShift[0][d.id] : (d.y1 + d.y0) / 2; } }) .attr('fill', d => {if( d.value nodeValsm ) return 'white'; } return 'black'; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(({ index: i }) => Tl[i]); if (_mode === "Verbose") Labels.append("tspan") .attr("x", d => d.x0 + 34 + (d.layer * 2)) .attr("y", d => { if (d.y1-d.y0 <= nodeValsm ) { if (["Coal","Biomass","Petroleum"].includes(d.id)) return d.y0 - 8; return d.id in _nodeShift[0] ? (d.y1 - d.y0) +_height*_nodeShift[0][d.id] + 20 : d.y1 + 20; } else if(d.y1-d.y0 <= nodeVal){ if (["Coal","Biomass","Petroleum"].includes(d.id)) return d.y0 - 8; return d.id in _nodeShift[0] ? (d.y1 - d.y0) +_height*_nodeShift[0][d.id] +10 : d.y1 + 10; } if (d.id === 'Grid') return ((d.y1 - d.y0) / 2)+12; return d.id in _nodeShift[0] ? ((d.y1 - d.y0)/2) +_height*_nodeShift[0][d.id] + 6 : ((d.y1 + d.y0) / 2) + 6; }) .attr('fill', d => {if( d.value nodeValsm && _mode !== "Verbose") || (d.y1-d.y0 > nodeVal && _mode === "Verbose")) return 'white'; } return 'black'; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => _view === "Consumption" ? String(d.value.toFixed(2)) + " Quads" : _view === "Emissions" ? String(d.value.toFixed(2)) + " Mt CO2" : "$"+String(d.value.toFixed(2)) + "B"); const linkVal = 10; if (_mode === "Verbose") svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(links) .join("text") //X shift data .attr("x", d => { /// for some reason this if isnt triggering if (["Rejected Energy","Energy Services","Total Emissions","Total Cost"].includes(d.target.id)) { return d.source.id === "Grid"? ((d.target.x0 - d.source.x1 )/2) + d.source.x1 : d.source.x1+16} else if (d.width > linkVal ) return d.target.x0 - 16; else if (["Residential","Commercial","Industrial","Transportation"].includes(d.target.id) && ["Grid","Petroleum"].includes(d.source.id)) return d.target.x0 - 15; else if (["Nuclear","Hydro","Wind"].includes(d.source.id)) return d.source.x1 + 12; else if (d.source.id === "Geothermal"){ if (d.y0 <= _height/2) return startKneeOffset + (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+50; return startKneeOffset - (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+50;} else if (d.source.id === "Solar"){ return startKneeOffset - (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+100;} else if (d.source.id === "Natural Gas"){ if (d.y0 <= _height/2) return startKneeOffset + (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+105; return startKneeOffset - (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+105;} else if (d.y0 <= _height/2) return startKneeOffset + (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+85; return startKneeOffset - (d.source.y0-d.y0) + ((3/2)*(_layerValEntry*((d.target.layer-d.source.layer)-1)))+85;}) //Y shift Data .attr("y", d => {if (d.width > linkVal) { if (d.target.id in _nodeShift[0] && d.source.id in _nodeShift[0]){ if(d.source.id === "Grid"){ return d.target.id === "Rejected Energy" ? ((d.y1 - d.target.y0 + _height*_nodeShift[0][d.target.id]) + (d.y0 - d.source.y0))/2 +10 : (d.y1 - d.target.y0 + _height*_nodeShift[0][d.target.id]) } else { return d.y0 - d.source.y0 + _height*_nodeShift[0][d.source.id]; } } if (d.source.id === "Petroleum") return d.y1 - d.target.y0 + _height*_nodeShift[0][d.target.id]; if (!(d.source.id in _nodeShift[0])) return d.y1-d.target.y0 + _height*_nodeShift[0][d.target.id]; } else if (d.source.id === "Hydro" || d.source.id === "Wind") return d.y0 - 8; else if (["Residential","Commercial","Industrial","Transportation"].includes(d.target.id) && ["Grid","Petroleum"].includes(d.source.id)) { if (d.source.id === "Grid" ) return d.y1-d.target.y0+_height*_nodeShift[0][d.target.id] - 7; if (d.source.id === "Petroleum") return d.y1 - d.target.y0 + _height*_nodeShift[0][d.target.id] + 7; } else if (d.target.id === "Rejected Energy") return d.y0-d.source.y0+_height*_nodeShift[0][d.source.id] - 10; else if (d.target.id === "Energy Services") return d.y0-d.source.y0+_height*_nodeShift[0][d.source.id] + 10; else if (d.target.id === "Grid") {if (d.y0 <= _height/2) if(d.y0 <10) return d.y0 + 10; return d.y0 - 14; if(d.y0>(_height-10)) return d.y0 - 14; return d.y0 + 10;} else if (d.source.id === "Natural Gas"){ if (d.y1 <= _height/2) if (d.y0 <= height/2) return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.15)+d.y0; return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.15)+d.y0 - 10; return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.6)+d.y0 + 25;} else if (d.source.id === "Solar"){ return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.2)+d.y0 -25;} else if (d.source.id === "Geothermal"){ if (d.y1 <= _height/2) return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.7)+d.y0 - 3; return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.7)+d.y0 + 7; } else if (d.y1 <= _height/2) return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.75)+d.y0 - 10; return ((d.y1-d.target.y0+_height*_nodeShift[0][d.target.id]-d.y0)/1.75)+d.y0 + 10;}) .attr('fill', d => {if(d.value > linkThreshold) { if(d.source.id === "Grid" && ["Rejected Energy","Total Cost","Total Emissions"].includes(d.target.id)) return "black"; if (d.width > linkVal) {if (["Solar","Rejected Energy","Energy Services","Total Cost","Total Emissions"].includes(d.source.id)) return "black"; return "white";} else if (["Coal","Solar","Rejected Energy","Energy Services","Total Cost","Total Emissions"].includes(d.source.id)) return "black"; else if (d.target.index >= totalNodes - 2) { return color(G[d.target.index]); } else { // Use the color of the source node for other nodes return color(G[d.source.index]); } } return "none"; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => String(d.value.toFixed(2))); var boxWidth = 220; var boxHeight = 50; var margin = 15; var boxX = width - boxWidth - margin; var boxY = margin; // Append a group for the box var boxGroup = svg.append("g") .attr("transform", "translate(" + boxX + "," + boxY + ")"); // Append rectangle for the box boxGroup.append("rect") .attr("width", boxWidth) .attr("height", boxHeight) .attr("fill", "lightblue") .attr("stroke", "black"); // Append text elements boxGroup.selectAll("text") .data(_summaryText) .enter() .append("text") .attr("x", boxWidth / 2) .attr("y", function(d, i) { return (i + 1) * 20; }) // Adjust spacing .attr("text-anchor", "middle") .text(function(d) { return d; }); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), {scales: {color}}); }34:[] 2f:{"id":"914889761fddaafe","slug":null,"title":"Sankey Test with Labels new Nosterra data and line chart","thumbnail":"87c1b407ec76445917b038a49d3f305c2504fe79e0c2a20a9ee518f541ab50f4","access_level":"public","create_time":"$D2024-02-28T00:12:05.496Z","update_time":"$D2024-04-09T20:55:04.923Z","view_time":null,"first_public_time":"$D2024-02-28T23:14:41.785Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","tier":"starter_2024","bio":""},"version":1395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"bio":""}],"members":[{"type":"individual","id":"be1fa205e6547a94","login":"bill-white","name":"Bill White","avatar_url":"https://avatars-next.observableusercontent.com/183c0626578de99f9801435b3f6187e7e619f85385ff09369122803174853794","tier":null,"role":"editor"},{"type":"team","id":"9f19e48362eaf88f","login":"bill-white-ws","name":"Bill White's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/76e03ecc8b6a89e9745443e702bac1ee1256915d1fc340d769c749ced0f4df45","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey Test with Labels new Nosterra data and line chart","cells":[{"id":0,"value":"# Sankey Test with Labels new Nosterra data and line chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"d3Fetch = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"d3Sankey = require.alias({\n \"d3-array\": \"d3@7\",\n \"d3-shape\": \"d3@7\",\n \"d3-sankey\": \"d3-sankey@0.12\"\n})(\"d3-sankey\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"url = 'https://sankeydata.s3.amazonaws.com/scen_' + String(parseInt(_scen.val)) + '/' + _year + '/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"_linkData = d3Fetch.json(url + _view + '/links.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"_nodeData = d3Fetch.json(url+_view+'/nodes.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"_summaryData = d3Fetch.json(url.slice(0, -5) + 'ScenarioSummaryTotals.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"_summaryText = _view === \"Consumption\"\n ? [\"Emissions: \"+String(_summaryData['data'][_year-2021]['Emissions'])+' Mt C02',\"Total Cost: $\"+String(_summaryData['data'][_year-2021]['Cost'])+'B']\n : _view === \"Emissions\"\n ? [\"Energy consumed: \"+ String(_summaryData['data'][_year-2021]['Consumption'])+' Quads',\"Total Cost: $\"+String(_summaryData['data'][_year-2021]['Cost'])+'B']\n : [\"Energy consumed: \"+String(_summaryData['data'][_year-2021]['Consumption'])+' Quads',\"Emissions: \"+String(_summaryData['data'][_year-2021]['Emissions'])+' Mt C02']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"colorScale = {\n var colorScale = [];\n for (let i = 0; i < _nodeData.data.length; i++) {\n colorScale.push(_nodeData.data[i].Color);\n }\n return colorScale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"viewof _height = Inputs.range([200, 1600], {label: \"chart height\", step: 1, value: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"viewof _width = Inputs.range([800, 1600], {label: \"chart width\", step: 1, value: 1200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"viewof _itterations = Inputs.range([0, 100000], {label: \"Node Fitting Itterations\", step: 10, value: 120})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":" viewof startKneeOffset = Inputs.range([0, 400], {label: \"Start knee\", step: 1, value:90})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"viewof _layerValEntry = Inputs.range([0, 400], {label: \"layer offset start\", step: 1, value: 190})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof _layerValExit = Inputs.range([0, 400], {label: \"layer offset end\", step: 1, value: 95})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof endKneeOffset = Inputs.range([13, 250], {label: \"End knee\", step: 1, value: 115})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof r = Inputs.range([0, 75], {label: \"Smoothing\", step: 1, value: 55})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"viewof _nodeWidth = Inputs.range([0, 200], {label: \"width\", step: 1, value: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"viewof linkOpacity = Inputs.range([0, 100], {label: \"opacity\", step: 1, value: 97})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"viewof _padding = Inputs.range([0, 50], {label: \"node padding\", step: 1, value: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"viewof linkThreshold = Inputs.range([0, 3], {label: \"Link Threshold\", step: .02, value: 0.02})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"_nodeShift = [{\n 'Grid': 0.0,\n 'Residential': 0.5,\n 'Commercial': 0.6,\n 'Industrial': 0.7,\n 'Transportation': 0.85,\n 'Rejected Energy': 0.35,\n 'Energy Services': 0.7,\n 'Total Emissions': 0.3,\n 'Total Cost': 0.3\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"scenarios = [\n {desc: \"Baseline : low demand growth : no renewable growth : 90% land tranport electrification\",val: \"181\"}, \n {desc: \"Coal converted to Natural Gas\",val: \"182\"}, \n {desc: \"Coal converted to NG : growth of Solar and Wind\",val: \"183\"},\n {desc: \"Coal converted to NG : Electrify Everything\",val: \"184\"},\n {desc: \"Coal converted to NG : Electrify Everything : Cost optimal Solar + Wind\",val: \"185\"},\n {desc: \"Coal converted to NG : Electrify Everything : Emissions optimal Solar + Wind + Storage\",val: \"186\"},\n {desc: \"Coal converted to NG : Electrify Everything : Cost optimal Solar + Wind + Geothermal\",val: \"187\"},\n {desc: \"Increased Demand : Coal Converted to NG : Electrify Everything : Cost optimal Solar + Wind\",val: \"188\"},\n {desc: \"Increased Demand : Coal Converted to NG : Electrify Everything : Emissions optimal Solar + Wind + Storage\",val: \"189\"},\n {desc: \"Increased Demand : Coal Converted to NG : Electrify Everything : Cost optimal Solar + Wind + Geothermal\",val: \"190\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"viewof _scen = Inputs.select(scenarios, {label: \"Scenario\",format:x=>x.desc})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"viewof _mode = Inputs.select(['Graphical','Verbose'], {label: \"mode\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"viewof _view = Inputs.select(['Consumption','Emissions','Cost of Energy'], {label: \"view\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viewof _year = Inputs.range([2021, 2050], {label: \"Year\", step: 1, value: 2022})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"chart = SankeyChart({\n nodes: _nodeData.data,\n links: _linkData.data\n}, {\n nodeGroup: d => d.id.split(/\\W/)[0],\n format: (f => d => `${f(d)} Quads`)(d3.format(\",.1~f\")),\n width: _width,\n height: _height\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"lines = LineChart(restructuredData, _year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"restructuredData = _summaryData.data.map(function(item) {\n return {\n Year: item.Year,\n Emissions: item.Emissions,\n Cost: item.Cost,\n Consumption: item.Consumption\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"linkSort = (a, b) => {\n function targetIndex(target) {\n // Force grid to be sorted as first\n if (target === \"Grid\") return -1\n return _nodeData.data.findIndex(node => node.id === target)\n }\n if (a.source === b.source) {\n return targetIndex(a.target.id) - targetIndex(b.target.id)\n }\n if (a.target === b.target) {\n return targetIndex(a.source.id) - targetIndex(b.source.id)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"drawSort = (a, b) => {\n if (a.target.id === \"Rejected Energy\" && a.source.id === \"Grid\")\n return 0;\n if (b.target.id === \"Rejected Energy\" && b.source.id === \"Grid\")\n return 0;\n if (a.target.id === \"Rejected Energy\" || a.source.id === \"Grid\")\n return -1;\n if (b.target.id === \"Rejected Energy\" || b.source.id === \"Grid\")\n return 1;\n if (a.target.id === \"Energy Services\")\n return 1\n if (b.target.id === \"Energy Services\")\n return -1\n if (a.source.id === \"Natural Gas\")\n return 1;\n if (b.source.id === \"Natural Gas\")\n return-1;\n else\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"