The avatar for @jameswperakis
jameswperakis
Published
Archive
Edited
Apr 13, 2021
Fork of MIT Monthly Baseline Results
Archive
Swarthmore Battery OptimizationHorton AWS SimulationsHorton AWS ResultsNYC TypologiesYale Berkeley UpdateNYC Electrification Results - Capacity ConstraintsBay Area CFE AppendixNYC Electrification Results - Updated MetricsCoorsTek 9th St. RedevelopmentCharacterization Experiments100 (ish) cities to simulateDisaggregation ExplorationsUtilitiesDisaggregation Graph V2Combinations TestCharacterization ExperimentsCombinations Test First Week ConstrainedCharacterization Graph V2Model Input CalibrationUT Model ResultsUT EEM All BuildingsMIT Model Input CalibrationMIT EEMsMIT Final Model ResultsMIT EEM All BuildingsMIT Monthly Baseline ResultsHorton Analysis ResultsHorton Solar + StorageGoogle Input Calibration
Google Monthly Baseline Results
Google EEMsDC Energy Data AggregationEmissions VisualizationEPW ReaderSunpath DiagramPyschrometric Chart
Insert cell
md`# Google Monthly Baseline Results`
Insert cell
Insert cell
Insert cell
Insert cell
width = 800
Insert cell
Insert cell
Insert cell
input = new Uint8Array(await Files.buffer(binary))
Insert cell
wb = xlsx.read(input, {type: 'array'})
Insert cell
excel = wb.Sheets["Baseline"];
Insert cell
data = xlsx.utils.sheet_to_json(excel);
Insert cell
x = d3.scaleLinear()
.domain([0, 11])
.range([margin.left, width - margin.right])
Insert cell
y = d3.scaleLinear()
.domain([0, max]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
import {Select} from "@observablehq/inputs"
Insert cell
Insert cell
height = 700
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d => dates[d]).tickSizeOuter(0).tickPadding(12))
Insert cell
uLookup = ({"G": "Gas", "E": "Electricity", "C": "Chilled Water", "S": "Steam", "H": "Gas"})
Insert cell
Insert cell
Insert cell
margin = ({top: 40, right: 20, bottom: 30, left: 40})
Insert cell
Insert cell
d3 = require("d3@^6.1")
Insert cell
_ = require('lodash@4.17.15/lodash.js').catch(() => window["_"])
Insert cell
dates = d3.timeMonth.range(new Date(2019, 0, 1), new Date(2019, 11, 30)).map(d3.timeFormat("%b"));
Insert cell
line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => x(i))
.y(d => y(d))
.curve(d3.curveCardinal.tension(0.5))
Insert cell
color = ({"S": {primary: "#D84315", secondary: "#FFAB91"},
"E": {primary: "#2a6d4d", secondary: "#89cda8"},
"G": {primary: "#750c00", secondary: "#e26e42"},
"C": {primary: "#00838F", secondary: "#80DEEA"},
"H": {primary: "#750c00", secondary: "#e26e42"}})
Insert cell
chroma = require('chroma-js')
Insert cell
serialize = {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(svg);
return new Blob([string], {type: "image/svg+xml"});
};
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more