Manhattan Map 11/21/2024 - LYDIA / Seilsl's Workspace

Seilsl's Workspace

Workspace

Public

Edited

Dec 11

Fork of Manhattan Map 11/21/2024

chart = {

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

height = 1200;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()//projection system used

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

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','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)

}

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");

//console.log(color);

return color;

}

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

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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 Indicator

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

// var scaledRisk = totalRisk % 255;

console.log(totalRisk);

//var riskcolor = "none";

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

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

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

if(totalRisk == 2){riskcolor = "rgb(50, 20, 110)"}

if(totalRisk == 3){riskcolor = "rgb(80, 20, 140)"}

if(totalRisk == 4){riskcolor = "rgb(110, 20, 170)"}

return riskcolor;

//var red = Math.min(180, scaledRisk * 20);

// var green = Math.min(180, scaledRisk * 15);

//var blue = Math.min(255, scaledRisk * 15);

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

//console.log(color2);

//return color2;

}

return svg.node();

}

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

qgiscds = FileAttachment("QGISCDS.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