Allegheny County

This is a project for CS 573 Data Visualization at Worcester Polytechnic Institute in the Fall of 2017.

The data is about insured people in Allegheny County, PA who have been diagnosed with diabetes and comes from the Allegheny County / City of Pittsburgh / Western PA Regional Data Center published on data.gov.

The page shows a map of Allegheny county as a cholorpleth map, coloring each census tract by the proportion of insured people in that census tract who have been diagnosed with diabetes. The darker the green the higher the number of diagnosed/enrolled.

When hovering over the map, the text shows the number of the census tract currently selected and the proportion of people diagnosed with diabetes.

Clicking on a census tract brings up a bar chart showing the number of people diagnosed in that tract vs number of people enrolled.

forked from shimizu's block: D3.js v4 Mapping Tutorial : GeoJSON

<!DOCTYPE html>
<meta charset="utf-8">
<style>
text.big-text{
  font-size: 28px;
  font-weight: 400;
  position:absolute;
  top: 40px;
  left: 20px;
}
  text.label{
    font-size: 16px;
    font-weight: 200;
  }

</style>
<html>
<head>
</head>
<body>

var projection = d3
		.geoMercator() 
		.scale(37000)	
		.rotate([-0.25, 0.25, 0]) 
		.center([-80.4, 40.5]); 
	
	var path = d3.geoPath().projection(projection);　
	  
	var map = d3.select("body")
		.append("svg")
		.attr("width", 960)
		.attr("height", 500);
    //.attr('transform', `translate(0, 0)`);
  
	
	function type(d){
        d.TotalEnrollment=+d.TotalEnrollment;
        d.TotalDiagnosed=+d.TotalDiagnosed;
        return d;
  }
    
  
  function barChart(tract){

barSVG.selectAll('rect').remove()
    barSVG.selectAll('text').remove()
    
    diagRect=barSVG.append('rect')
        .attr('class', 'bar')
        .attr('height', +tract.properties.diag/50)
        .attr('width', 50)
        .attr('fill', 'red')
      	.attr('transform', `translate(70, 0)`);
    
    diagLabel=barSVG.append('text')
    		.attr('class','label')
    		.attr('x',65)
    		.attr('y', 150)
    		.text("Diagnosed");
       
    enRect=barSVG.append('rect')
    		.attr('class', 'bar')
    		.attr('height', +tract.properties.en/50)
    		.attr('width', 50)
    		.attr('fill', 'blue')
    		.attr('transform', `translate(140, 0)`);   
    
     diagLabel=barSVG.append('text')
    		.attr('class','label')
    		.attr('x',140)
    		.attr('y', 150)
    		.text("Enrolled");
    
  }
  
  function hover(d){
    if(d.properties.value==undefined){
      valueString='no data'
    }
    else valueString=d.properties.value
    bigText.text('Census Tract ' + d.properties.TRACTCE +', Proportion Diagnosed: ' + valueString);
    //barChart(d)
  }
    
  d3.csv("diabetes2015_tractNums.csv", type, function(data){
    const minVal=0;
    const maxVal=0.2;
        
    var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor]);
    
    /*var colorLegend = d3.legend.color()
        .labelFormat(d3.format(".0f"))
        .scale(ramp)
        .shapePadding(5)
        .shapeWidth(50)
        .shapeHeight(20)
        .labelOffset(12);

svg.append("g")
        .attr("transform", "translate(352, 60)")
        .call(colorLegend);*/
    
    d3.json("Allegheny_County_Census_Tracts_2016.geojson", function(json){
      
      // Loop through each census tract value in the .csv file
    	for (var i = 0; i < data.length; i++) {
        
      	// Grab census tract id
      	var dataTract = data[i].CensusTract;
        
      	// Grab proportion diagnosed of those enrolled 
      	var proportionDiag = data[i].TotalDiagnosed/data[i].TotalEnrolled;
        
        // Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {
        var jsonTract = json.features[j].properties.TRACTCE;

if (dataTract == jsonTract) {

// Copy the data values into the JSON
          json.features[j].properties.en = data[i].TotalEnrolled;
          json.features[j].properties.diag = data[i].TotalDiagnosed;
          json.features[j].properties.value = proportionDiag;

// Stop looking through the JSON
          break;
        }   
      }
      }
      map.selectAll("path")
			.data(json.features)
			.enter()
			.append("path")
			.attr("d", path)  
			.attr("stroke", "#828282")
      .attr("fill", function(d) { return ramp(d.properties.value) })
      //.attr("legend", true)
      .on("mouseover", function(d){hover(d)})
      .on("click", function(d){barChart(d)});
			
    })
    
   })

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js