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