Public
Edited
Sep 28, 2023
2023 Fall Studio 9/25 -Lower Manhattan Work & Transportation Isometric
co2Calc = {
var CarbonFootprintCar = 0
for (let i = 0; i < outlines.length; ++i) {
var alteredcar = Math.round(carMult*6)
var alteredbus = Math.round(busMult*4.4)
var alteredsubway = Math.round(subMult*2.2)
}
return [Math.round(alteredcar),Math.round(alteredbus),Math.round(alteredsubway)]
}
carMult
viewof carMult = Inputs.range([0, 300], {value: 1, step: 1, label: "Number of cars"})
busMult
viewof busMult = Inputs.range([0, 200], {value: 1, step: 1, label: "Number of buses"})
subMult
viewof subMult = Inputs.range([0, 300], {value: 1, step: 0.1, label: "Number of subways"})
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","0.2px")
.style("fill",fillColor)
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
function fillColor(d,i){
var color = "rgb(229,235,255)"
if(d.Transportation=="4, 5"){color="rgb(0,102,51)"}
if(d.Transportation=="2, 3"){color="blue"}
if(d.Transportation=="1"){color="rgb(180,0,0)"}
if(d.Transportation=="J, Z"){color="purple"}
if(d.Transportation=="FERRY"){color="pink"}
if(d.Transportation=="R, W"){color="rgb(255,255,0)"}
return color
}
p.enter().append("polyline") //use this line after the first polyline is added
.data(details)
.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","grey")//style
.style("stroke-width","0.1px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(annotation)
.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","0.2px")
.style("fill","none")
function polyHover(event,d){
d3.select(this).style("fill","rgb(151,173,222)")
svg
.append("text")
.attr("x","350")
.attr("y","30")
.attr("class","hoverText")
.text(d.Address)
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","40")
.attr("class","hoverText")
.text(d.BuildingType)
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","50")
.attr("class","hoverText")
.text(d.Occupancy)
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","60")
.attr("class","hoverText")
.text(d.Workersnumber)
.style ("font-size", "6px")
svg
.append("text")
.attr("x","305")
.attr("y","40")
.attr("class","hoverText")
.text("Building Types")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","305")
.attr("y","30")
.attr("class","hoverText")
.text("Address")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","305")
.attr("y","50")
.attr("class","hoverText")
.text("Occupancy")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","305")
.attr("y","60")
.attr("class","hoverText")
.text("Workers")
.style ("font-size", "6px")
}
function polyHoverOut(){
d3.select(this).style("fill",fillColor)
svg.selectAll("text.hoverText").remove()
}
svg
.append("text")
.attr("x","5")
.attr("y","10")
// .attr("class","hoverText")
.text('Car emission per person: '+co2Calc[0]+ ' pounds of CO2')
.style ("font-size", "7px")
svg
.append("text")
.attr("x","5")
.attr("y","20")
// .attr("class","hoverText")
.text('Bus emission per person: '+co2Calc[1]+ ' pounds of CO2')
.style ("font-size", "7px")
svg
.append("text")
.attr("x","5")
.attr("y","30")
// .attr("class","hoverText")
.text('Subway emission per person: '+co2Calc[2]+ ' pounds of CO2')
.style ("font-size", "7px")
svg
.append("text")
.attr("x","15")
.attr("y","60")
.text("CO2 Emission: 10371")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","70")
.text("CO2 by bus/sub: 6717")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","80")
.text("CO2 by car: 5420")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","150")
.text("CO2 Emission: 45160")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","160")
.text("CO2 by bus/sub: 6490")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","170")
.text("CO2 by car: 5237")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","210")
.text("CO2 Emission: 159087")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","220")
.text("CO2 by bus/sub: 22878")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","230")
.text("CO2 by car: 18461")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","290")
.text("CO2 Emission: 4680")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","300")
.text("CO2 by bus/sub: 222")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","15")
.attr("y","310")
.text("CO2 by car: 179")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","430")
.text("CO2 Emission: 792")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","440")
.text("CO2 by bus/sub: 670")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","450")
.text("CO2 by car: 541")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","470")
.text("CO2 Emission: 400")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","480")
.text("CO2 by bus/sub: 58")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","220")
.attr("y","490")
.text("CO2 by car: 47")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","90")
.text("CO2 Emission: 5475")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","100")
.text("CO2 by bus/sub: 6434")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","350")
.attr("y","110")
.text("CO2 by car: 5192")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","400")
.attr("y","160")
.text("CO2 Emission: 778")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","400")
.attr("y","170")
.text("CO2 by bus/sub: 623")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","400")
.attr("y","180")
.text("CO2 by car: 503")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","440")
.attr("y","210")
.text("CO2 Emission: 10581")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","440")
.attr("y","220")
.text("CO2 by bus/sub: 4223")
.style ("font-size", "6px")
svg
.append("text")
.attr("x","440")
.attr("y","230")
.text("CO2 by car: 3407")
.style ("font-size", "6px")
return svg.node();
}
isolines = FileAttachment("isolines.txt").tsv({array:true})
isooutline2 = FileAttachment("isooutline@2.txt").tsv({array:true})
details = FileAttachment("details.txt").tsv({array:true})
annotation = FileAttachment("annotation.txt").tsv({array:true})
outlines = {
var list = isooutline2
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 Address
var BuildingType
var BuildingGreenhouseEmission
var CarbonFootprintCar
var CarbonFootprintPublicTransport
var Drovenumber
var Occupancy
var Workersnumber
for (let k = 0; k < spreadsheet.length; k++) {
if(idNum==spreadsheet[k].Key){
//console.log("match!!!!!!!")
Address = spreadsheet[k].Address
BuildingType = spreadsheet[k].BuildingType
BuildingGreenhouseEmission = spreadsheet[k].BuildingGreenhouseEmission
CarbonFootprintPublicTransport = spreadsheet[k].CarbonFootprintPublicTransport
CarbonFootprintCar = spreadsheet[k].CarbonFootprintCar
Drovenumber = spreadsheet[k].Drovenumber
Occupancy = spreadsheet[k].Occupancy
Workersnumber = spreadsheet[k].Workersnumber
}
}
//cleanLines.push({pts:st3[i],id:st3[i+1][0]})
cleanLines.push({pts:list[i],id:idNum,Address:Address,BuildingType:BuildingType,BuildingGreenhouseEmission:BuildingGreenhouseEmission,CarbonFootprintPublicTransport:CarbonFootprintPublicTransport,CarbonFootprintCar:CarbonFootprintCar,Drovenumber:Drovenumber,Workersnumber:Workersnumber,Occupancy:Occupancy})
}
return cleanLines
}
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTQOC1bmrRAOpV9-L-PudVP-Veam2CjObBMF1B6pOKVmTtegSTXSHlvkyRP2s2XuzMRdGrw3uwhZNLc/pub?output=csv"
buildingList = d3.csv(buildingList_link,d3.autoType)
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.
