chart = { const width = 960; const height = 800; const margin = {top: 40, right: 25, bottom: 30, left: 40}; const svg = d3.select(DOM.svg(width, height)); const initial = "base"; const yUnit = unitSelection.unit === "IP" ? "kBtu/hr": "kW"; const xUnit = unitSelection.unit === "IP" ? "F": "C"; const color = (val) => val < (target + 10) ? lowColor: highColor; const xtick = d => d3.format("d")(c_f(d)); const tooltip = d3.select("body").append("div") .attr("class", "tooltip2") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = d => ` Third Quartile: ${_.round(d[2], 2)} ${yUnit}
Median: ${_.round(d[1], 2)} ${yUnit}
First Quartile: ${_.round(d[0], 2)} ${yUnit}
${_.round((8760 - d[5]) / 8760 * 100, 2)}% of year` const x = d3.scaleLinear() .domain(d3.extent(data.bins.flat())) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.get("base")[2]) + kw_kbtu(100)]).nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickValues(data.bins.map(d => d[0])).tickFormat(xtick)) .call(g => g.select(".tick:last-of-type text") .text("") .attr("x", -6) .attr("text-anchor", "start") .attr("font-weight", "bold") .html(d => `${_.round(c_f(d))} °${xUnit} OA`)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "8px") .text(`Heating Load ${yUnit}`)); const baseDots = svg.selectAll("g") .data(data); const baseLow = baseDots.join("circle") .attr("fill", "#e5e2e0") .attr("opacity", 0.6) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get("base")[3])); const baseHigh = baseDots.join("circle") .attr("fill", "#e5e2e0") .attr("opacity", 0.6) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get("base")[4])); const baseBar = svg.append("g") .attr("fill", "#e5e2e0") .style("mix-blend-mode", "multiply") .attr("opacity", 0.6) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get("base")[2])) .attr("height", d => (y(d.get("base")[0]) - y(d.get("base")[2]))); const baseMedian = svg.append("g") .attr("stroke", "#ffffff") .attr("stroke-width", 2) .attr("opacity", 0.8) .selectAll("line") .data(data) .join("line") .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get("base")[1])) .attr("y2", d => y(d.get("base")[1])); svg.append("line") .attr("stroke", lowColor) .attr("mix-blend-mode", "multiply") .attr("stroke-opacity", .7) .attr("stroke-width", 2) .attr("shape-rendering", "crispEdges") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(target)) .attr("y2", y(target)); svg.append("text") .attr("x", width - margin.right) .attr("fill", lowColor) .attr("y", y(target) + 2) .attr("text-anchor", "end") .attr("fill-opacity", .7) .style("font-family", "sans-serif") .style("font-size", 12) .style("font-weight", "bold") .style("paint-order", "stroke") .style("stroke", "#ffffff") .style("stroke-width", "15px") .text("Target Load Range"); const legend = svg => { const g = svg .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "end") .attr("transform", `translate(${width - margin.right},${margin.top})`); g.selectAll("circle") .data([0, 100]) .join("circle") .attr("fill", "#e5e2e0") .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", -7) .attr("cy", String); g.selectAll(".ticks") .data([0, 25, 50, 75, 100, 150, 175]) .join("line") .attr("class", "ticks") .attr("stroke", "#e5e2e0") .attr("opacity", 0.8) .attr("stroke-weight", 1) .attr("shape-rendering", "crispEdges") .attr("x1", -30) .attr("x2", -20) .attr("y1", String) .attr("y2", String); g.append("rect") .attr("x", -14) .attr("y", 25) .attr("width", 14) .attr("height", 50) .attr("fill", "#e5e2e0"); g.append("line") .attr("x1", -14) .attr("x2", 14) .attr("y1", 50) .attr("y2", 50) .attr("stroke-width", 2) .attr("stroke", "#ffffff"); g.selectAll(".labels") .data(["Maximum", "75th Percentile", "Median", "25th Percentile", "Minimum"]) .join("text") .attr("text-anchor", "end") .attr("x", -40) .attr("y", (d, i) => i * 25) .attr("dy", "0.35em") .text(String); const c = g.selectAll(".colors").data(["Outside of target range", "Within target range"]) c.join("rect") .attr("x", -14) .attr("y", (d, i) => i * 25 + 143) .attr("width", 14) .attr("height", 14) .attr("fill", (d, i) => [highColor, lowColor][i]); c.join("text") .attr("text-anchor", "end") .attr("x", -40) .attr("y", (d, i) => i * 25 + 150) .attr("dy", "0.35em") .text(String); } const dots = svg.selectAll("g .extremes") .data(data); const low = dots.join("circle") .attr("fill", d => color(d.get(initial)[3])) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(initial)[3])); const high = dots.join("circle") .attr("fill", d => color(d.get(initial)[4])) .attr("stroke", "#ffffff") .attr("stroke-weight", 2) .attr("r", 4) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(initial)[4])); const bar = svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", d => color(d.get(initial)[1])) .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get(initial)[2])) .attr("height", d => (y(d.get(initial)[0]) - y(d.get(initial)[2]))) .on("mouseover", function(d) { tooltip.style("display", null); d3.select(this) .attr("fill", chroma(color(d.get(initial)[1])).darken().hex()); tooltip.html(tipContent(d.get(initial))) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", color(d.get(initial)[1])); tooltip.style("display", "none"); }); const median = svg.append("g") .attr("stroke", "#ffffff") .attr("stroke-width", 2) .attr("opacity", 0.8) .selectAll("line") .data(data) .join("line") .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get(initial)[1])) .attr("y2", d => y(d.get(initial)[1])); function transitionStacked(eem) { bar.on("mouseover", function(d) { tooltip.style("display", null); d3.select(this) .attr("fill", chroma(color(d.get(eem)[1])).darken().hex()); tooltip.html(tipContent(d.get(eem))) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", color(d.get(eem)[1])); tooltip.style("display", "none"); });; bar.transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(data.bins[i][0]) + 2) .attr("width", (d, i) => Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y", d => y(d.get(eem)[2])) .attr("height", d => (y(d.get(eem)[0]) - y(d.get(eem)[2]))) .attr("fill", d => color(d.get(eem)[1])); median.transition() .duration(500) .delay((d, i) => i * 20) .attr("x1", (d, i) => x(data.bins[i][0]) + 2) .attr("x2", (d, i) => x(data.bins[i][0]) + 2 + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)) .attr("y1", d => y(d.get(eem)[1])) .attr("y2", d => y(d.get(eem)[1])); high.transition() .duration(500) .delay((d, i) => i * 20) .attr("fill", d => color(d.get(eem)[4])) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(eem)[4])); low.transition() .duration(500) .delay((d, i) => i * 20) .attr("fill", d => color(d.get(eem)[3])) .attr("cx", (d, i) => x(data.bins[i][0]) + Math.max(0, x(data.bins[i][1]) - x(data.bins[i][0]) - 2)/2 + 2) .attr("cy", d => y(d.get(eem)[3])); } function update(eem) { transitionStacked(eem); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(legend); svg.selectAll("text").attr("font-size", "12px") return Object.assign(svg.node(), {update}); }