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