Slider Map Cobble Hill
// Defined Values
Co2Capita = 16.28
Co2Factor = 0.01803491773
SF = 0
ResidentialSF = 0
NumOfHousehold = 0
StandardManPop = 1.86
{var EE;}
//GHG = SF * Co2Factor
{var HouseholdSF;
}
//Household SF base condition
{
var HouseholdSF;
if(NumOfHousehold === 0){
HouseholdSF = ResidentialSF / StandardManPop
} else{
HouseholdSF = ResidentialSF / NumOfHousehold
}
var HouseholdGHG = HouseholdSF * Co2Factor
var NewCapita = HouseholdGHG / Pop
}
//Slider Value Switch
{
var Rating;
let NewCapita = 'Neutral'
if (NewCapita > Co2Capita){
Rating = 'BAD'
} else if (NewCapita = Co2Capita){
Rating = "Neutral"
} else{
Rating = 'Good'
}
}
co2Calc = {
var totalCo2SF = 0
var totalOccupants = 0
//Per capita = 16.28
//Average SF = 0.01803491C773
// Pop=# of People
// Co2Capita = 16.28
// SF = SF
// Co2SF=(ocMult*16.28)/SF
// Co2SF-Factor = 0.01803491773
// HouseholdSF = TotalResidentialSF / NumOfHouseholds
// GHG = Co2SF_Factor * HouseholdSF
// NewCapita = GHG/Slider
// If New Capita > Co2Capita then ('Bad')
// If not ('Good')
//do some calc and rtrn value
//for (let i = 0; i < list.length-1; i=i+2)
for (let i = 0; i < outlines.length-1; i=i+1) {
var alteredOcc = Math.round(outlines[i].Res * Pop) // multiplying occ of each bldg by occupancy
//totalCo2 = totalCo2 + outlines[i].co2
if(typeof(outlines[i].Num) !== "undefined" && outlines[i].Num !== null ){
totalCo2SF = totalCo2SF + outlines[i].sf/outlines[i].Num
break
}
//totalCo2SF = totalCo2SF + parseFloat(outlines[i].sf+outlines[i].Res)
var totalOccupants = 16.28*Pop
var houseHold = outlines[i].sf
}
return [Math.round(totalOccupants),Math.round(totalCo2SF)]
}
Pop
viewof Pop = Inputs.range([0, 10000], {value: 10, step: 10, label: "Calculated Room Size(M2)"})
viewof Boiler = Inputs.toggle({label: "New Boiler"})
Boiler
viewof Insulation = Inputs.toggle({label: "New Insulation"})
Insulation
viewof HVAC = Inputs.toggle({label: "New HVAC"})
HVAC
Boil_Fac = 0.20;
Ins_Fac = 0.15;
HVAC_Fac = 0.715;
chart = {
const width = 1250,
height = 1250;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const originalValues = {};
var g = svg.append("g").attr("id", "paths");
var p = svg.selectAll("polyline") //d3 geopath
.data(outlines)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.pts})//required attributes
.style("stroke","black")//style
.style("stroke-width","2px")
.style("fill","gray")
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
function polyHover(event,d){
//console.log("hello studious students")
if (d.E_M2 === 0) {
d3.select(this).style("fill","blue");
} else {
d3.select(this).style("fill","yellow")
}
//d3.select(this).style("fill","blue");
let multiplied;
var value = d.E_M2
var Boil_Fac= 0.20;
//if (Boiler = 'true'){
//Boil_Fac =0.20;
//} else {
//Boil_Fac = 1
//}
var Ins_Fac= 0.15;
//if (Insulation = 'true'){
//Ins_Fac = 0.15;} } else {
//Ins_Fac = 1
//}
var HVAC_Fac= 0.715;
//if (HVAC = 'true') {
// HVAC_Fac = 0.715; } else {
//Boil_Fac = 1
//}
//boolean multiply
if (Boiler) {
value *= Boil_Fac
}
if (Insulation) {
value *= Ins_Fac
}
if (HVAC) {
value *= HVAC_Fac
}
//return
p.each(function(d) {
originalValues[d.id] = d.E_M2;
});
svg
.append("text")
.attr("x","100")
.attr("y","100")
.attr("class","hoverText")
.text("Square Feet " + d.sf)
svg
.append("text")
.attr("x","100")
.attr("y","115")
.attr("class","hoverText")
.text("Meters Squared M2 " + d.M2)
svg
.append("text")
.attr("x","100")
.attr("y","130")
.attr("class","hoverText")
.text("Energy per M2 " + value)
svg
.append("text")
.attr("x","100")
.attr("y","145")
.attr("class","hoverText")
.text()
svg
.append("text")
.attr("x","50")
.attr("y","50")
.attr("class","hoverText")
.text('Calculated Room Energy Need (kWh * M2): '+(d.E_M2) * Pop)
svg
.append("text")
.attr("x","50")
.attr("y","75")
.attr("class","hoverText")
.text('Addess: ' + d.id)
}
function polyHoverOut(event, d){
d3.select(this).style("fill","gray")
svg.selectAll("text.hoverText").remove()
d.E_M2 = originalValues[d.id];
}
p.enter().append("polyline") //after we draw our first polyline, use this line
.data(detailline)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})//required attributes
.style("stroke","black")//style
.style("stroke-width","1px")
.style("fill","white")
p.enter().append("polyline") //after we draw our first polyline, use this line
.data(cobble_hill_win)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})//required attributes
.style("stroke","white")//style
.style("stroke-width",".7px")
.style("fill","gray")
return svg.node();
}
cobble_hill_win = FileAttachment("cobble_hill_win.txt").tsv({array:true})
shpFile = FileAttachment("Cobble_Hill_Energy_buildings.txt").tsv({array:true})
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRrfqui_wXQUoknXXPckGKO2QHb-epsZtJgWQwRBRY2SjY4qSIlnNUF1QAV_kgaee1oFpblObWx9s7M/pub?gid=75848405&single=true&output=csv"
buildingList = d3.csv(buildingList_link,d3.autoType)
outlines = {
var list = shpFile
var spreadsheet = buildingList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var Type
var B_Class
var Floors
var Residental_Units
var SF
var Num_of_Units
var GHG
var M2
var E_M2
for (let k = 0; k < spreadsheet.length; k++) {
if(id==spreadsheet[k].Address){
//console.log("match!!!!!!!")
//Residental_Units = spreadsheet[k].Residental_Units
SF = parseInt(spreadsheet[k].SF)
//Num_of_Units = spreadsheet[k].Num_of_Units
//GHG = spreadsheet[k].GHG
//M2 = spreadsheet[k].M2
E_M2 = spreadsheet[k].Total_E_Use_Per_M2
M2 = SF * 0.092903
}
}
cleanLines.push({pts:list[i],id:id, sf:SF, M2:M2, E_M2:E_M2, })//add features to our final list of objects
}
return cleanLines
}
detailline = FileAttachment("detailline.txt").tsv({array:true})
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.
