chart = { const width = 900,//pixel size of the map height = 900; const svg = d3.create("svg") .attr("viewBox", [0, 0, width-50, height-10]); // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height], bboxNol);//out bounding box is here var path = 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 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") var l = svg.selectAll("line") //static lines from qgis function polyline(data, sfill, sOpac, sW, stroke,classVar){ g.enter().append("polyline") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class',classVar) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style("fill-opacity", .5) // Fully transparent fill .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } //staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)") staticLines(path, hexagon_nol_merge7.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)") //lines from rhino polyline(nolname2,'black','1','0','none','angles') polyline(nolledgend,'black','1','0','none','angles') polyline(ai1nol,'rgb(50,0,0)','1','0','none','angles') polyline(ai2nol,'rgb(100,0,0)','1','0','none','angles') polyline(ai3nol,'rgb(150,0,0)','1','0','none','angles') polyline(ai4nol,'rgb(200,0,0)','1','0','none','angles') polyline(ai5nol,'rgb(255,0,0)','1','0','none','angles') polyline(td1nol,'rgb(247,252,245)','1','0','none','angles') polyline(td2nol,'rgb(201,234,194)','1','0','none','angles') polyline(td3nol,'rgb(123,199,124)','1','0','none','angles') polyline(td4nol,'rgb(42,146,75)','1','0','none','angles') polyline(td5nol,'rgb(0,68,27)','1','0','none','angles') polyline(aq1nol,'rgb(255,255,212','1','0','none','angles') polyline(aq2nol,'rgb(254,217,142)','1','0','none','angles') polyline(aq3nol,'rgb(254,153,41)','1','0','none','angles') polyline(aq4nol,'rgb(217,95,14','1','0','none','angles') polyline(aq5nol,'rgb(153,52,4)','1','0','none','angles') polyline(highrisknol,'red','1','0','none','angles') polyline(lowrisknol,'green','1','0','none','angles') polyline(medrisknol1,'yellow','1','0','none','angles') 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", fillcolor) .style('stroke-opacity',"blue") .style("stroke-width", "1") .style("stroke", stroke) } function fillcolor(d){ var color = 'rgb(100,100,100)' if(category=="Redlining Grade"){ if(d.properties.grade == "A"){color = "rgb(102,153,0)"} if(d.properties.grade == "B"){color = "rgb(181,228,88)"} if(d.properties.grade == "C"){color = "rgb(249,246,68)"} if(d.properties.grade == "D"){color = "rgb(244,52,42)"} } if(category=="Asthma Index"){ if(d.properties.AF_PFS >= 0.00 && d.properties.AF_PFS < 0.09){color = "rgb(50,0,0)"} if(d.properties.AF_PFS >= 0.09 && d.properties.AF_PFS < 0.27){color = "rgb(100,0,0)"} if(d.properties.AF_PFS >= 0.27 && d.properties.AF_PFS < 0.68){color = "rgb(150,0,0)"} if(d.properties.AF_PFS >= 0.68 && d.properties.AF_PFS < 0.89){color = "rgb(200,0,0)"} if(d.properties.AF_PFS >= 0.89 && d.properties.AF_PFS < 0.97){color = "rgb(255,0,0)"} } if(category=="Air Quality Index"){ if(d.properties.PM25F_PFS >= 0.480 && d.properties.PM25F_PFS < 0.504){color = "rgb(255,255,212)"} if(d.properties.PM25F_PFS >= 0.504 && d.properties.PM25F_PFS < 0.528){color = "rgb(254,217,142)"} if(d.properties.PM25F_PFS >= 0.528 && d.properties.PM25F_PFS < 0.552){color = "rgb(254,153,41)"} if(d.properties.PM25F_PFS >= 0.552 && d.properties.PM25F_PFS < 0.576){color = "rgb(217,95,14)"} if(d.properties.PM25F_PFS >= 0.576 && d.properties.PM25F_PFS < 0.600){color = "rgb(153,52,4)"} } if(category=="Tree Coverage"){ if(d.properties.NUMPOINTS >= 0.00 && d.properties.NUMPOINTS < 0.00){color = "rgb(247,252,245)"} if(d.properties.NUMPOINTS >= 0.00 && d.properties.NUMPOINTS < 38.00){color = "rgb(201,234,194)"} if(d.properties.NUMPOINTS >= 38.00 && d.properties.NUMPOINTS < 87.00){color = "rgb(123,199,124)"} if(d.properties.NUMPOINTS >= 87.00 && d.properties.NUMPOINTS < 151.60){color = "rgb(42,146,75)"} if(d.properties.NUMPOINTS >= 151.60 && d.properties.NUMPOINTS < 420.00){color = "rgb(0,68,27)"} } return color } //Add statictext function addhText(event,d){ svg .append("text")//appends path to data .attr('class','hText') .attr('x',20) .attr("y",20) .attr('fill', 'black') .attr('font-family','Alegreya') .style("font-size","50px") .text("New Orleans") } return svg.node(); }