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], bboxMiami);//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") //rhino displays 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) .on("mouseover", addText) .on("mouseout", removeText) function addText(event,d){ svg//draw text .append("text") //appends path to data .attr('class','dText') .attr('x', projection([d.Longitude,d.Lattitude])[0]-5) .attr("y", projection([d.Longitude,d.Lattitude])[1]+10) .attr('fill', 'black') .style('font-family','helvetica') .style("font-size", "11px") .text(d.AF_PFS) } function removeText(){ svg.selectAll('text.mText').remove() } return svg.node(); } //staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)") staticLines(path, hexagonMiamiMerge.features,"rgb(250,250,250)",'.25','.1',"rgb(250,250,250)") //lines from rhino polyline(miaminame2,'black','1','0','none','angles') polyline(island,'red','1','0','none','angles') polyline(core2,'red','1','0','none','angles') polyline(lowriskmiami1,'green','1','0','none','angles') polyline(medriskmiami,'yellow','1','0','none','angles') polyline(ai1m,'rgb(50,0,0)','1','0','none','angles') polyline(ai2m,'rgb(100,0,0)','1','0','none','angles') polyline(ai3m,'rgb(150,0,0)','1','0','none','angles') polyline(ai4m,'rgb(200,0,0)','1','0','none','angles') polyline(ai5m,'rgb(255,0,0)','1','0','none','angles') polyline(td1m,'rgb(247,252,245)','1','0','none','angles') polyline(td2m,'rgb(201,234,194)','1','0','none','angles') polyline(td3m,'rgb(123,199,124)','1','0','none','angles') polyline(td4m,'rgb(42,146,75)','1','0','none','angles') polyline(td5m,'rgb(0,68,27)','1','0','none','angles') polyline(aq1m,'rgb(255,255,212','1','0','none','angles') polyline(aq2m,'rgb(254,217,142)','1','0','none','angles') polyline(aq3m,'rgb(254,153,41)','1','0','none','angles') polyline(aq4m,'rgb(217,95,14','1','0','none','angles') polyline(aq5m,'rgb(153,52,4)','1','0','none','angles') polyline(miamiLedgend,'black','1','0','none','angles') polyline(rlam,'rgb(102,153,0)','1','0','none','angles') polyline(rlbm,'rgb(181,228,88','1','0','none','angles') polyline(rlcm,'rgb(249,246,68)','1','0','none','angles') polyline(rldm,'rgb(244,52,42)','1','0','none','angles') polyline(rlledgendm,'black','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) .on("mouseover", addText) .on("mouseout", removeText) function addText(event,d){ svg .append('rect') .attr("class", "dRect") .attr('x', path.centroid(d)[0]) .attr("y", path.centroid(d)[1]) .attr('width', 75) .attr("height", 75) .attr("fill", 'white') .attr("stroke", 'black') svg//draw text .append("text") //appends path to data .attr("class", "dText") .attr('x', path.centroid(d)[0]) .attr("y", path.centroid(d)[1]) .attr("fill", "black") .style("font-family", "helvetica") .style("font-size", "15px") .text(d.properties.grade) svg//draw text .append("text") //appends path to data .attr("class", "dText") .attr('x', path.centroid(d)[0]) .attr("y", path.centroid(d)[1]) .attr("fill", "black") .style("font-family", "helvetica") .style("font-size", "15px") .text(d.properties.AF_PFS) } function removeText(){ svg.selectAll('text.dText').remove() svg.selectAll('rect.dRect').remove() } return svg.node(); } //color for cells 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.00 && d.properties.PM25F_PFS < 0.31){color = "rgb(255,255,212)"} if(d.properties.PM25F_PFS >= 0.314 && d.properties.PM25F_PFS < 0.33){color = "rgb(254,217,142)"} if(d.properties.PM25F_PFS >= 0.33 && d.properties.PM25F_PFS < 0.34){color = "rgb(254,153,41)"} if(d.properties.PM25F_PFS >= 0.34 && d.properties.PM25F_PFS < 0.36){color = "rgb(217,95,14)"} if(d.properties.PM25F_PFS >= 0.36 && d.properties.PM25F_PFS < 0.42){color = "rgb(153,52,4)"} } if(category=="Tree Coverage"){ if(d.properties.Percent_by >= 0.00 && d.properties.Percent_by < 10.00){color = "rgb(247,252,245)"} if(d.properties.Percent_by >= 10.00 && d.properties.Percent_by< 14.00){color = "rgb(201,234,194)"} if(d.properties.Percent_by>= 14.00 && d.properties.Percent_by < 16.00){color = "rgb(123,199,124)"} if(d.properties.Percent_by >= 16.00 && d.properties.Percent_by < 25.00){color = "rgb(42,146,75)"} if(d.properties.Percent_by >= 25.00 && d.properties.Percent_by < 32.00){color = "rgb(0,68,27)"} } return color } return svg.node(); }