Skip to content

Instantly share code, notes, and snippets.

@nlinc1905

nlinc1905/index.html

Created November 24, 2014 04:01
Show Gist options
  • Save nlinc1905/09973b805e7fa5c008fa to your computer and use it in GitHub Desktop.
Save nlinc1905/09973b805e7fa5c008fa to your computer and use it in GitHub Desktop.
Download ZIP
Treemap of the Market Shares of Various Industries with d3.js
Raw
index.html
<!doctype html>
<html>
<head>
<title>Industry Market Shares Treemap</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
h2 {
margin-left: 350px;
}
#svgVis {
float: left;
width: 1100px;
}
#mapKey {
display: inline;
}
#usBeer {
background-color: #d62728;
height: 10px;
width: 10px;
}
#webBrowser {
background-color: #2ca02c;
height: 10px;
width: 10px;
}
#searchEngine {
background-color: #8c564b;
height: 10px;
width: 10px;
}
#energyDrink {
background-color: #9467bd;
height: 10px;
width: 10px;
}
#usOil {
background-color: #c5b0d5;
height: 10px;
width: 10px;
}
#smartphone {
background-color: #ffbb78;
height: 10px;
width: 10px;
}
#fastFood {
background-color: #aec7e8;
height: 10px;
width: 10px;
}
#department {
background-color: #ff7f0e;
height: 10px;
width: 10px;
}
#pc {
background-color: #1f77b4;
height: 10px;
width: 10px;
}
#cars {
background-color: #ff9896;
height: 10px;
width: 10px;
}
#govCon {
background-color: #98df8a;
height: 10px;
width: 10px;
}
#homeIns {
background-color: #c49c94;
height: 10px;
width: 10px;
}
#forex {
background-color: #e377c2;
height: 10px;
width: 10px;
}
.active {
stroke: black;
stroke-width: .75px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Market Shares of Various Industries</h2><br/>
<div id="svgVis">
<script>
var myData = {"name" : "Industries", "children" : [
{"name" : "Personal Computers", "size" : 3, "children" : [
{"name": "HP", "size": 21},
{"name": "Lenovo", "size": 18},
{"name": "Dell", "size": 39},
{"name": "Acer", "size": 3},
{"name": "Asus", "size": 18},
{"name": "Apple", "size": 135},
{"name": "Other", "size": 66}
] },
{"name" : "US Fast Food", "size": 3, "children" : [
{"name": "McDonald's", "size": 148.8},
{"name": "Burger King", "size": 36.6},
{"name": "Wendy's", "size": 36.9},
{"name": "Sonic", "size": 15.9},
{"name": "Jakc in the Box", "size": 13.2},
{"name": "Other", "size": 48.6}
] },
{"name" : "Department Stores", "size" : 3, "children" : [
{"name": "Sears", "size": 60},
{"name": "Macy's", "size": 39},
{"name": "JCPenny", "size": 27},
{"name": "Other", "size": 51},
{"name": "Walmart", "size": 81},
{"name": "Target", "size": 42}
] },
{"name" : "Smartphones", "size" : 3, "children" : [
{"name": "Android", "size": 201},
{"name": "Windows", "size": 9},
{"name": "Other", "size": 6},
{"name": "iOS", "size": 60},
{"name": "Blackberry", "size": 15},
{"name": "Symbian", "size": 9}
] },
{"name" : "Web Browsers", "size" : 1, "children" : [
{"name": "Internet Explorer", "size": 55.8},
{"name": "Firefox", "size": 20.1},
{"name": "Chrome", "size": 16.3},
{"name": "Safari", "size": 5.4},
{"name": "Opera", "size": 1.8},
{"name": "Other", "size": 0.6}
] },
{"name" : "Government Contracting", "size" : 5, "children" : [
{"name": "Other", "size": 285},
{"name": "L-3 Communications", "size": 15},
{"name": "SAIC", "size": 15},
{"name": "United Technologies", "size": 15},
{"name": "Raytheon", "size": 25},
{"name": "General Dynamics", "size": 35},
{"name": "Boeing", "size": 40},
{"name": "Lockheed Martin", "size": 70}
] },
{"name" : "US Beers", "size" : 1, "children" : [
{"name": "Bud Light", "size": 19},
{"name": "Coors Light", "size": 9},
{"name": "Budweiser", "size": 8},
{"name": "Miller Lite", "size": 7},
{"name": "Natural Light", "size": 4},
{"name": "Corona Extra", "size": 3},
{"name": "Other", "size": 50}
] },
{"name" : "US Automobiles", "size" : 4, "children" : [
{"name": "BMW", "size": 8.8},
{"name": "Chrysler, Dodge, Jeep, and Fiat", "size": 47.6},
{"name": "Ford", "size": 14.7},
{"name": "General Motors", "size": 70.8},
{"name": "Honda", "size": 39.6},
{"name": "Hyundai / Kia", "size": 36.4},
{"name": "Mazda", "size": 8},
{"name": "Daimler Auto Group", "size": 8.8},
{"name": "Nissan", "size": 30.8},
{"name": "Subaru", "size": 9.2},
{"name": "Toyota", "size": 58},
{"name": "Volkswagen Group", "size": 17.2},
{"name": "Other", "size": 6}
] },
{"name" : "Energy Drinks", "size" : 1, "children" : [
{"name": "Red Bull", "size": 39},
{"name": "Monster", "size": 28.9},
{"name": "5 Hour Energy", "size": 13},
{"name": "Rockstar", "size": 9.8},
{"name": "Doubleshot", "size": 3.6},
{"name": "Nos", "size": 3.5},
{"name": "Amp", "size": 2.2}
] },
{"name" : "US Petroleum", "size" : 2, "children" : [
{"name": "Shell", "size": 58.2},
{"name": "Petron Corp", "size": 78.2},
{"name": "Chevron", "size": 27.6},
{"name": "Other", "size": 36}
] },
{"name" : "Search Engines", "size" : 1, "children" : [
{"name": "Google", "size": 77},
{"name": "Bing", "size": 3},
{"name": "Yahoo", "size": 6},
{"name": "Other", "size": 1},
{"name": "Baidu", "size": 13}
] },
{"name" : "US Home Insurance", "size" : 5, "children" : [
{"name": "State Farm", "size": 106.5},
{"name": "Allstate", "size": 47},
{"name": "Farmer's Insurance", "size": 31},
{"name": "Liberty Mutual", "size": 27.5},
{"name": "USAA", "size": 23},
{"name": "Traveler's Companies", "size": 23},
{"name": "Nationwide", "size": 18.5},
{"name": "Other", "size": 223.5}
] },
{"name" : "Foreign Exchange Banks", "size" : 7, "children" : [
{"name": "Deutsche Bank", "size": 102.2},
{"name": "Citi", "size": 86.1},
{"name": "Barclays", "size": 77},
{"name": "UBS", "size": 73.5},
{"name": "HSBC", "size": 46.9},
{"name": "J.P. Morgan", "size": 46.2},
{"name": "RBS", "size": 41.3},
{"name": "Credit Suisse", "size": 32.9},
{"name": "Morgan Stanley", "size": 24.5},
{"name": "Goldman Sachs", "size": 21.7},
{"name": "BNP Paribas", "size": 18.2},
{"name": "Bank of America", "size": 16.8},
{"name": "Other", "size": 112.7}
] }
]};
var w = 1080 - 80,
h = 750 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20(),
root,
node;
var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });
var svg = d3.select("#svgVis").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
node = root = myData;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("mouseover", function() { d3.select(this).classed("active", true) })
.on("mouseout", function() { d3.select(this).classed("active", false) })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) { return color(d.parent.name); });
cell.append("svg:text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".4em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity", function(d) {
d.w = this.getComputedTextLength();
d.h = this.getBBox().height;
if (d.dx > d.w && d.dy > d.h) {
return 1;
} else {
return 0;
}
});
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
function size(d) {
return d.size;
}
function count(d) {
return 1;
}
function zoom(d) {
var kx = w / d.dx, ky = h / d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx / 2; })
.attr("y", function(d) { return ky * d.dy / 2; })
.style("opacity", function(d) {
if (kx * d.dx > d.w && kx * d.dy > d.h) {
return 1;
} else {
return 0;
}
});
node = d;
d3.event.stopPropagation();
}
</script>
</div>
<div id="mapKey">
<h3>Industry Key</h3>
<table>
<tr><td><div id="usBeer"></div></td><td>= US Beer</td></tr>
<tr><td><div id="webBrowser"></div></td><td>= Web Browser</td></tr>
<tr><td><div id="searchEngine"></div></td><td>= Search Engine</td></tr>
<tr><td><div id="energyDrink"></div></td><td>= Energy Drink</td></tr>
<tr><td><div id="usOil"></div></td><td>= US Petroleum</td></tr>
<tr><td><div id="smartphone"></div></td><td>= Smartphone</td></tr>
<tr><td><div id="fastFood"></div></td><td>= US Fast Food</td></tr>
<tr><td><div id="department"></div></td><td>= Department Store</td></tr>
<tr><td><div id="pc"></div></td><td>= Personal Computer</td></tr>
<tr><td><div id="cars"></div></td><td>= US Automobile</td></tr>
<tr><td><div id="govCon"></div></td><td>= Government Contracting</td></tr>
<tr><td><div id="homeIns"></div></td><td>= Home Insurance</td></tr>
<tr><td><div id="forex"></div></td><td>= Foreign Exchange Bank</td></tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment