2a:T1285,characterization = { const config = { height: 520, width: 960, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; const node = svg.selectAll("g") .data(graph.nodes) .enter().append("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("display", d => d.name === "Nothing" ? "none" : null) .attr("stroke", "#000") .append("title") .html(d => `${d.name}\n${eui(d.value)} ${config.label}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .attr('font-size', 10) .html(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { case "Natural Gas": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(eui(d.value), 0)} ${config.label}`; // case "Heating Load": // let source = d.targetLinks.filter(dd => dd.source.name === "Heating System"); // return `Heating TEDI: ${_.round(eui(source[0].value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply") .attr("id", d => d.source.name.replace(" ", "_") + "_" + d.target.name.replace(" ", "_")); //apply gradients based on input and output 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.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("display", d=> d.target.name === "Nothing" ? "none": null) .attr("opacity", d => d.value < 0.02 ? 0 : 1) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .html(d => `${d.source.name} → ${d.target.name}\n${eui(d.value)} ${config.label}`); function dragStart (d) { if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > config.width) { d.x0 = config.width - nodeWidth; d.x1 = config.width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > config.height) { d.y0 = config.height - (d.__y1 - d.__y0); d.y1 = config.height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }2b:T237a,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:20, bottom: 30, left: 35}, cols: 3, format: { "Wall R": { newName: "Wall R (BTU/h.F.ft2)", ticks: d3.format(".0f"), selection: [356, 431]}, "Window U": { newName: "Window U (h.F.ft2/BTU)", ticks: d3.format(".2f"), selection: [0, 75], ticks: d => d3.format(".2f")(d),}, "Roof R": { newName: "Roof R (BTU/h.F.ft2)", ticks: d3.format(".0f"), selection: [356, 431]}, "South WWR": { newName: "South WWR", ticks: d => d3.format(",.0%")(d)}, "East WWR": { newName: "East WWR", ticks: d => d3.format(",.0%")(d)}, "West WWR": { newName: "West WWR", ticks: d => d3.format(",.0%")(d)}, "South Shades": { newName: "South Shade Cutoff Angle °", ticks: d => d3.format(",.0f")(d)}, "East Shades": { newName: "East Shade Cutoff Angle °", ticks: d => d3.format(",.0f")(d)}, "West Shades": { newName: "West Shade Cutoff Angle °", ticks: d => d3.format(",.0f")(d)}}, units: unitSelection.unit, } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .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", "11px") .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 = (variable, p_value, PCLR) => ` ${variable}: ${p_value}
Peak Cooling Load Reduction: ${PCLR}` //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => p.PCLR)).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]){ name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(7)) .call(g => g.select(".domain").remove()); } } //put the y axis label in the top left corner of the first row/col. if (i%3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html("Peak Cooling Load Reduction %"); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(dd.PCLR)) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(dd.PCLR); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(dd.PCLR); }) .attr("r",3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(dd.PCLR); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(tipContent(d.variable, data ,dd.PCLR)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }2c:T1c9f,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 20, bottom: 10, left: 60}, format: { "South WWR": { newName: "South WWR %", ticks: d3.format(".0%"), selection: [250, 325]}, "East WWR": { newName: "East WWR %", ticks: d3.format(".0%"), selection: [250, 325]}, "West WWR": { newName: "West WWR %", ticks: d3.format(".0%"), selection: [250, 325]}, "S Shade Cutoff": { newName: "S Shade Cutoff Angle °", ticks: d3.format(".0f"), selection: [375, 450]}, "E Shade Cutoff": { newName: "E Shade Cutoff Angle °", selection: [375, 450]}, "W Shade Cutoff": { newName: "W Shade Cutoff Angle °", selection: [375, 450]}, "PCLR": { newName: "Peak Cooling Reduction %", ticks: d3.format(".0%"), reverse: true, numTicks: 7, selection: [300, 375]}, }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); const axis = d3.axisLeft().ticks(5); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { axis.ticks(config.format[d].numTicks); } else { axis.ticks(5); } let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "end"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("x", 20) .attr("y", -25) .attr("font-size", 11) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; console.log(result) }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; ctx.strokeStyle = "#495157"; ctx.lineWidth = 1; } else { //context.globalAlpha = 1; ctx.strokeStyle = "#0565ab"; ctx.lineWidth = 1.5; } ctx.beginPath(); var coords = dimensions.map(p => [x(p) + config.margin.left, y.get(p)(d[p]) + config.margin.top]); coords.forEach(function(p,i) { // this tricky bit avoids rendering null values as 0 if (p === null) { // this bit renders horizontal lines on the previous/next // dimensions, so that sandwiched null values are visible if (i > 0) { var prev = coords[i-1]; if (prev !== null) { ctx.moveTo(prev[0],prev[1]); ctx.lineTo(prev[0]+6,prev[1]); } } if (i < coords.length-1) { var next = coords[i+1]; if (next !== null) { ctx.moveTo(next[0]-6,next[1]); } } return; } if (i == 0) { ctx.moveTo(p[0],p[1]); return; } ctx.lineTo(p[0],p[1]); }); ctx.stroke(); } container.appendChild(ctx.canvas); container.appendChild(svg.node()); return container; }2d:T1a2a,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.scaleTime().range([0, chart_width]); // const x2 = d3.scaleTime().range([0, chart_width]); 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 xAxis = g => g // .call(d3.axisBottom(x)); // const xAxis2 = g => g // .call(d3.axisBottom(x2)) // .call(g => g.select(".tick:first-of-type text").remove()); 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("kWh")); 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 => x2(d.date)) .curve(d3.curveMonotoneX) .x(d => x2(d.index)) .y0(d => y2(0)) .y1(d => y2(d.project_demand)); //add lines const yLine = d3.scaleLinear() .domain([0, 1]) .range([chart_height, 0]); const line = d3.line() .curve(d3.curveMonotoneX) .x(d => x(d.index)) .y(d => yLine(d[year])) svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); // const line2 = d3.line() // .curve(d3.curveMonotoneX) // .x(d => x(d.index)) // .y(d => yLine(d.battery_charge)) // 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(".emissions").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(".emissions").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(projectKeys)(peaks), { // keys: projectKeys // }); const stacked = Object.assign(d3.stack().keys(projectKeys)(peaks), { keys: projectKeys }); 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(peaks[i].date)); xAxis.tickFormat(i => formatHour(peaks[i].date)); // x.domain(d3.extent(data, function(d) { return d.date; })); // x2.domain(d3.extent(data, function(d) { return d.date; })); x.domain(d3.extent(peaks, function(d) { return d.index; })); x2.domain(d3.extent(peaks, function(d) { return d.index; })); // y.domain([0, d3.max(stacked.flat(2))]).nice(); // y2.domain([0, d3.max(peaks, function(d) { return d[scenario.value]; })]); y.domain([0, 2000]).nice(); y2.domain([0, 2000]); focus.selectAll("path") .data(stacked) .enter().append("path") .attr("class", "area") .attr("clip-path", "url(#clip)") .attr("fill", (d, i) => pvColor(stacked.keys[i])) .attr("d", area1) 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(peaks) .attr("class", "area") .attr("fill", "#1776b6") .attr("clip-path", "url(#clip)") .attr("d", area2); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); focus.append("path") .datum(peaks) .attr("class", "emissions") .attr("clip-path", "url(#clip)") .attr("fill", "none") .attr("stroke", "#c4c4c4") .style("mix-blend-mode", "multiply") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); //this is the value of the previous svg node if (!this) { context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, [0, 150]); } 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(); }2e:T464, peaks = { const nested = d3.nest() .key(d => d.month) .entries(hours2) .map((d) => { let month = +d.key; let totals = groupSum(d.values, d => d.day, d => d.project_demand); 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 = +d.values.reduce((a, b) => { return (a.project_demand || 0) > b.project_demand ? a : b; }, {}).day; //let day = closest; // //march was selecting a weekend day - this bit just selects a different day for the month of march... // if (month == 10) { // Math.max(day += 2, 30); // } let values = hours2.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; }2f:T40e,color = { const lookup = { "Electricity":"#d6d231", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Lighting Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Window Losses":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roof":"#f7aa6e", "Below Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Envelope Heat Loss":"#f7aa6e", "Equipment Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", "Pumps":"#adadad", "Exterior Usage": "#808080", "Floor on Grade":"#f7aa6e" }; return name => lookup[name]; }30:Tf04,function sim(d, p) { const pv_size = p.pv_size || 0; const battery_size = p.battery_size || 0; const forecast = p.forecast || 1; const controls = p.controls || ghg; const max_capacity = battery_size; const max_rate = max_capacity / 6; let data = d.map(d => ( {...d, pv_generation: pv_size * d.pv_potential / 1000} )); const frames = _.range(0, data.length, forecast * 24).map((i) => data.slice(i, i + (forecast * 24))); let start_charge = 0; frames.map((frame, frame_index, arr) => { if (frame_index > 0) { start_charge = arr[frame_index-1].slice(-1)[0].battery_charge; } let schedule = controls(frame, max_capacity, start_charge); frame.map((d, hour, hours) => { let j = {...d}; j = {...j, ...schedule[hour]}; // let diff = Math.abs(j.project_demand - j.pv_generation - j.period_average); j = {...j, date: parse_date(`${j.month.toString().padStart(2, "0")} ${j.day.toString().padStart(2, "0")} ${j.hour.toString().padStart(2, "0")}`)}; //update the battery charge, pull from last hour if (hour === 0) { if (frame_index === 0) { j = {...j, battery_charge: 0}; } else { j = {...j, battery_charge: arr[frame_index-1].slice(-1)[0].battery_charge}; } } else { j = {...j, battery_charge: hours[hour-1].battery_charge}; } //update pv to project if (j.project_demand - j.pv_generation > 0) { j = {...j, pv_to_project: j.pv_generation}; } else { j = {...j, pv_to_project: j.project_demand}; } //update battery to project if (j.discharge === 1) { if (j.battery_charge < j.discharge_limit) { j = {...j, battery_to_project: Math.min(j.battery_charge, j.project_demand - j.pv_to_project)}; } else { j = {...j, battery_to_project: Math.min(j.discharge_limit, j.project_demand - j.pv_to_project)}; } } else { j = {...j, battery_to_project: 0}; } //update the battery charge j = {...j, battery_charge: j.battery_charge - j.battery_to_project}; //update grid to project j = {...j, grid_to_project: j.project_demand - j.pv_to_project - j.battery_to_project}; //pv to battery //max_percent is created to avoid double counting charges from pv and grid let max_percent = max_rate; if (j.battery_charge < max_capacity) { let spare_capacity = max_capacity - j.battery_charge; let extra_output = j.pv_generation - j.pv_to_project; if (extra_output - spare_capacity > 0) { j = {...j, pv_to_battery: Math.min(max_percent, spare_capacity)}; } else { j = {...j, pv_to_battery: Math.min(extra_output, max_percent)}; } } else { j = {...j, pv_to_battery: 0}; } //update the battery charge again j = {...j, battery_charge: j.battery_charge + j.pv_to_battery}; max_percent -= j.pv_to_battery; //grid to battery if (j.discharge === -1) { let spare_capacity = max_capacity - j.battery_charge; j = {...j, grid_to_battery: Math.min(spare_capacity, max_percent)}; } else { j = {...j, grid_to_battery: 0}; } //update the battery charge again j = {...j, battery_charge: j.battery_charge + j.grid_to_battery}; //find the total grid j = {...j, total_grid: j.grid_to_project + j.grid_to_battery}; hours[hour] = j; }) arr[frame_index] = frame; }) return frames.flat(); //return frames.reduce((acc, val) => acc.concat(val), []); }31:T7b7,simulate = null // function simulate(d, c) { // const config = Object.assign({ // maxCharge: 2000, // pvSize: 800, // initialCharge: 2000, // chargeRate: 333, // dischargeRate: 333 // }, c) // let hours = [...d]; // hours.map((dd, i, arr) => { // let o = {...dd}; // //PV Generation in kWh // o.pvGeneration = o.pv_generation * config.pvSize / 1000; // //Total Renewable Generation in kWh // o.totalGeneration = o.pvGeneration // //send pv to project // if (o.totalGeneration >= o.project_demand) { // o.renewableToProject = o.project_demand // } // else { // o.renewableToProject = o.totalGeneration // } // //update project demand // let demand = o.project_demand - o.renewableToProject; // //get battery charge // if (i === 0) { // o.batteryCharge = config.initialCharge; // } // else { // o.batteryCharge = arr[i - 1].batteryCharge; // } // //send unused pv to battery // if (o.totalGeneration - o.renewableToProject >= config.chargeRate) { // o.renewableToBattery = Math.min(config.chargeRate, config.maxCharge - o.batteryCharge); // } // else { // o.renewableToBattery = Math.min(o.totalGeneration - o.renewableToProject, config.maxCharge - o.batteryCharge); // } // //update the battery charge // o.batteryCharge += o.renewableToBattery; // //send remaining charge to grid // o.renewableToGrid = Math.max(o.totalGeneration - o.renewableToProject - o.renewableToBattery, 0); // //send battery to project // o.batteryToProject = Math.min(demand, config.dischargeRate, o.batteryCharge); // //update battery charge // o.batteryCharge -= o.batteryToProject; // //send grid to project if needed // o.gridToProject = demand - o.batteryToProject; // arr[i] = o; // }) // return hours; // } 32:T5ff,renderQueue = function(func) { var _queue = [], // data to be rendered _rate = 1000, // number of calls per frame _invalidate = function() {}, // invalidate last render queue _clear = function() {}; // clearing function var rq = function(data) { if (data) rq.data(data); _invalidate(); _clear(); rq.render(); }; rq.render = function() { var valid = true; _invalidate = rq.invalidate = function() { valid = false; }; function doFrame() { if (!valid) return true; var chunk = _queue.splice(0,_rate); chunk.map(func); timer_frame(doFrame); } doFrame(); }; rq.data = function(data) { _invalidate(); _queue = data.slice(0); // creates a copy of the data return rq; }; rq.add = function(data) { _queue = _queue.concat(data); }; rq.rate = function(value) { if (!arguments.length) return _rate; _rate = value; return rq; }; rq.remaining = function() { return _queue.length; }; // clear the canvas rq.clear = function(func) { if (!arguments.length) { _clear(); return rq; } _clear = func; return rq; }; rq.invalidate = _invalidate; var timer_frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 17); }; return rq; }33:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:T40b,html``35:[] 29:{"title":"Virginia Tech Innovation Campus","cells":[{"id":0,"value":"md`# Virginia Tech Innovation Campus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`\n
\n### Energy End Use Characterization\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof figure2 = html`Figure 1: Building energy use characterization showing load components and energy end-uses for the baseline design.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`\n

\n### Envelope Sensitivity\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 50))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Baseline\", \"Target\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Baseline\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Baseline\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Baseline\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Baseline\" ? 1: .6 );;\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof figure3 = html`Figure 2: Sensitivity of individual building performance parameters on peak cooling load.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n

\n### Parametric Analysis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 60))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Interpolated Data\", \"Modeled Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 30})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#495157\": \"#0565ab\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof figure4 = html`Figure 3: Effect of different combinations of parameter properties on building energy use intensity. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"md`

\n### Renewable Energy Generation and Battery Storage\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof pvSize = {\n return slider({\n min: 0, \n max: 6000, \n step: 100, \n value: 4400,\n display: v => {\n let el = document.createElement(\"span\")\n let pvArea = formatAREA_SI_IP(_.round(v / (1 * 0.19), 0))\n el.innerHTML = `${d3.format(\",.0f\")(v)} kW_p | PV Area: ${pvArea}`\n return el;\n },\n description: \"Select Photovoltaic Size\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"viewof batterySize = {\n return slider({\n min: 0, \n max: 5000, \n step: 100, \n value: 2000,\n display: v => `${d3.format(\",.0f\")(v)} kWh`,\n description: \"Select Battery Size\"\n });\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2444,"value":"viewof year = {\n const select = html``;\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`
\nNZE Offset: **${d3.format(\".1%\")(_.sumBy(hours2, d => d.pv_generation)/(_.sumBy(hours2, d => d.project_demand)))}**\n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"legend = {\n \n const key_map = {\n \"grid_to_project\": \"Grid to Project\",\n \"grid_to_battery\": \"Grid to Battery\",\n \"battery_to_project\": \"Battery to Project\",\n \"pv_to_project\": \"PV to Project\"\n \n }\n \n const svg = d3.select(DOM.svg(960, pvColor.domain().length * 24 + 15))\n .style(\"font\", \"11px sans-serif\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(pvColor.domain())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 15})`);\n\n g.append(\"rect\")\n .attr(\"width\", 20)\n .attr(\"height\",20)\n .attr(\"fill\", pvColor);\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":866,"value":"viewof figure6 = html`

Figure 4: Balance of Energy to Offset Project Demand\n

`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1f77b4\", \"#6aadd6\", \"#b5decc\", \"#d7ddda\", \"#ffffff\", \"yellow\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"projectKeys = [\"grid_to_project\", \"grid_to_battery\", \"pv_to_project\", \"battery_to_project\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"// hours = simulate(renewables_data, {\n// maxCharge: batterySize,\n// pvSize: pvSize,\n// initialCharge: batterySize/2,\n// chargeRate: batterySize/6,\n// dischargeRate: batterySize/6\n// });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"renewables_data = {\n \nlet data = await d3.csv(`https://www.elementa.nyc/projects/vt-ic/data/renewables_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType);\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n const timeParse = (m, d, h) => {\n return d3.timeParse(\"%m %d %H\")(`${m.toString().padStart(2, \"0\")} ${d.toString().padStart(2, \"0\")} ${h.toString().padStart(2, \"0\")}`)\n }\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, date: timeParse(+m + 1, +d + 1, +h)});\n }\n }\n }\n const columns = data.columns;\n data.columns = columns;\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 1)} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/vt-ic/data/sankey_data.csv?version=${Math.floor(Math.random() * 100)}`)).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://elementa.nyc/yale/berekely/data/yale_sankey.csv\n //create a list of nodes and links\n const nodes = Array.from(new Set(sankey_data.map(d => [d.source, d.target]).flat()));\n const links = sankey_data.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n sankey_data = {nodes: nodes.map(d => ({name: d})), links: links};\n return sankey_data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 960,\n margin: {bottom: 10}\n }\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [config.width, config.height - config.margin.bottom]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/vt-ic/data/parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"parametric_data = {\n let parametrics = (await d3.csv(`https://www.elementa.nyc/projects/vt-ic/data/interpolated_data.csv`, d3.autoType)); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2417,"value":"hours2 = sim(renewables_data, {\n battery_size: batterySize,\n pv_size: pvSize\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"function ghg(f, m, s) {\n \n //f = the period of evaluation (frame), m = max capacity of the battery, s = starting charge of battery\n \n const demand = f.map(d => Math.max(d.project_demand - d.pv_generation, 0));\n const max_rate = m / 6;\n \n const low = year === \"grid_CO2e_2020\" ? 0.25: 0.40;\n const high = year === \"grid_CO2e_2020\" ? 0.75: 0.60;\n \n \n const charge_min = d3.quantile(f.map(d => d[year]), low);\n const charge_max = d3.quantile(f.map(d => d[year]), high);\n \n \n return f.map((d, i) => {\n let discharge = 0;\n if (d[year] >= charge_max) {\n discharge = 1;\n }\n else if (d[year] <= charge_min) {\n discharge = -1;\n }\n return {discharge: discharge, discharge_limit: max_rate};\n\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2288,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3format = require('d3-format@1','https://bundle.run/d3@5.9.2','https://bundle.run/d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"parse_date = d3.timeParse(\"%m %d %H\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}