Sankey diagram / s_25_domination

s_25_domination

Workspace

Public

Edited

Feb 24

Fork of Sankey diagram

Dashboard2 = html`

${chart}

</div>

${viewof woodrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((woodrem/1575)*co2[3].difference),2)}

</div>

${viewof radrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((radrem/1575)*co2[3].difference),2)}

</div>

${viewof plasrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((plasrem/1575)*co2[3].difference),2)}

</div>

${viewof drywallrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((drywallrem/1575)*co2[3].difference),2)}

</div>

${viewof glframerem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((glframerem/1575)*co2[3].difference),2)}

</div>

${viewof glglassrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((glglassrem/1575)*co2[3].difference),2)}

</div>

${viewof doorframesrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((doorframesrem/1575)*co2[3].difference),2)}

</div>

${viewof doorsrem}

</div>

embodied pounds of co2 ${Math.round(co2[3].goodtotal+((doorsrem/1575)*co2[3].difference),2)}

</div>

Materials To Landfill (lbs)

</div>

viewof doorsrem = Inputs.range([0, 9790], {step: 10, value : 0, label : "Doors"})

viewof doorframesrem = Inputs.range([0, 9790], {step: 10, value : 0, label : "Door Frames"})

viewof glglassrem = Inputs.range([0, 1610], {step: 10, value : 0, label : "Glazing Glass"})

viewof glframerem = Inputs.range([0, 6860], {step: 10, value : 0, label : "Glazing Frames"})

viewof drywallrem = Inputs.range([0, 4452], {step: 5, value : 0, label : "Drywall"})

viewof plasrem = Inputs.range([0, 11280], {step: 10, value : 0, label : "Plaster"})

viewof radrem = Inputs.range([0, 12600], {step: 50, value : 0, label : "Radiators"})

viewof woodrem = Inputs.range([0, 1575], {step: 5, value : 0, label : "Timber"})

viewof removal = Inputs.range([0, 57957], {step: 50, value : 0, label : "DivertedRemoval"})

chart = {

// Specify the dimensions of the chart.

const width = 1600;

const height = 900;

const format = d3.format(",.0f");

// Create a 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; font: 10px sans-serif;");

// Constructs and configures a Sankey generator.

const sankey = d3.sankey()

.nodeId(d => d.name)

.nodeAlign(d3[nodeAlign]) // d3.sankeyLeft, etc.

.nodeWidth(15)

.nodePadding(10)

.extent([[1, 5], [width - 1, height - 5]]);

// Applies it to the data. We make a copy of the nodes and links objects

// so as to avoid mutating the original.

const {nodes, links} = sankey({

nodes: data.nodes.map(d => Object.assign({}, d)),

links: data.links.map(d => Object.assign({}, d))

});

// Defines a color scale.

//const color = d3.schemeBuPu;

const color = d3.scaleOrdinal(["#fff7ec","#feebcf","#fddcaf","#fdca94","#fdb07a","#fa8e5d","#f16c49","#e04530","#c81d13","#a70403","#7f0000"]);

//const color = ["#fff5f0","#fee3d6","#fdc9b4","#fcaa8e","#fc8a6b","#f9694c","#ef4533","#d92723","#bb151a","#970b13","#67000d"]

// Creates the rects that represent the nodes.

const rect = svg.append("g")

.attr("stroke", "#000")

.selectAll()

.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)

.attr("fill", d => color(d.category));

// Adds a title on the nodes.

rect.append("title")

.text(d => `${d.name}\n${format(d.value)} TWh`);

// Creates the paths that represent the links.

const link = svg.append("g")

.attr("fill", "none")

.attr("stroke-opacity", 0.5)

.selectAll()

.data(links)

.join("g")

.style("mix-blend-mode", "multiply");

// Creates a gradient, if necessary, for the source-target color option.

if (linkColor === "source-target") {

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 => color(d.source.category));

gradient.append("stop")

.attr("offset", "100%")

.attr("stop-color", d => color(d.target.category));

}

link.append("path")

.attr("d", d3.sankeyLinkHorizontal())

.attr("stroke", linkColor === "source-target" ? (d) => d.uid

: linkColor === "source" ? (d) => color(d.source.category)

: linkColor === "target" ? (d) => color(d.target.category)

: linkColor)

.attr("stroke-width", d => Math.max(1, d.width));

link.append("title")

.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} TWh`);

// Adds labels on the nodes.

svg.append("g")

.selectAll()

.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)

.attr("dy", "0.35em")

.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")

.text(d => d.name);

return svg.node();

}

co2 = FileAttachment("MATERIAL_LCA - Sheet1@1.csv").csv({typed: true});

links = FileAttachment("S25_AD6_SANKEY_Midtown - Copy of SANKEY.csv").csv({typed: true});

tweakedData = {

var originalData = links

var removalTotal = 57957

var removal = woodrem + radrem + plasrem + drywallrem + glframerem + glglassrem + doorframesrem + doorsrem

originalData[52].value = removal

//say reusing is removalTotal - slidervalue , times .77

originalData[51].value = (removalTotal - removal)*.7

originalData[50].value = (removalTotal - removal)*.3

return originalData

}

Type Table, then Shift-Enter. Ctrl-space for more options.

data = {//good job turning the numbers into strings

const links = tweakedData

const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, "")}));

return {nodes, links};

}

// [d3-sankey](https://github.com/d3/d3-sankey) is not part of the D3 bundle

d3 = require("d3@7", "d3-sankey@0.12")

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more