2023 fall studio 9/7 - fleet's version
co2Calc = {
var totalCo2 = 0
var totalocc = 0
for (let i = 0; i < outlines.length; ++i) {
var alteredOcc = Math.round(outlines[i].occ*ocMult) // multiply occ of each bldg by occ multiplier
totalCo2 = totalCo2 + outlines[i].sf/alteredOcc // tallying up total co2
totalocc = totalocc + alteredOcc // tallying up total occ
}
return [Math.round(totalocc),Math.round(totalCo2)]
}
ocMult
viewof ocMult = Inputs.range([0, 2], {value: 1, step: 0.01, label: "Gain"})
chart = {
const width = 500,
height = 500;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
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","3px")
.style("fill","rgb(255,0,0)")
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
function polyHover(event,d){
//console.log("hello studious students")
d3.select(this).style("fill","purple")
svg
.append("text")
.attr("x","100")
.attr("y","100")
.attr("class","hoverText")
.text(d.sf)
svg
.append("text")
.attr("x","100")
.attr("y","115")
.attr("class","hoverText")
.text(d.occ)
//.text("I love CASE 😀")
}
function polyHoverOut(){
d3.select(this).style("fill","red")
svg.selectAll("text.hoverText").remove()
}
svg
.append("text")
.attr("x","50")
.attr("y","50")
// .attr("class","hoverText")
.text('Total Occupants:'+co2Calc[0])
svg
.append("text")
.attr("x","50")
.attr("y","70")
// .attr("class","hoverText")
.text('Total CO2:'+co2Calc[1])
return svg.node();
}
st3 = FileAttachment("square_test3.txt").tsv({array:true})
square_test = FileAttachment("square_test.txt").tsv({array:true})
lines_test = FileAttachment("lines_test.txt").tsv({array:true})
outlines = {
var list = lines_test
var spreadsheet = buildingList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)
var squareFt
var occupancy
var materials
var co2
for (let k = 0; k < spreadsheet.length; k++) {
if(idNum==spreadsheet[k].address){
//console.log("match!!!!!!!")
squareFt = spreadsheet[k].sf
occupancy = spreadsheet[k].occ
materials = spreadsheet[k].material
co2 = spreadsheet[k].c02print
}
}
cleanLines.push({pts:list[i],id:idNum,sf:squareFt,occ:occupancy,mat:materials,co2:co2})//add features to our final list of objects
}
return cleanLines
}
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-w1IY3qxAh_EX-g0FErE5OK_SiQcQGM0PnqbF-0iUp2GCEPIIqe4Ei3mwYccQQp-FyMd-xG-gIId9/pub?output=csv"
buildingList = d3.csv(buildingList_link,d3.autoType)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.