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 CalibrationGoogle Monthly Baseline ResultsGoogle EEMsDC Energy Data AggregationEmissions VisualizationEPW ReaderPyschrometric Chart
Sunpath Diagram
chart = {
const cx = width / 2;
const cy = height / 2;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("fill", "currentColor")
.style("margin", "0 -14px")
.style("display", "block");
// const t = svg.transition().duration(1000);
const defs = svg.append("g").append("defs")
defs.append("clipPath")
.attr("id", "horizonClip")
.append("path")
.attr("d", path(outline));
svg.append("path")
.attr("d", path(graticule))
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2)
.attr("clip-path", "url(#horizonClip)");
svg.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "currentColor");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const sunPath_background = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#333333")
.attr("stroke-dasharray", 3)
.attr("stroke-width", 1)
.attr("clip-path", "url(#horizonClip)");
const analemma_background = svg.append("g")
.attr("stroke", "#333333")
.attr("stroke-dasharray", 3)
.attr("fill", "none")
.attr("stroke-width", 1)
.attr("clip-path", "url(#horizonClip)");
const sunPath_foreground = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#333333")
.attr("stroke-width", 2)
.attr("clip-path", "url(#horizonClip)");
const analemma_foreground = svg.append("g")
.attr("stroke", "#333333")
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("clip-path", "url(#horizonClip)");
function update(solar) {
const ms = new Date(2014, -1, 1);
const mm = new Date(2014, 5, 1);
const me = new Date(2014, 11, 1);
const sunPaths = (s, e) => {
return d3.utcMonths(s, e).map(d => {
let start = d3.utcHour.offset(solar.noon(d), -12);
let end = d3.utcHour.offset(start, 24);
return {
type: "LineString",
coordinates: d3.utcMinutes(start, end).map(solar.position)
}
});
}
const analemmas = (s, e) => {
let start = d3.utcMonth.offset(s, 1);
let end = d3.utcMonth.offset(e, 1);
return d3.range(24).map(h => {
return {
type: "LineString",
coordinates: d3.utcDays(start, end).map(d => solar.position(d3.utcHour.offset(d, h)))
}
});
}
sunPath_foreground.selectAll("path")
.data(sunPaths(ms, mm))
// .join(
// enter => enter.append("path")
// .attr("d", d => path(d)),
// update => update
// .call(update => update.transition(t)
// .attr("d", d => path(d))),
// exit => exit
// .call(exit => exit.remove()));
.join("path")
.attr("d", d => path(d));
sunPath_background.selectAll("path")
.data(sunPaths(mm, me))
.join("path")
.attr("d", d => path(d));
analemma_foreground.selectAll("path")
.data(analemmas(ms, mm))
.join("path")
.attr("d", d => path(d));
analemma_background.selectAll("path")
.data(analemmas(mm, me))
.join("path")
.attr("d", d => path(d));
// const formatHour = d => d.toLocaleString("en", {hour: "numeric", timeZone: "America/Los_Angeles"})
// const formatMonth = d => d.toLocaleString("en", {month: "long", timeZone: "America/Los_Angeles"})
// hour.data(d3.utcHours(start, end));
// hour.attr("transform", d => `translate(${projection(solar.position(d))})`);
// hour.select("text:first-of-type").text(formatHour);
// hour.select("text:last-of-type").text(formatHour);
}
return Object.assign(svg.node(), {update});
}
projection = d3.geoProjection((x, y) => d3.geoStereographicRaw(x, -y))
.scale(scale)
.clipExtent([[0, 0], [width, height]])
.rotate([0, -90])
.translate([width / 2, height / 2])
.precision(0.1)
path = d3.geoPath(projection)
yAxis = g => g
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(10, 91, 10)) // every 10°
.join("text")
.attr("dy", "0.35em")
.text(d => `${d}°`)
.datum(d => projection([0, d]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
xAxis = g => g
.call(g => g.append("g")
.attr("stroke", "currentColor")
.selectAll("line")
.data(d3.range(360))
.join("line")
.datum(d => [
projection([d, 0]),
projection([d, d % 10 ? -1 : -2])
])
.attr("x1", ([[x1]]) => x1)
.attr("x2", ([, [x2]]) => x2)
.attr("y1", ([[, y1]]) => y1)
.attr("y2", ([, [, y2]]) => y2))
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(0, 360, 10))
.join("text")
.attr("dy", "0.35em")
.text(d => d === 0 ? "N" : d === 90 ? "E" : d === 180 ? "S" : d === 270 ? "W" : `${d}°`)
.attr("font-size", d => d % 90 ? null : 14)
.attr("font-weight", d => d % 90 ? null : "bold")
.datum(d => projection([d, -4]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
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.
