Skip to content

Instantly share code, notes, and snippets.

@drbh
Created April 16, 2016 11:16
Show Gist options
  • Save drbh/4257b5a60c07a97e53b3ae2ef8ccb5d5 to your computer and use it in GitHub Desktop.
Save drbh/4257b5a60c07a97e53b3ae2ef8ccb5d5 to your computer and use it in GitHub Desktop.
<!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="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
// custom add in for color scaling
var colorScale = d3.scale.linear().domain([0, 1500000]).range(['red','darkgreen']);
// 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", "gold");
var prop = d.properties;
var string = "<p><strong>DMA #: </strong>: " + prop.dma + "</p>";
string += "<p><strong>Market Area Name</strong>: " + prop.city + "</p>";
string += "<p><strong>Sales Generated</strong>: $" + numberWithCommas(prop["rev"]) + "</p>";
d3.select("#textbox")
.html("")
.append("text")
.html(string)
})
.on("mouseout", function(d){
d3.select(this)
.attr("fill",colorScale(d['properties']['rev']))
})
.attr("opacity", 0.9)
.attr('fill', function(d) {
return colorScale(d['properties']['rev'])});
// 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 http://stackoverflow.com/a/2901298
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
{"500":{"rev":397935.14,"city":"Portland-Auburn, ME"},"501":{"rev":2725153.91,"city":"New York, NY"},"502":{"rev":96974.13,"city":"Binghamton, NY"},"503":{"rev":596684.78,"city":"Macon, GA"},"504":{"rev":1766700.33,"city":"Philadelphia, PA"},"505":{"rev":1348494.47,"city":"Detroit, MI"},"506":{"rev":705447.19,"city":"Boston, MA-Manchester, NH"},"507":{"rev":1121207.01,"city":"Savannah, GA"},"508":{"rev":883274.81,"city":"Pittsburgh, PA"},"509":{"rev":153943.21,"city":"Ft. Wayne, IN"},"510":{"rev":1926131.8,"city":"Cleveland-Akron (Canton), OH"},"512":{"rev":1972933.55,"city":"Baltimore, MD"},"513":{"rev":406265.28,"city":"Flint-Saginaw-Bay City, MI"},"514":{"rev":519119.47,"city":"Buffalo, NY"},"515":{"rev":5051310.9,"city":"Cincinnati, OH"},"516":{"rev":242416.48,"city":"Erie, PA"},"517":{"rev":4778032.41,"city":"Charlotte, NC"},"518":{"rev":775967.77,"city":"Greensboro-High Point-Winston Salem, NC"},"519":{"rev":545186.72,"city":"Charleston, SC"},"520":{"rev":267628.16,"city":"Augusta, GA"},"521":{"rev":193832.4,"city":"Providence, RI-New Bedford, MA"},"522":{"rev":144219.74,"city":"Columbus, GA"},"523":{"rev":294837.82,"city":"Burlington, VT-Plattsburgh, NY"},"524":{"rev":4926582.06,"city":"Atlanta, GA"},"525":{"rev":470040.29,"city":"Albany, GA"},"526":{"rev":71679.57,"city":"Utica, NY"},"527":{"rev":1492723.64,"city":"Indianapolis, IN"},"528":{"rev":3098829.28,"city":"Miami-Ft. Lauderdale, FL"},"529":{"rev":1166144.78,"city":"Louisville, KY"},"530":{"rev":226926.92,"city":"Tallahassee, FL-Thomasville, GA"},"531":{"rev":386081.01,"city":"Tri-Cities, TN-VA"},"532":{"rev":748881.5,"city":"Albany-Schenectady-Troy, NY"},"533":{"rev":926564.51,"city":"Hartford & New Haven, CT"},"534":{"rev":2985943.04,"city":"Orlando-Daytona Beach-Melbourne, FL"},"535":{"rev":8870433.17,"city":"Columbus, OH"},"536":{"rev":625410.53,"city":"Youngstown, OH"},"537":{"rev":135122.09,"city":"Bangor, ME"},"538":{"rev":360361.51,"city":"Rochester, NY"},"539":{"rev":1570650.38,"city":"Tampa-St Petersburg (Sarasota), FL"},"540":{"rev":279232.46,"city":"Traverse City-Cadillac, MI"},"541":{"rev":4784828.08,"city":"Lexington, KY"},"542":{"rev":1033586.55,"city":"Dayton, OH"},"543":{"rev":194898.67,"city":"Springfield-Holyoke, MA"},"544":{"rev":3075910.54,"city":"Norfolk-Portsmouth-Newport News,VA"},"545":{"rev":529478.74,"city":"Greenville-New Bern-Washington, NC"},"546":{"rev":368627.83,"city":"Columbia, SC"},"547":{"rev":614389.85,"city":"Toledo, OH"},"548":{"rev":725836.64,"city":"West Palm Beach-Ft. Pierce, FL"},"549":{"rev":178402.17,"city":"Watertown, NY"},"550":{"rev":1215459.68,"city":"Wilmington, NC"},"551":{"rev":255654.67,"city":"Lansing, MI"},"552":{"rev":36537.55,"city":"Presque Isle, ME"},"553":{"rev":103790.56,"city":"Marquette, MI"},"554":{"rev":113428.25,"city":"Wheeling, WV-Steubenville, OH"},"555":{"rev":344451.98,"city":"Syracuse, NY"},"556":{"rev":2561292.62,"city":"Richmond-Petersburg, VA"},"557":{"rev":1305482.76,"city":"Knoxville, TN"},"558":{"rev":233157.85,"city":"Lima, OH"},"559":{"rev":546380.08,"city":"Bluefield-Beckley-Oak Hill, WV"},"560":{"rev":4326184.5,"city":"Raleigh-Durham (Fayetteville), NC"},"561":{"rev":484662.39,"city":"Jacksonville, FL"},"563":{"rev":569095.03,"city":"Grand Rapids-Kalamazoo-Battle Creek, MI"},"564":{"rev":1842047.01,"city":"Charleston-Huntington, WV"},"565":{"rev":69335.63,"city":"Elmira, NY"},"566":{"rev":511301.43,"city":"Harrisburg-Lancaster-Lebanon-York, PA"},"567":{"rev":637213.08,"city":"Greenville-Spartanburg, SC-Asheville, NC-Anderson, SC"},"569":{"rev":206851.59,"city":"Harrisonburg, VA"},"570":{"rev":569283.13,"city":"Florence-Myrtle Beach, SC"},"571":{"rev":881291.03,"city":"Ft. Myers-Naples, FL"},"573":{"rev":804198.04,"city":"Roanoke-Lynchburg, VA"},"574":{"rev":254626.15,"city":"Johnstown-Altoona, PA"},"575":{"rev":302676.98,"city":"Chattanooga, TN"},"576":{"rev":209219.28,"city":"Salisbury, MD"},"577":{"rev":596866.94,"city":"Wilkes Barre-Scranton, PA"},"581":{"rev":262834.08,"city":"Terre Haute, IN"},"582":{"rev":119812.19,"city":"Lafayette, IN"},"583":{"rev":23330.75,"city":"Alpena, MI"},"584":{"rev":360156.86,"city":"Charlottesville, VA"},"588":{"rev":312268.78,"city":"South Bend-Elkhart, IN"},"592":{"rev":190751.58,"city":"Gainesville, FL"},"596":{"rev":72385.14,"city":"Zanesville, OH"},"597":{"rev":222039.26,"city":"Parkersburg, WV"},"598":{"rev":537002.86,"city":"Clarksburg-Weston, WV"},"600":{"rev":649929.7,"city":"Corpus Christi, TX"},"602":{"rev":5152901.92,"city":"Chicago, IL"},"603":{"rev":94849.03,"city":"Joplin, MO-Pittsburg, KS"},"604":{"rev":430889.27,"city":"Columbia-Jefferson City, MO"},"605":{"rev":428450.56,"city":"Topeka, KS"},"606":{"rev":69447.57,"city":"Dothan, AL"},"609":{"rev":672901.6,"city":"St. Louis, MO"},"610":{"rev":146134.58,"city":"Rockford, IL"},"611":{"rev":53651.75,"city":"Rochester, MN-Mason City, IA-Austin, MN"},"612":{"rev":163802.74,"city":"Shreveport, LA"},"613":{"rev":817806.24,"city":"Minneapolis-St. Paul, MN"},"616":{"rev":1161310.05,"city":"Kansas City, MO"},"617":{"rev":604170,"city":"Milwaukee, WI"},"618":{"rev":12947806.38,"city":"Houston, TX"},"619":{"rev":473838.43,"city":"Springfield, MO"},"622":{"rev":649956.59,"city":"New Orleans, LA"},"623":{"rev":3370999.63,"city":"Dallas-Ft. Worth, TX"},"624":{"rev":65170.14,"city":"Sioux City, IA"},"625":{"rev":653815.73,"city":"Waco-Temple-Bryan, TX"},"626":{"rev":133742.62,"city":"Victoria, TX"},"627":{"rev":162024.34,"city":"Wichita Falls, TX & Lawton, OK"},"628":{"rev":71612.06,"city":"Monroe, LA-El Dorado, AR"},"630":{"rev":720306.91,"city":"Birmingham, AL"},"631":{"rev":40753.36,"city":"Ottumwa, IA-Kirksville, MO"},"632":{"rev":390711.42,"city":"Paducah, KY-Cape Girardeau, MO-Harrisburg-Mount Vernon, IL"},"633":{"rev":497550.45,"city":"Odessa-Midland, TX"},"634":{"rev":339084.36,"city":"Amarillo, TX"},"635":{"rev":2823583.25,"city":"Austin, TX"},"636":{"rev":1412896.68,"city":"Harlingen-Weslaco-Brownsville-McAllen, TX"},"637":{"rev":290159.65,"city":"Cedar Rapids-Waterloo-Iowa City & Dubuque, IA"},"638":{"rev":108516.18,"city":"St. Joseph, MO"},"639":{"rev":196884.9,"city":"Jackson, TN"},"640":{"rev":575490.73,"city":"Memphis, TN"},"641":{"rev":1967620.82,"city":"San Antonio, TX"},"642":{"rev":74402.08,"city":"Lafayette, LA"},"643":{"rev":157499.34,"city":"Lake Charles, LA"},"644":{"rev":118699.39,"city":"Alexandria, LA"},"647":{"rev":48607.41,"city":"Greenwood-Greenville, MS"},"648":{"rev":866538.13,"city":"Champaign & Springfield-Decatur,IL"},"649":{"rev":146982.33,"city":"Evansville, IN"},"650":{"rev":1472067.81,"city":"Oklahoma City, OK"},"651":{"rev":326975.38,"city":"Lubbock, TX"},"652":{"rev":336802.54,"city":"Omaha, NE"},"656":{"rev":425817.06,"city":"Panama City, FL"},"657":{"rev":298409.87,"city":"Sherman, TX-Ada, OK"},"658":{"rev":414438.09,"city":"Green Bay-Appleton, WI"},"659":{"rev":1685466.03,"city":"Nashville, TN"},"661":{"rev":144133.75,"city":"San Angelo, TX"},"662":{"rev":216298.06,"city":"Abilene-Sweetwater, TX"},"669":{"rev":1443479.17,"city":"Madison, WI"},"670":{"rev":336820.18,"city":"Ft. Smith-Fayetteville-Springdale-Rogers, AR"},"671":{"rev":989178.3,"city":"Tulsa, OK"},"673":{"rev":257133.47,"city":"Columbus-Tupelo-West Point, MS"},"675":{"rev":268138.97,"city":"Peoria-Bloomington, IL"},"676":{"rev":97321.62,"city":"Duluth, MN-Superior, WI"},"678":{"rev":1055723.52,"city":"Wichita-Hutchinson, KS"},"679":{"rev":379608.56,"city":"Des Moines-Ames, IA"},"682":{"rev":192636.13,"city":"Davenport,IA-Rock Island-Moline,IL"},"686":{"rev":337950.14,"city":"Mobile, AL-Pensacola (Ft. Walton Beach), FL"},"687":{"rev":371648.85,"city":"Minot-Bismarck-Dickinson(Williston), ND"},"691":{"rev":442072.98,"city":"Huntsville-Decatur (Florence), AL"},"692":{"rev":406289.59,"city":"Beaumont-Port Arthur, TX"},"693":{"rev":928700.76,"city":"Little Rock-Pine Bluff, AR"},"698":{"rev":125523.22,"city":"Montgomery (Selma), AL"},"702":{"rev":358567.82,"city":"La Crosse-Eau Claire, WI"},"705":{"rev":202639.01,"city":"Wausau-Rhinelander, WI"},"709":{"rev":453756.71,"city":"Tyler-Longview(Lufkin & Nacogdoches), TX"},"710":{"rev":101690.59,"city":"Hattiesburg-Laurel, MS"},"711":{"rev":100073.13,"city":"Meridian, MS"},"716":{"rev":659010.88,"city":"Baton Rouge, LA"},"717":{"rev":18288.88,"city":"Quincy, IL-Hannibal, MO-Keokuk, IA"},"718":{"rev":437016.36,"city":"Jackson, MS"},"722":{"rev":274489.55,"city":"Lincoln & Hastings-Kearney, NE"},"724":{"rev":210636.24,"city":"Fargo-Valley City, ND"},"725":{"rev":468896.46,"city":"Sioux Falls(Mitchell), SD"},"734":{"rev":67199.84,"city":"Jonesboro, AR"},"736":{"rev":86441.97,"city":"Bowling Green, KY"},"737":{"rev":34224.9,"city":"Mankato, MN"},"740":{"rev":21840.8,"city":"North Platte, NE"},"743":{"rev":549565.1,"city":"Anchorage, AK"},"744":{"rev":630731,"city":"Honolulu, HI"},"745":{"rev":159534.73,"city":"Fairbanks, AK"},"746":{"rev":207092.91,"city":"Biloxi-Gulfport, MS"},"747":{"rev":142049.81,"city":"Juneau, AK"},"749":{"rev":425371.73,"city":"Laredo, TX"},"751":{"rev":2140463.14,"city":"Denver, CO"},"752":{"rev":629578.65,"city":"Colorado Springs-Pueblo, CO"},"753":{"rev":2124492.89,"city":"Phoenix, AZ"},"754":{"rev":85630.47,"city":"Butte-Bozeman, MT"},"755":{"rev":169094.73,"city":"Great Falls, MT"},"756":{"rev":160571.27,"city":"Billings, MT"},"757":{"rev":427523.94,"city":"Boise, ID"},"758":{"rev":303818.63,"city":"Idaho Falls-Pocatello, ID"},"759":{"rev":8658.65,"city":"Cheyenne, WY-Scottsbluff, NE"},"760":{"rev":52749.29,"city":"Twin Falls, ID"},"762":{"rev":109742.66,"city":"Missoula, MT"},"764":{"rev":110100.13,"city":"Rapid City, SD"},"765":{"rev":521884.06,"city":"El Paso, TX"},"766":{"rev":53957.61,"city":"Helena, MT"},"767":{"rev":113221.74,"city":"Casper-Riverton, WY"},"770":{"rev":521684.99,"city":"Salt Lake City, UT"},"771":{"rev":78201.49,"city":"Yuma, AZ-El Centro, CA"},"773":{"rev":251016.57,"city":"Grand Junction-Montrose, CO"},"789":{"rev":449534.9,"city":"Tucson (Sierra Vista), AZ"},"790":{"rev":1208466.03,"city":"Albuquerque-Santa Fe, NM"},"798":{"rev":16450.33,"city":"Glendive, MT"},"800":{"rev":654719.31,"city":"Bakersfield, CA"},"801":{"rev":219436.71,"city":"Eugene, OR"},"802":{"rev":96102.33,"city":"Eureka, CA"},"803":{"rev":25953539.88,"city":"Los Angeles, CA"},"804":{"rev":282260.58,"city":"Palm Springs, CA"},"807":{"rev":6904089.12,"city":"San Francisco-Oakland-San Jose, CA"},"810":{"rev":478302.59,"city":"Yakima-Pasco-Richland-Kennewick, WA"},"811":{"rev":340478.71,"city":"Reno, NV"},"813":{"rev":295184.59,"city":"Medford-Klamath Falls, OR"},"819":{"rev":5756813.96,"city":"Seattle-Tacoma, WA"},"820":{"rev":2074768.52,"city":"Portland, OR"},"821":{"rev":110558.35,"city":"Bend, OR"},"825":{"rev":1021719.61,"city":"San Diego, CA"},"828":{"rev":266024.76,"city":"Monterey-Salinas, CA"},"839":{"rev":842332.65,"city":"Las Vegas, NV"},"855":{"rev":327506.01,"city":"Santa Barbara-Santa Maria-San Luis Obispo, CA"},"862":{"rev":3376856.19,"city":"Sacramento-Stockton-Modesto, CA"},"866":{"rev":558601.28,"city":"Fresno-Visalia, CA"},"868":{"rev":223675.9,"city":"Chico-Redding, CA"},"881":{"rev":1082361.96,"city":"Spokane, WA"}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment