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

Cooper Myers's Workspace

Workspace

Public

Edited

Dec 15, 2024

Fork of Final NYC Data Map 12/16/2024 - COMBINED

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()

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.

Learn more