block by curran 226a646101709048e3b006173a757ea7

US Map of Nielsen Media Markets

Full Screen

This is the map of Nielen Designated Marketing Areas using D3.js. Hover over for data related to each area.

See map here

See code here

###Credits

###Notes

forked from simzou‘s block: US Map of Nielsen Media Markets

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>US Map of Nielsen Media Markets</title>
<style>
.background {
  fill: none;
  pointer-events: all;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5;
  stroke-opacity: .7;
}

#dma-borders {
  fill: none;
  stroke: black;
  stroke-width: 0.7;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

#textbox {
  position: absolute;
  top: 400px;
  left: 50px;
  width: 275px;
  height: 100px;
}

#textbox text p {
  font-family: Arial, Helvetica;
  font-size: .8em;
  margin: 0;
}

</style>
</head>
<body>
<div id="textbox"></div>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
    height = 500;
// sets the type of view
var projection = d3.geo.albersUsa()
    .scale(1070) // size, bigger is bigger
    .translate([width / 2, height / 2]);

//creates a new geographic path generator
var path = d3.geo.path().projection(projection);
var xScale = d3.scale.linear()
    .domain([0, 7])
    .range([0, 500]);
  
var colorScale = d3.scale.linear()
		.range(['yellow', 'green']);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickSize(13)
    .tickFormat(d3.format("0.0f"));


//set svg window
var svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)

var graticule = d3.geo.graticule()
    .extent([[-98 - 45, 38 - 45], [-98 + 45, 38 + 45]])
    .step([5, 5]);

// adding a blank background
svg.append("rect")
    .datum(graticule)
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
   // .on("click", clicked);

//declare g as our appended svg
var g = svg.append("g");

var defaultFill = function(d){
  return colorScale(d.properties.Rank);
};
  
d3.json("nielsentopo.json", function(error, dma) {

  var nielsen = dma.objects.nielsen_dma.geometries;

  // adding data from tv json (number of TVs, etc) to map json
  d3.json("tv.json", function(error, tv){
    for (var i = 0; i < nielsen.length; i++){
      var dma_code = nielsen[i].id;
      for (key in tv[dma_code]){
        nielsen[i].properties[key] = tv[dma_code][key];
      }
    }
    
    colorScale.domain(d3.extent(nielsen, function(d){
      return d.properties.Rank;
    }));
  dma.objects.nielsen_dma.geometries = nielsen;

  g.append("g")
    .attr("id", "dmas")
    .selectAll("path")
    .data(topojson.feature(dma, dma.objects.nielsen_dma).features)
    .enter()
    .append("path")
    .attr("d", path)
    //.on("click", clicked)
    
    .on("mouseover", function(d){
      d3.select(this)
      .attr("fill", "orange");

      var prop = d.properties;

      var string = "<p><strong>Market Area Name</strong>: " + prop.dma1 + "</p>";
      string += "<p><strong>Homes with TVs</strong>: " + numberWithCommas(prop["TV Homes"]) + "</p>";
      string += "<p><strong>% with Cable</strong>: " + prop.cableperc + "%</p>";
      string += "<p><strong>Nielsen Rank</strong>: " + prop.Rank + "</p>";

      d3.select("#textbox")
        .html("")
        .append("text")
        .html(string)
    })

    .on("mouseout", function(d){
      d3.select(this)
      .attr("fill", defaultFill)
    })
    
    .attr("opacity", 0.9)
    .attr("fill", defaultFill);

  // add dma borders
  g.append("path", ".graticule")
      .datum(topojson.mesh(dma, dma.objects.nielsen_dma, function(a, b) { 
        return true;
      }))
      .attr("id", "dma-borders")
      .attr("d", path);
  })
})

// via //stackoverflow.com/a/2901298
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

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