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 simulateUtilitiesDisaggregation 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 CalibrationGoogle Monthly Baseline ResultsGoogle EEMsDC Energy Data AggregationEmissions VisualizationEPW ReaderSunpath DiagramPyschrometric Chart
Disaggregation Explorations
buildings.get("CTS10")
data.stack
data.stack
counts = {
let output = []
let params = _.keys(data.stack[0]);
const bin = arr => {
let rng = _.range(0, 100, 2);
return rng.map(d => arr.filter(v => {
let lower = d === 0 ? -1: d;
return (v > lower && v <= d + 2);
}));
}
const translated = data.stack.map(d => {
let sumVals = _.sumBy(Object.entries(d), ([k, v]) => v);
let output = {};
for (const k in d) {
output[k] = d[k] / sumVals * 100;
}
return output;
})
for (const param of params) {
let values = bin(translated.map(d => d[param]));
values = values.map(d => d.length);
output.push({parameter: param, values: values})
}
return output;
}
toPlot = counts[1]
{
// Create an empty SVG with specified width and height.
let height = 300;
let width = 400;
const svg = d3.select(DOM.svg(width, height));
const rScale = d3.scaleSqrt([0, 100], [0, 20]);
const yScale = d3.scaleLinear([0, 100], [0, height / 2]);
const xScale = d3.scaleBand(_.range(0, toPlot.values.length), [50, width - 50]);
const xAxis = svg => svg
.attr("transform", `translate(0,${height / 2})`)
.call(d3.axisBottom(xScale));
// Draw the x and y axes.
svg.append('g').call(xAxis);
// const bars = svg.append("g");
// const bar = bars
// .selectAll("rect")
// .data(toPlot.values)
// .join("rect")
// .attr("fill", "steelblue")
// .attr("y", height / 2)
// .attr("x", (d, i) => xScale(i))
// .attr("height", d => yScale(d))
// .attr("width", xScale.bandwidth())
const dots = svg.append("g");
const dot = dots
.selectAll("circle")
.data(toPlot.values)
.join("circle")
.attr("fill", "steelblue")
.style("mix-blend-mode", "multiply")
.attr("stroke", "none")
// .attr("cx", (d, i) => xScale(i) + xScale.bandwidth() / 2)
.attr("cx", (d, i) => xScale(i))
.attr("cy", height / 2)
.attr("r", d => rScale(d));
return svg.node();
}
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.
