HindSight: US Map of Nielsen Media Markets

Applying HindSight to...

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: 0.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 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 = "#aaa";

d3.json("nielsentopo.json", function(error, dma) {

var nielsen = dma.objects.nielsen_dma.geometries;
  // HindSight variables
  var hsTrigger;
  var hsDelay = 500;

// 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){
    	// Setting HindSight
    	var that = this;
    	hsTrigger = setTimeout(function(){ return hindsight(that)}, hsDelay);
      // Finish setting HindSight
      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){
    	clearTimeout(hsTrigger);
      d3.select(this)
      .attr("fill", defaultFill)
    })
    
    .attr("opacity", 0.6)
    .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, ",");
}

function hindsight(it) {
  d3.select(it).attr("opacity", 1.0);
}

</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