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], bbox_nyc);//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 //staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)") staticLines(path, nycHexagon_merge.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)") 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(200,200,200)' 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.1){color = "rgb(255,0,0)"} if(d.properties.AF_PFS >= 0.1 && d.properties.AF_PFS < 0.27){color = "rgb(200,0,0)"} if(d.properties.AF_PFS >= 0.27 && d.properties.AF_PFS < 0.54){color = "rgb(150,0,0)"} if(d.properties.AF_PFS >= 0.54 && d.properties.AF_PFS < 0.82){color = "rgb(100,0,0)"} if(d.properties.AF_PFS >= 0.82 && d.properties.AF_PFS < 0.99){color = "rgb(50,0,0)"} } if(category=="Air Quality Index"){ if(d.properties.PM25F_PFS >= 0.26 && d.properties.PM25F_PFS < 0.49){color = "rgb(255,255,212)"} if(d.properties.PM25F_PFS >= 0.49 && d.properties.PM25F_PFS < 0.56){color = "rgb(254,217,142)"} if(d.properties.PM25F_PFS >= 0.56 && d.properties.PM25F_PFS < 0.6){color = "rgb(254,153,41)"} if(d.properties.PM25F_PFS >= 0.6 && d.properties.PM25F_PFS < 0.66){color = "rgb(217,95,14)"} if(d.properties.PM25F_PFS >= 0.66 && d.properties.PM25F_PFS < 0.71){color = "rgb(153,52,4)"} } if(category=="Tree Coverage"){ if(d.properties.NUMPOINTS >= 0.00 && d.properties.NUMPOINTS < 48.00){color = "rgb(247,252,245)"} if(d.properties.NUMPOINTS >= 48.00 && d.properties.NUMPOINTS < 128.00){color = "rgb(201,234,194)"} if(d.properties.NUMPOINTS >= 128.00 && d.properties.NUMPOINTS < 171.00){color = "rgb(123,199,124)"} if(d.properties.NUMPOINTS >= 171.00 && d.properties.NUMPOINTS < 221.60){color = "rgb(42,146,75)"} if(d.properties.NUMPOINTS >= 221.60 && d.properties.NUMPOINTS < 1127.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(); }