US Map of Nielsen Media Markets

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

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

<!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="https://d3js.org/d3.v3.js"></script>
<script src="https://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 https://stackoverflow.com/a/2901298
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

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

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.js

https://d3js.org/topojson.v1.min.js