2a:T172e,chart = { const width = 960; const height = 500; const svg = d3.select(DOM.svg(width, height)).property("value", []);//.attr("view", []); const margin1 = {top: 20, right: 20, bottom: 110, left: 40}; const margin2 = {top: 430, right: 20, bottom: 30, left: 40}; const chart_width = width - margin1.left - margin1.right; const chart_height = height - margin1.top - margin1.bottom; const context_height = height - margin2.top - margin2.bottom; const x = d3.scaleLinear().range([0, chart_width]); const x2 = d3.scaleLinear().range([0, chart_width]); const y = d3.scaleLinear().range([chart_height, 0]); const y2 = d3.scaleLinear().range([context_height, 0]); const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); const yAxis = g => g .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Peak Day Demand (Kilowatts)")); const brush = d3.brushX() .extent([[0, 0], [chart_width, context_height]]) .on("brush end", brushed); const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart_width, chart_height]]) .extent([[0, 0], [chart_width, chart_height]]) .on("zoom", zoomed); const area1 = d3.area() // .x(d => x(d.data.date)) .curve(d3.curveMonotoneX) .x(d => x(d.data.index)) .y0(d => y(d[0])) .y1(d => y(d[1])); // const area2 = d3.area() // // .x(d => x(d.data.date)) // .curve(d3.curveMonotoneX) // .x(d => x(d.data.index)) // .y0(d => y(d[0])) // .y1(d => y(d[1])); const area3 = d3.area() // .x(d => x2(d.date)) .curve(d3.curveMonotoneX) .x(d => x2(d.index)) .y0(d => y2(0)) .y1(d => y2(d.currentProfile)); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); const focus = svg.append("g") .attr("class", "focus") .attr("transform", `translate(${margin1.left},${margin1.top})`); const context = svg.append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); svg.append("rect") .attr("class", "zoom") .attr("width", chart_width) .attr("height", chart_height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")") .call(zoom); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert), x2); focus.selectAll(".area").attr("d", area1); // focus.select(".demandLine").attr("d", line); focus.select(".axis--x").call(xAxis); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(chart_width / (s[1] - s[0])) .translate(-s[0], 0)); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); value = x.domain(); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area1); // focus.select(".demandLine").attr("d", line); focus.select(".axis--x").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); } const stacked = Object.assign(d3.stack().keys(demandKeys)(demandPeaks), { keys: demandKeys }); const formatHour = d3.timeFormat("%I %p"); const formatMonth = d3.timeFormat("%B"); const months = _.range(12).map((d, i) => i*24); //convert indices to months xAxis2.tickValues(months).tickFormat(i => formatMonth(new Date(2018, demandPeaks[i].month-1, 1, 0))); xAxis.tickFormat(i => formatHour(new Date(2018, demandPeaks[i].month, demandPeaks[i].day, demandPeaks[i].hour))); // x.domain(d3.extent(data, function(d) { return d.date; })); // x2.domain(d3.extent(data, function(d) { return d.date; })); x.domain(d3.extent(demandPeaks, function(d) { return d.index; })); x2.domain(d3.extent(demandPeaks, function(d) { return d.index; })); // y.domain([0, d3.max(stacked.flat(2))]).nice(); y.domain([0, 8000]).nice(); y2.domain([0, d3.max(demandPeaks, function(d) { return d.currentProfile; })]); focus.selectAll("path") .data(stacked) .enter().append("path") .attr("class", "area") .attr("clip-path", "url(#clip)") .attr("fill", (d, i) => color(stacked.keys[i])) .attr("d", area1) // focus.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke-width", 1.5) // .attr("stroke", "#2171b5") // .attr("class", "demandLine") // .attr("clip-path", "url(#clip)") // .attr("d", line); focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + chart_height + ")") .call(xAxis); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); context.append("path") .datum(demandPeaks) .attr("class", "area") .attr("fill", "#3182bd") .attr("clip-path", "url(#clip)") .attr("d", area3); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); //this is the value of the previous svg node if (!this) { context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, x.range()); } else { let range = d3.select(this).property("value").map(x); context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, range); } return svg.node(); }2b:T4ea,profileData = { let raw = (await d3.csv(`https://www.elementa.nyc/projects/williams-college/data/demand_data.csv?version=${Math.floor(Math.random() * 1000)}`, function(d) { return { month: +d.Month, day: +d.Day, hour: +d.Hour, "Cogen": +d["Cogen"], "Main Meter": +d["Main Meter"], "90 Buildings": +d["90 Buildings"], "Other Buildings": +d["Other Buildings"], "Chiller": +d["Chiller"], "Biomass": +d["Biomass"], "GHX Only": +d["GHX Only"], "Hybrid": +d["Hybrid"], "Hybrid Reduc": +d["Hybrid Reduc"], currentProfile: +d["Cogen"] + +d["Main Meter"] + +d["Other Buildings"] - +d["Chiller"], futureProfile: +d[`${scenario.value}`], peakProfile: +d["Cogen"] + +d["Main Meter"] + +d["Other Buildings"] - +d["Chiller"] + +d[`${scenario.value}`] } }) ); const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] const times = []; for (const m in _.range(12)) { for (const d in _.range(months[m])) { for (const h in _.range(24)) { times.push({month: +m + 1, day: +d + 1, hour: +h}); } } } raw.map((d, i, arr) => { arr[i] = {...d, ...times[i]}; }); return raw; } 2c:T5b8,demandPeaks = { const nested = d3.nest() .key(d => d.month) .entries(profileData) .map((d) => { let month = +d.key; let day = +d.values.reduce((a, b) => { return (a.peakProfile || 0) > b.peakProfile ? a : b; }, {}).day; // let totals = groupSum(d.values, d => d.day, d => d.currentProfile); let totalGroups = _.groupBy(d.values, d=> d.day); totalGroups = Object.entries(totalGroups).map(d => [d[0], _.sumBy(d[1], d=> d.currentProfile)]); const totals = new Map(); for (let [key, value] of totalGroups) { totals.set(+key, value); } console.log(month, day); // let totals = new Map(); // for (let p of d.values) { // totals.set(p.day, totals.get(p.day) ? p.day + p.currentProfile: p.currentProfile); // } let target = _.sumBy(Array.from(totals), d => d[1]) / totals.size; // let closest = Array.from(totals).reduce(function(prev, curr) { // return (Math.abs(curr[1] - target) < Math.abs(prev[1] - target) ? curr : prev); // })[0]; // let day = closest; let values = profileData.filter(dd => (dd.month === month && dd.day === day)); return {month: month, day: day, values: values}; }); let peaks = [].concat(...nested.map(d => d.values)); peaks.map((d, i, arr) => { arr[i] = {...d, index: i}; }); return peaks; }2d:[] 29:{"title":"Williams College Zero Carbon Plan","cells":[{"id":0,"value":"md`# Williams College Zero Carbon Plan\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof scenario = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"legend = {\n \n const key_map = {\n\n \"currentProfile\": \"Current Campus Electric Demand (Non-Thermal)\",\n \"futureProfile\": labelName(`${scenario.value}`)\n\n }\n \n const svg = d3.select(DOM.svg(960, color.domain().length * 24))\n .style(\"font\", \"11px sans-serif\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24})`);\n\n g.append(\"rect\")\n .attr(\"width\", 20)\n .attr(\"height\",20)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => key_map[d]);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"labelName = {\n \n const lookup = {\n \"Main Meter\": \"Main Meter\",\n \"90 Buildings\": \"90% Buildings\",\n \"Other Buildings\": \"Other Buildings\",\n \"Cogen\": \"Cogeneration Plant\",\n \"Chiller\": \"Current Campus Chiller\",\n \"Biomass\": \"Future Biomass\",\n \"GHX Only\": \"Future Ground-coupled Heat Exchanger\",\n \"Hybrid\": \"Future Hybrid\",\n \"Hybrid Reduc\": \"Future Hybrid (Reduc)\",\n \n }\n\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"demandKeys = [\"currentProfile\", \"futureProfile\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"raw = {\n let raw = (await d3.csv(`https://www.elementa.nyc/projects/williams-college/data/renewables_data.csv?version=${Math.floor(Math.random() * 1000)}`, function(d) {\n\n \n return {\n month: +d.Month,\n day: +d.Day,\n hour: +d.Hour,\n pv_potential: +d[\"PV Potential\"],\n project_demand: +d[\"Project Electricity kWh\"]\n }\n })\n );\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n for (const m in _.range(12)) {\n for (const d in _.range(months[m])) {\n for (const h in _.range(24)) {\n times.push({month: +m + 1, day: +d + 1, hour: +h});\n }\n }\n }\n \n raw.map((d, i, arr) => {\n arr[i] = {...d, ...times[i]};\n });\n \n return raw;\n\n } \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"color = d3.scaleOrdinal()\n .range([\"#3182bd\", \"#6baed6\", \"#9ecae1\", \"#c6dbef\"])\n .domain(demandKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"parse_date = d3.timeParse(\"%m %d %H\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import {nest} from \"@mbostock/nested-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}