Public
Edited
Dec 20, 2023
2023 Fall Studio 9/28 -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, 100], {value: 60, step: 1, label: "Number of cars"})
busMult
viewof busMult = Inputs.range([0, 100], {value: 20, step: 1, label: "Number of buses"})
subMult
viewof subMult = Inputs.range([0, 100], {value: 20, step: 1, label: "Number of subways"})
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
//mutable previousBus = busMult
import {slider as ternarySlider} from "@jashkenas/inputs"
valueCheck = {
//var busVal = busMult
//if (busMult = previousBus) {
mutable previousBus = busMult
console.log("value change")
} else {
console.log("no value change")
}
if(carMult+busMult>100){
set(viewof busMult, 100-carMult)
set(viewof subMult, 0)
}
if(carMult+busMult<100){
set(viewof subMult, 100-(carMult+busMult))
}
if(busMult+subMult>100){
set(viewof subMult, 100-busMult)
set(viewof carMult, 0)
}
if(subMult+carMult>100){
set(viewof carMult, 100-subMult)
set(viewof busMult, 0)
}
if(busMult+subMult<100){
set(viewof carMult, 100-(busMult+subMult))
}
if(carMult){console.log('carrrmult')}
if(busMult+subMult+carMult<100){
set(viewof carMult, carMult+1)
set(viewof carMult, 100-(busMult+subMult))
}
if(busMult+subMult+carMult > 100){set(viewof subMult, subMult-1)}
if(busMult+subMult+carMult < 100){set(viewof subMult, subMult+1)}
set(viewof subMult, 100-(carMult+busMult))
if(carMult){
var subVal = 100-(carMult+busVal)
set(viewof subMult, subVal)
console.log("carmult!!")
}
var totalVal = carMult+busMult+subMult
if(totalVal>100){
var remainder = (carMult+busMult+subMult)-100
var half = remainder/3
set(viewof carMult, 100-subMult-busMult)
set(viewof subMult, subMult)
set(viewof busMult, 100-subMult-carMult)
}
else {
if(totalVal<100){
var remainder = 100-(carMult+busMult+subMult)
var half = remainder/3
set(viewof carMult, 100-(subMult+busMult))
set(viewof subMult, subMult+half)
set(viewof busMult, 100-(subMult+carMult))
}
}
return carMult+busMult+subMult
return carMult
return busMult
return subMult
}
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.5px")
.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.1px")
.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","10")
.attr("y","10")
// .attr("class","hoverText")
.text('Car emission: '+co2Calc[0]+ ' pounds of CO2')
.style ("font-size", "7px")
svg
.append("text")
.attr("x","10")
.attr("y","20")
// .attr("class","hoverText")
.text('Bus emission: '+co2Calc[1]+ ' pounds of CO2')
.style ("font-size", "7px")
svg
.append("text")
.attr("x","10")
.attr("y","30")
// .attr("class","hoverText")
.text('Subway emission: '+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)
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.