Final NYC Data Map 12/16/2024 - COMBINED / Seilsl's Workspace

Seilsl's Workspace

Workspace

Public

Edited

Dec 15

Fork of Final NYC Data Map 12/16/2024

•

1 fork

dashboard =

html`

</div>

${SmallMap}

</div>

${BigMap}

</div>

${viewof BigMapButton}

</div>

${md`## Indoor Hazards:`}

</div>

SmallMap = {

const width = 900,//pixel size of the map

height = 900;

const svg = d3.create("svg")

.attr("viewBox", [0, 300, width, height]);

// Use Mercator projection

var projection = d3

.geoMercator()//projection system used

.fitSize([width, height], newFinalBorder);

var path1 = d3.geoPath().projection(projection);//need one of these for each line layer from qgis

var path2 = d3.geoPath().projection(projection);

var path3 = d3.geoPath().projection(projection);

var path4 = d3.geoPath().projection(projection);

var path5 = d3.geoPath().projection(projection);

var path6 = d3.geoPath().projection(projection);

var path7 = d3.geoPath().projection(projection);

var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type

var c = svg.selectAll("circle")//for circles

var p = svg.selectAll("polyline")//for polylines from rhino

var t = svg.selectAll("text")

//static lines from qgis

//staticLines(path1, qgisBorder.features,"none",'1','1',"rgb(0,0,0)")

//staticLines(path2, manhattanDistrictOutlines.features,"none",'1','5.',"rgb(0,0,0)")

//staticLines(path3, buildingFootprints.features,"none",'1','.35',"black")

//staticLines(path4, roadCenterlines.features,"none",'.5','.125',"black")

//staticLines(path5, manhattanOutline.features,"none",'1','.125',"black")

//staticLines(path7, qgistoobservable.features,"none",'1','.5',"black")

function staticLines(path, data, sfill, sOpac, sW, stroke){

g.enter().append("path")

.data(data) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", sfill)

.style('stroke-opacity',sOpac)

.style("stroke-width", sW)

.style("stroke", stroke)

}

/* g.enter().append("path")

.data(buildingFootprints.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path7) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", fillColor)

.style('stroke-opacity','1')

.style("stroke-width",'0')

.style("stroke", 'none')

function fillColor(d, i) {

var year = 2024 - d.properties.cnstrct_yr;

// Scale and exaggerate the year for variation

year = Math.min(255, Math.max(0, Math.pow(year, 1.2)));

var scaledYear = year % 255;

var red = Math.min(180, scaledYear * 0.6);

var green = Math.min(180, scaledYear * 0.3);

var blue = Math.min(255, scaledYear * 1.2);

var color = `rgb(${red},${green},${blue})`;

console.log(color);

return color;

}

//lines from rhino

//polyline(testBorderFill,'white','1','.25','white')

//polyline(testBorderDetailing,'black','1','.25','black')

polyline(testBorder,'white','1','2','white')

//polyline(bubbleCalloutArms,'black','1','.25','black')

//polyline(bubbleCallouts,'none','1','.5','black')

polyline(legendLines,'none','1','.5','black')

polyline(legendText,'black','1','.25','black')

function polyline(data, sfill, sOpac, sW, stroke){

g.enter().append("polyline")

.data(data) //get data to define path

.enter() //there are more data than elements, this selects them

.append('polyline')

.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", sfill)

.style('stroke-opacity',sOpac)

.style("stroke-width", sW)

.style("stroke", stroke)

}

return svg.node();

}

BigMap = {

const width = 900,//pixel size of the map

height = 900;

const svg = d3.create("svg")

.attr("viewBox", [0, 90, width, height]);

// Use Mercator projection

var projection = d3

.geoMercator()//projection system used

.fitSize([width, height], newFinalBorder);

var path1 = d3.geoPath().projection(projection);//need one of these for each line layer from qgis

var path2 = d3.geoPath().projection(projection);

var path3 = d3.geoPath().projection(projection);

var path4 = d3.geoPath().projection(projection);

var path5 = d3.geoPath().projection(projection);

var path6 = d3.geoPath().projection(projection);

var path7 = d3.geoPath().projection(projection);

var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type

var c = svg.selectAll("circle")//for circles

var p = svg.selectAll("polyline")//for polylines from rhino

var t = svg.selectAll("text")

//static lines from qgis

//staticLines(path1, newFinalBorder.features,"none",'1','1',"rgb(0,0,0)")

staticLines(path2, manhattanDistrictOutlines.features,"none",'1','5.',"rgb(0,0,0)")

staticLines(path3, buildingFootprints.features,"none",'1','.35',"black")

staticLines(path4, roadCenterlines.features,"none",'.5','1',"white")

staticLines(path5, manhattanOutline.features,"none",'1','.125',"black")

staticLines(path7, qgiscds.features,"none",'1','1',"white")

function staticLines(path, data, sfill, sOpac, sW, stroke){

g.enter().append("path")

.data(data) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", sfill)

.style('stroke-opacity',sOpac)

.style("stroke-width", sW)

.style("stroke", stroke)

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////MANHATTEN MAP

g.enter().append("path")

.data(qgiscds.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path7) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", RiskCalc)

.style('stroke-opacity','1')

.style("stroke-width",'0')

.style("stroke", 'none')

.on('mouseover',PopText)

.on('mouseout',PopTextOut)

function PopText(event,d){

svg

.append("text")

.attr('x','100')

.attr('y','180')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("City District: " + d.properties.boro_cd)

svg

.append("text")

.attr('x','100')

.attr('y','200')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("Asbestos: " + d.properties.AsbestosMain)

svg

.append("text")

.attr('x','100')

.attr('y','220')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("Fine Particles: " + d.properties.FineParticles)

svg

.append("text")

.attr('x','100')

.attr('y','240')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("VOCs: " + d.properties.VOC)

svg

.append("text")

.attr('x','100')

.attr('y','260')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("Mold: " + d.properties.MoldPoints)

svg

.append("text")

.attr('x','100')

.attr('y','280')

.attr('class','poptext')

.attr('font-family','helvetica')

.style('font-size','0.75em')

.style('font-weight','normal')

.style("fill", "rgb(100,100,100)")

.text("Lead: " + d.properties.LeadPoints)

}

function PopTextOut(event,d){

d3.selectAll('text.poptext').remove()

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////WEIGHTING SYSTEM

function RiskCalc(d, i) {

////////////////////////////////////////////////////////Asbestos

var Asbestos = d.properties.AsbestosMain;

Asbestos = Number(Asbestos)

//console.log("Asbestos as a number");

//console.log(Asbestos);

var aRisk = []

if(Asbestos<= 165){aRisk.push(1)}

if(Asbestos>= 166 && Asbestos<= 330){aRisk.push(2)}

if(Asbestos>= 331 && Asbestos<= 500){aRisk.push(3)}

if(Asbestos>= 501 && Asbestos<= 665){aRisk.push(4)}

//return aRisk;

//console.log(aRisk);

//////////////////////////////////////////////////////Fine Particles

var FineParticles = d.properties.FineParticles;

FineParticles = Number(FineParticles)

var FPRisk = []

if(FineParticles<= 5){FPRisk.push(1)}

if(FineParticles>= 6 && FineParticles<= 9){FPRisk.push(2)}

if(FineParticles>= 10 && FineParticles<= 12){FPRisk.push(3)}

if(FineParticles>= 13 && FineParticles<= 20){FPRisk.push(4)}

//return FPRisk;

//console.log("FP Risk");

//console.log(FPRisk);

//////////////////////////////////////////////////////VOC

var VOC = d.properties.VOC;

VOC = Number(VOC)

//console.log("VOC");

//console.log(VOC);

//console.log(typeof VOC);

//VOC = Number(VOC)

var VOCRisk = []

if(VOC<= 30){VOCRisk.push(1)}

if(VOC>= 31 && VOC<= 50){VOCRisk.push(2)}

if(VOC>= 51 && VOC<= 82){VOCRisk.push(3)}

if(VOC>= 83 && VOC<= 500){VOCRisk.push(4)}

//return VOCRisk;

//console.log(VOCRisk);

//////////////////////////////////////////////////////Mold

var Mold = d.properties.MoldPoints;

//Mold = Number(Mold)

//console.log("Mold");

//console.log(Mold);

//console.log(typeof Mold);

var MoldRisk = []

if(Mold<= 800){MoldRisk.push(1)}

if(Mold>= 801 && Mold<= 1600){MoldRisk.push(2)}

if(Mold>= 1601 && Mold<= 2400){MoldRisk.push(3)}

if(Mold>= 2401 && Mold<= 4000){MoldRisk.push(4)}

//return MoldRisk;

//console.log(MoldRisk);

/////////////////////////////////////////////////////Lead

var Lead = d.properties.LeadPoints;

//Lead = Number(Lead)

var LeadRisk = []

if(Lead<= 800){LeadRisk.push(1)}

if(Lead>= 801 && Lead<= 1600){LeadRisk.push(2)}

if(Lead>= 1601 && Lead<= 2400){LeadRisk.push(3)}

if(Lead>= 2401 && Lead<= 4000){LeadRisk.push(4)}

//return LeadRisk;

//console.log(LeadRisk);

////////////////////////////////////////////////////////////Total Calc

var added = aRisk[0] + FPRisk[0] + VOCRisk[0] + MoldRisk[0] + LeadRisk[0]

var totalRisk = 0

if(added<= 7){totalRisk = 1}

if(added>= 8 && added<= 10){totalRisk = 2}

if(added>= 11 && added<= 14){totalRisk = 3}

if(added>= 15 && added<= 20){totalRisk = 4}

//return totalRisk;

console.log("TOTALRISK");

console.log(totalRisk);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////Color Indicators

/////////////////////////////////////////////////////////////ALL

if (BigMapButton=="Overview Risk"){

//GREYSCALE

var riskcolor = "rgb(10, 10, 10)";

if(totalRisk == 0){riskcolor = "rgb(140, 140, 140)"}

if(totalRisk == 1){riskcolor = "rgb(170, 170, 170)"}

if(totalRisk == 2){riskcolor = "rgb(140, 140, 140)"}

if(totalRisk == 3){riskcolor = "rgb(110, 110, 110)"}

if(totalRisk == 4){riskcolor = "rgb(80, 80, 80)"}

return riskcolor;

} else {riskcolor = "rgb(140, 140, 140)"}

////////////////////////////////////////////////////////////Asbestos

if (BigMapButton=="Asbestos"){

//RED

var riskcolor = "rgb(10, 10, 10)";

if(aRisk == 0){riskcolor = "rgb(140, 20, 20)"}

if(aRisk == 1){riskcolor = "rgb(170, 20, 20)"}

if(aRisk == 2){riskcolor = "rgb(140, 20, 20)"}

if(aRisk == 3){riskcolor = "rgb(110, 20, 20)"}

if(aRisk == 4){riskcolor = "rgb(80, 20, 20)"}

return riskcolor;

} else {riskcolor = "rgb(140, 20, 20)"}

/////////////////////////////////////////////////////////////Fine Particles

if (BigMapButton=="Fine Particles"){

//YELLOW

var riskcolor = "rgb(10, 10, 10)";

if(FPRisk == 0){riskcolor = "rgb(130, 120, 50)"}

if(FPRisk == 1){riskcolor = "rgb(160, 150, 50)"}

if(FPRisk == 2){riskcolor = "rgb(130, 120, 50)"}

if(FPRisk == 3){riskcolor = "rgb(100, 90, 50)"}

if(FPRisk == 4){riskcolor = "rgb(70, 60, 50)"}

return riskcolor;

} else {riskcolor = "rgb(130, 120, 50)"}

/////////////////////////////////////////////////////////////VOC

if (BigMapButton=="VOC"){

//GREEN

var riskcolor = "rgb(10, 10, 10)";

if(VOCRisk == 0){riskcolor = "rgb(30, 140, 30)"}

if(VOCRisk == 1){riskcolor = "rgb(30, 170, 30)"}

if(VOCRisk == 2){riskcolor = "rgb(30, 140, 30)"}

if(VOCRisk == 3){riskcolor = "rgb(30, 110, 30)"}

if(VOCRisk == 4){riskcolor = "rgb(30, 80, 30)"}

return riskcolor;

} else {riskcolor = "rgb(30, 140, 30)"}

/////////////////////////////////////////////////////////////MOLD

if (BigMapButton=="Mold"){

//BLUE

var riskcolor = "rgb(10, 10, 10)";

if(MoldRisk == 0){riskcolor = "rgb(20, 20, 140)"}

if(MoldRisk == 1){riskcolor = "rgb(20, 20, 170)"}

if(MoldRisk == 2){riskcolor = "rgb(20, 20, 140)"}

if(MoldRisk == 3){riskcolor = "rgb(20, 20, 110)"}

if(MoldRisk == 4){riskcolor = "rgb(20, 20, 80)"}

return riskcolor;

} else {riskcolor = "rgb(20, 20, 140)"}

/////////////////////////////////////////////////////////////LEAD

if (BigMapButton=="Lead"){

//PURPLE

var riskcolor = "rgb(10, 10, 10)";

if(LeadRisk == 0){riskcolor = "rgb(80, 20, 140)"}

if(LeadRisk == 1){riskcolor = "rgb(100, 20, 170)"}

if(LeadRisk == 2){riskcolor = "rgb(80, 20, 140)"}

if(LeadRisk == 3){riskcolor = "rgb(50, 20, 110)"}

if(LeadRisk == 4){riskcolor = "rgb(20, 20, 80)"}

return riskcolor;

} else {riskcolor = "rgb(80, 20, 140)"}

}

return svg.node();

}

viewof BigMapButton = Inputs.radio(["Overview Risk", "Asbestos", "Fine Particles", "VOC", "Mold", "Lead"], {label: "Risk Maps",value:"Overview Risk"})

qgiscds = FileAttachment("QGISCDS.geojson").json()

legendText = FileAttachment("Legend Text 2.txt").tsv({array:true})

legendLines = FileAttachment("Legend Lines.txt").tsv({array:true})

bubbleCallouts = FileAttachment("Bubble Callouts.txt").tsv({array:true})

bubbleCalloutArms = FileAttachment("Bubble Callout Arms@1.txt").tsv({array:true})

newFinalBorder = FileAttachment("New Final Border.geojson").json()

testBorderDetailing = FileAttachment("Test Border Detailing.txt").tsv({array:true})

testBorderFill = FileAttachment("Test Border Fill.txt").tsv({array:true})

testBorder = FileAttachment("Test Border@1.txt").tsv({array:true})

qgisBorder = FileAttachment("QGIS Border.geojson").json()

qgistoobservable = FileAttachment("QGIStoOBSERVABLE2.geojson").json()

buildingFootprints = FileAttachment("Building Footprints.geojson").json()

manhattanDistrictOutlines = FileAttachment("Manhattan District Outlines.geojson").json()

manhattanOutline = FileAttachment("Manhattan Outline.geojson").json()

roadCenterlines = FileAttachment("Road Centerlines.geojson").json()

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.

Learn more