Skip to content

Instantly share code, notes, and snippets.

@senthilthyagarajan

senthilthyagarajan/.block

Forked from curran/.block
Last active September 5, 2024 17:42
Show Gist options
  • Save senthilthyagarajan/f49d05086857f92f088b1d4a35fdb1a8 to your computer and use it in GitHub Desktop.
Save senthilthyagarajan/f49d05086857f92f088b1d4a35fdb1a8 to your computer and use it in GitHub Desktop.
Download ZIP
Julius Meinl Market Share Study
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zevia BDI</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;
// 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.BDI;
}));
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>% Sales</strong>: " + numberWithCommas(prop["Dollars"]) + "</p>";
string += "<p><strong>BDI</strong>: " + prop["BDI"] + "</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 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
nielsentopo.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
tv.json
{
"501": {
"Rank": "2",
"Designated Market Area (DMA)": "New York",
"TV Homes": "9.90",
"% of US": "149",
"DMA Code": "501",
"Dollars": "$226,061,101",
"BDI": "27.3",
"Cleaned DMA": "newyork"
},
"504": {
"Rank": "11",
"Designated Market Area (DMA)": "Philadelphia",
"TV Homes": "3.00",
"% of US": "121",
"DMA Code": "504",
"Cleaned DMA": "philadelphia",
"Dollars": "$105,966,559",
"BDI": "59.1"
},
"505": {
"Rank": "45",
"Designated Market Area (DMA)": "Detroit",
"TV Homes": "1.40",
"% of US": "97",
"DMA Code": "505",
"Cleaned DMA": "detroit",
"Dollars": "$114,258,612",
"BDI": "139.2"
},
"511": {
"Rank": "1",
"Designated Market Area (DMA)": "Washington, DC (Hagrstwn)",
"TV Homes": "3.90",
"% of US": "178",
"DMA Code": "511",
"Dollars": "$153,375,563",
"BDI": "65.1",
"Cleaned DMA": "washingtondchagrstwn"
},
"512": {
"Rank": "6",
"Designated Market Area (DMA)": "Baltimore",
"TV Homes": "1.30",
"% of US": "138",
"DMA Code": "512",
"Cleaned DMA": "baltimore",
"Dollars": "$153,375,563",
"BDI": "65.1"
},
"514": {
"Rank": "52",
"Designated Market Area (DMA)": "Buffalo",
"TV Homes": "0.40",
"% of US": "93",
"DMA Code": "514",
"Cleaned DMA": "buffalo",
"Dollars": "$49,964,533",
"BDI": "81.6"
},
"517": {
"Rank": "52",
"Designated Market Area (DMA)": "Charlotte",
"TV Homes": "1.00",
"% of US": "93",
"DMA Code": "517",
"Cleaned DMA": "charlotte",
"Dollars": "$79,604,695",
"BDI": "146.8"
},
"524": {
"Rank": "8",
"Designated Market Area (DMA)": "Atlanta",
"TV Homes": "2.80",
"% of US": "128",
"DMA Code": "524",
"Cleaned DMA": "atlanta",
"Dollars": "$116,309,953",
"BDI": "106.6"
},
"547": {
"Rank": "108",
"Designated Market Area (DMA)": "Toledo",
"TV Homes": "0.20",
"% of US": "72",
"DMA Code": "547",
"Cleaned DMA": "toledo",
"Dollars": "$47,902,695",
"BDI": "126.3"
},
"555": {
"Rank": "29",
"Designated Market Area (DMA)": "Syracuse",
"TV Homes": "0.30",
"% of US": "105",
"DMA Code": "555",
"Cleaned DMA": "syracuse",
"Dollars": "$20,217,284",
"BDI": "62.5"
},
"557": {
"Rank": "107",
"Designated Market Area (DMA)": "Knoxville",
"TV Homes": "0.30",
"% of US": "73",
"DMA Code": "557",
"Cleaned DMA": "knoxville",
"Dollars": "$43,002,002",
"BDI": "174.5"
},
"602": {
"Rank": "23",
"Designated Market Area (DMA)": "Chicago",
"TV Homes": "3.20",
"% of US": "108",
"DMA Code": "602",
"Cleaned DMA": "chicago",
"Dollars": "$151,888,395",
"BDI": "62.9"
},
"609": {
"Rank": "45",
"Designated Market Area (DMA)": "St. Louis",
"TV Homes": "0.90",
"% of US": "97",
"DMA Code": "609",
"Cleaned DMA": "stlouis",
"Dollars": "$50,467,708",
"BDI": "117.3"
},
"613": {
"Rank": "14",
"Designated Market Area (DMA)": "Minneapolis-St. Paul",
"TV Homes": "1.70",
"% of US": "118",
"DMA Code": "613",
"Cleaned DMA": "minneapolisstpaul",
"Dollars": "$64,432,508",
"BDI": "189.0"
},
"616": {
"Rank": "41",
"Designated Market Area (DMA)": "Kansas City",
"TV Homes": "0.80",
"% of US": "98",
"DMA Code": "616",
"Cleaned DMA": "kansascity",
"Dollars": "$39,450,658",
"BDI": "126.9"
},
"617": {
"Rank": "37",
"Designated Market Area (DMA)": "Milwaukee",
"TV Homes": "0.70",
"% of US": "100",
"DMA Code": "617",
"Cleaned DMA": "milwaukee",
"Dollars": "$67,764,115",
"BDI": "69.0"
},
"619": {
"Rank": "189",
"Designated Market Area (DMA)": "Springfield, MO",
"TV Homes": "0.20",
"% of US": "50",
"DMA Code": "619",
"Cleaned DMA": "springfieldmo",
"Dollars": "$52,673,401",
"BDI": "87.7"
},
"622": {
"Rank": "77",
"Designated Market Area (DMA)": "New Orleans",
"TV Homes": "0.40",
"% of US": "80",
"DMA Code": "622",
"Cleaned DMA": "neworleans",
"Dollars": "$44,658,774",
"BDI": "56.1"
},
"623": {
"Rank": "9",
"Designated Market Area (DMA)": "Dallas-Ft. Worth",
"TV Homes": "3.10",
"% of US": "127",
"DMA Code": "623",
"Cleaned DMA": "dallasftworth",
"Dollars": "$119,097,691",
"BDI": "124.9"
},
"650": {
"Rank": "130",
"Designated Market Area (DMA)": "Oklahoma City",
"TV Homes": "0.40",
"% of US": "67",
"DMA Code": "650",
"Cleaned DMA": "oklahomacity",
"Dollars": "$12,205,122",
"BDI": "51.7"
},
"652": {
"Rank": "66",
"Designated Market Area (DMA)": "Omaha",
"TV Homes": "0.30",
"% of US": "84",
"DMA Code": "652",
"Cleaned DMA": "omaha",
"Dollars": "$29,897,056",
"BDI": "149.5"
},
"659": {
"Rank": "68",
"Designated Market Area (DMA)": "Nashville",
"TV Homes": "0.80",
"% of US": "83",
"DMA Code": "659",
"Cleaned DMA": "nashville",
"Dollars": "$55,042,081",
"BDI": "213.1"
},
"671": {
"Rank": "130",
"Designated Market Area (DMA)": "Tulsa",
"TV Homes": "0.30",
"% of US": "67",
"DMA Code": "671",
"Cleaned DMA": "tulsa",
"Dollars": "$14,283,140",
"BDI": "104.5"
},
"757": {
"Rank": "148",
"Designated Market Area (DMA)": "Boise",
"TV Homes": "0.20",
"% of US": "61",
"DMA Code": "757",
"Cleaned DMA": "boise",
"Dollars": "$14,969,982",
"BDI": "238.4"
},
"803": {
"Rank": "31",
"Designated Market Area (DMA)": "Los Angeles",
"TV Homes": "6.1",
"% of US": "104",
"DMA Code": "803",
"Dollars": "$248,828,721",
"BDI": "68.7",
"Cleaned DMA": "losangeles"
},
"819": {
"Rank": "17",
"Designated Market Area (DMA)": "Seattle-Tacoma",
"TV Homes": "2",
"% of US": "116",
"DMA Code": "819",
"Cleaned DMA": "seattletacoma",
"Dollars": "$83,088,023",
"BDI": "197.7"
},
"820": {
"Rank": "56",
"Designated Market Area (DMA)": "Portland, OR",
"TV Homes": "1",
"% of US": "92",
"DMA Code": "820",
"Cleaned DMA": "portlandor",
"Dollars": "$80,579,449",
"BDI": "230.8"
},
"825": {
"Rank": "10",
"Designated Market Area (DMA)": "San Diego",
"TV Homes": "1.3",
"% of US": "123",
"DMA Code": "825",
"Cleaned DMA": "sandiego",
"Dollars": "$52,917,683",
"BDI": "92.4"
},
"839": {
"Rank": "148",
"Designated Market Area (DMA)": "Las Vegas",
"TV Homes": "0.4",
"% of US": "61",
"DMA Code": "839",
"Cleaned DMA": "lasvegas",
"Dollars": "$40,953,843",
"BDI": "80.0"
},
"881": {
"Rank": "145",
"Designated Market Area (DMA)": "Spokane",
"TV Homes": "0.2",
"% of US": "62",
"DMA Code": "881",
"Cleaned DMA": "spokane",
"Dollars": "$14,475,049",
"BDI": "286.0"
}
}
@senthilthyagarajan
Copy link
Author

change in hover text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment