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_seattle);//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, hexagonMergeSeattle3.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)") //lines from rhino polyline(name3,'black','1','0','none','angles') polyline(heatIslandSeattle,'red','1','0','none','angles') polyline(core,'red','1','0','none','angles') polyline(seattleHi2,'red','1','0','none','angles') polyline(lowriskseat,'green','1','0','none','angles') polyline(medriskseat,'yellow','1','0','none','angles') polyline(ai1S2,'rgb(50,0,0)','1','0','none','angles') polyline(ai2s,'rgb(100,0,0)','1','0','none','angles') polyline(ai3s,'rgb(150,0,0)','1','0','none','angles') polyline(ai4s,'rgb(200,0,0)','1','0','none','angles') polyline(ai5s,'rgb(255,0,0)','1','0','none','angles') polyline(td1s,'rgb(247,252,245)','1','0','none','angles') polyline(td2s,'rgb(201,234,194)','1','0','none','angles') polyline(td3s,'rgb(123,199,124)','1','0','none','angles') polyline(td4s,'rgb(42,146,75)','1','0','none','angles') polyline(td5s,'rgb(0,68,27)','1','0','none','angles') polyline(aq1s,'rgb(255,255,212','1','0','none','angles') polyline(aq2s,'rgb(254,217,142)','1','0','none','angles') polyline(aq3s,'rgb(254,153,41)','1','0','none','angles') polyline(aq4s,'rgb(217,95,14','1','0','none','angles') polyline(aq5s,'rgb(153,52,4)','1','0','none','angles') polyline(seattleLedgend,'black','1','0','none','angles') polyline(rlas,'rgb(102,153,0)','1','0','none','angles') polyline(rlbs,'rgb(181,228,88','1','0','none','angles') polyline(rlcs,'rgb(249,246,68)','1','0','none','angles') polyline(rlds,'rgb(244,52,42)','1','0','none','angles') polyline(rlledgend,'black','1','0','none','angles') 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) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } 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.000 && d.properties.PM25F_PFS < 0.240){color = "rgb(255,255,212)"} if(d.properties.PM25F_PFS >= 0.240 && d.properties.PM25F_PFS < 0.260){color = "rgb(254,217,142)"} if(d.properties.PM25F_PFS >= 0.260 && d.properties.PM25F_PFS < 0.290){color = "rgb(254,153,41)"} if(d.properties.PM25F_PFS >= 0.290 && d.properties.PM25F_PFS < 0.30){color = "rgb(217,95,14)"} if(d.properties.PM25F_PFS >= 0.30 && d.properties.PM25F_PFS < 0.31){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 } return svg.node(); }