<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<div id="content">
  <h1>Gross Rent as a Percentage of Household Income</h1>
  <h2>Data from the <a href="https://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_16_5YR_B25070&prodType=table">American Community Survey</a>, Circa 2016</h2>
  <svg id="canvas"></svg>
</div>
#content{
  width: 900px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Muli', san serif;
  
}

  h1{
  text-align:center;
  font-size: 24px;
  
}
h2{
   text-align: center;
    font-size: 14px;
}
.asdf{
  transition: fill 0.5s;
}
.asdf:hover{
  fill: #C9C9C9;
  stroke: #FFF;
  stroke-width: 2px;
}

.tooltip {
  position: absolute;
  text-align: center;
  width:0px;
  padding: 8px;
  margin-top: -20px;
  border:2px solid #333;
  font: 12px sans-serif;
  background: #F7F4F3;
  pointer-events: none;
  box-shadow:
                1px 1px #FFC15E,
                2px 2px #FFC15E,
                3px 3px #FFC15E;
  transition: all ease;
}
var width = 900
var height = 680


var path = d3.geoPath()
  .projection(null);

var colors = d3.scaleSequential(d3.interpolate("#F2CC8F","#E07A5F"));
  //.range(d3.schemePurples[7]);

var svg = d3.select("#canvas")
  .attr("width", width)
  .attr("height", height)

var g = svg.append("g")
  .attr("class","key")
  .attr("transform","translate(400,40)")

var data = {};
var names ={};

 var tooltip = d3.select("body").append("div")
  .attr("class","tooltip")
  .style("opacity", 0);
 
//Load in map data and household income data
//Tell d3 to queue data and then execute when it's all loaded
//This avoids ansynchroneous loading affecting our output
//Especially when dealing with large JSON files like topojson data
d3.queue()
  .defer(d3.json , "https://d3js.org/us-10m.v1.json")
 .defer(d3.csv, "https://docs.google.com/spreadsheets/d/e/2PACX-1vQK1F0gF62y_UNIsAhThc54HPWZHm-c-gZ1V5HTg5DYDHQ2eIbC3VKoaIJTqWniZnyD_UvfqpNxdBh6/pub?output=csv")
.await(mapLoad);
  
function mapLoad(error, us, rent) {  
  
  
  //Write FIPS data and percentages into new array
  //Makes accessing percentages easier after feeding in the JSON coordinate data
  rent.forEach(function(d){ data[d.FIPS] = +d.percentage});
  rent.forEach(function(d){ names[d.FIPS] = d.county});


 var colorMin = d3.min(rent, function(d){return +d.percentage;});
 var colorMax = d3.max(rent, function(d){return +d.percentage;});

 colors.domain([colorMin,colorMax]);  
 
  svg.append("g")
  .attr("class","county")
  .selectAll("path")
  .data(topojson.feature(us, us.objects.counties).features)
  .enter().append("path")
    .attr("class", "asdf")
    .attr("fill", function(d){ return colors(data[d.id]);})
    .attr("d", path)
    .on("mousemove", function(d){
          tooltip.transition()
            .duration(200)
            .style("opacity", 1)
            .style("width", "100px");
            tooltip.html("<b>" + names[d.id] + 
                         "</b></br> Median: " + data[d.id] + "%")
              .style("left", (d3.event.pageX + 20)+"px")
              .style("top", (d3.event.pageY + 20)+"px");
  ;})
    .on("mouseout", function(d){
          tooltip.transition()
            .duration(100)
            .style("opacity", 0)
            .style("width", "0px")});
  
  svg.append("path")
  .datum(topojson.mesh(us, us.objects.states, function(a, b){return a !== b;}))
  .attr("class","states")
  .attr("d", path)
  .attr("fill", "none")
  .attr("stroke" , "#F9EDCC")
  .attr("stroke-width", 1);
  
 var x = d3.scaleLinear()
  .domain([colorMin, colorMax])
  .rangeRound([300,435]);
  
  
  g.selectAll("rect")
    .data(colors.ticks(30).slice(1)//.reverse()
  )
  .enter().append("rect")
    .attr("height", 20)
    .attr("x", function(d,i){ return (i*4)+300})
    .attr("width", 5)
    .attr("fill", colors);
  
  g.append("text")
    .attr("class", "caption")
    .attr("x", function(d,i){ return (i*4)+300})
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-size", "12px")
    .text("Percentage");
  
  g.call(d3.axisBottom(x)
    .ticks(2)
    .tickSize(20)
    .tickFormat(function(x, i) { return i ? x : x + "%"; })
    .tickValues(colors.domain()))
  .select(".domain")
    .remove(); 
  
  
} ;
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.