US Map of Nielsen Media Markets by wboykinm

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

Map adapted from Mike Bostock’s map example
Topojson made by converting shapefile from here to topojson via Mike Bostock’s instructions
Nielsen rank and TV data via tvb

###Notes

Some areas are shaped really strangely (such as a slice of Nevada being part of the Denver media market) but that is really how they are divided

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 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 = "#4682b4";

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];
      }
    }
  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>