Skip to content

Instantly share code, notes, and snippets.

@atmccann

atmccann/colorbrewer.js

Created September 26, 2013 21:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save atmccann/6720634 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save atmccann/6720634 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
colorbrewer.js
var colorbrewer = {PuOr: {
3: ["#f1a340","#f7f7f7","#998ec3"],
4: ["#e66101","#fdb863","#b2abd2","#5e3c99"],
5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],
6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],
7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],
8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],
9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],
10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]
},BrBG: {
3: ["#d8b365","#f5f5f5","#5ab4ac"],
4: ["#a6611a","#dfc27d","#80cdc1","#018571"],
5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],
6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],
7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],
8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],
9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],
10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]
},PRGn: {
3: ["#af8dc3","#f7f7f7","#7fbf7b"],
4: ["#7b3294","#c2a5cf","#a6dba0","#008837"],
5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],
6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],
7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],
8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]
},PiYG: {
3: ["#e9a3c9","#f7f7f7","#a1d76a"],
4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"],
5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],
6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],
7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],
8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]
},RdBu: {
3: ["#ef8a62","#f7f7f7","#67a9cf"],
4: ["#ca0020","#f4a582","#92c5de","#0571b0"],
5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],
6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],
7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]
},RdGy: {
3: ["#ef8a62","#ffffff","#999999"],
4: ["#ca0020","#f4a582","#bababa","#404040"],
5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"],
6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],
7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]
},RdYlBu: {
3: ["#fc8d59","#ffffbf","#91bfdb"],
4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"],
5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],
6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],
7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],
8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],
9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]
},Spectral: {
3: ["#fc8d59","#ffffbf","#99d594"],
4: ["#d7191c","#fdae61","#abdda4","#2b83ba"],
5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],
6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],
7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],
8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],
9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],
10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]
},RdYlGn: {
3: ["#fc8d59","#ffffbf","#91cf60"],
4: ["#d7191c","#fdae61","#a6d96a","#1a9641"],
5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],
6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],
7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],
8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
},Paired: {
3: ["#a6cee3","#1f78b4","#b2df8a"],
4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"],
5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],
6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],
7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],
8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],
9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],
10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],
11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],
12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
},Set3: {
3: ["#8dd3c7","#ffffb3","#bebada"],
4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"],
5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],
6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],
7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],
8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],
9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],
10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],
11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],
12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
}};
Raw
data4.csv
year val network show show_rating units
2002 4.5 WB no data no data no data
2003 4.0 WB 7th Heaven 8.1 m
2004 4.2 WB 7th Heaven 7.2 m
2005 3.3 WB Gilmore Girls 6.2 m
2006 WB no data no data
2007 WB no data no data
2008 WB no data no data
2009 WB no data no data
2010 WB no data no data
2011 WB no data no data
2012 WB no data no data
2002 4.2 UPN no data no data no data
2003 3.4 UPN All Of Us 4.7 m
2004 3.2 UPN Kevin Hill 4 m
2005 4.1 UPN America's Next Top Model 5 4.8 m
2006 UPN no data no data
2007 UPN no data no data
2008 UPN no data no data
2009 UPN no data no data
2010 UPN no data no data
2011 UPN no data no data
2012 UPN no data no data
2002 PBS no data no data
2003 PBS no data no data
2004 PBS no data no data
2005 PBS no data no data
2006 PBS no data no data
2007 PBS no data no data
2008 PBS no data no data
2009 PBS no data no data
2010 0.0 PBS no data no data
2011 1.5 PBS American Masters Billie Jean King 916 thousand
2012 1.7 PBS Need to Know 659 thousand
2002 13.4 NBC no data no data no data
2003 12.6 NBC Friends 24.5 m
2004 10.6 NBC E.R. 19.7 m
2005 9.9 NBC Law and Order:SVU 16.8 m
2006 11.0 NBC Deal or No Deal 15.8 m
2007 9.9 NBC Heroes 17 m
2008 8.3 NBC Heroes 10.2 m
2009 7.6 NBC Biggest Loser 8 9.9 m
2010 8.2 NBC The Event 10.9 m
2011 7.5 NBC Go On 9.7 m
2012 8.2 NBC The Voice 12.3 m
2002 0.0 MyNetworkTV no data no data
2003 0.0 MyNetworkTV no data no data
2004 0.0 MyNetworkTV no data no data
2005 0.0 MyNetworkTV no data no data
2006 0.8 MyNetworkTV Desire 1.5 m
2007 0.9 MyNetworkTV Academy 1.2 m
2008 1.3 MyNetworkTV Celebrity Expose 730 thousand
2009 1.4 MyNetworkTV no data no data no data
2010 0.0 MyNetworkTV no data no data
2011 0.0 MyNetworkTV no data no data
2012 0.0 MyNetworkTV no data no data
2002 1.2 ION Body and Soul 1.1 m
2003 0.8 ION America's Funniest Home Videos 900 thousand
2004 0.6 ION America's Most Talented Kids 600 thousand
2005 0.6 ION Palmetto Pointe 300 thousand
2006 0.6 ION Charlie's Angels 695 thousand
2007 0.5 ION 48 Hours 400 thousand
2008 0.4 ION 48 Hours 350 thousand
2009 0.6 ION Criminal Minds 705 thousand
2010 1.0 ION no data no data no data
2011 1.0 ION no data no data no data
2012 0.9 ION no data no data no data
2002 7.1 FOX no data no data no data
2003 6.0 FOX 24 11.6 m
2004 5.4 FOX That '70s Show 7.8 m
2005 6.5 FOX House 15.9 m
2006 7.5 FOX House 19.7 m
2007 6.9 FOX House 18.3 m
2008 7.7 FOX House 14.8 m
2009 7.4 FOX House 17.3 m
2010 6.5 FOX Glee 12.5 m
2011 8.4 FOX The X Factor 12.5 m
2012 7.2 FOX The Simpsons 8.1 m
2002 CW some show 12 m
2003 CW some show 12 m
2004 CW some show 12 m
2005 0.0 CW some show 12 m
2006 2.8 CW America's Next Top Model 5.3 m
2007 2.8 CW Smallville 5.2 m
2008 2.9 CW 90210 4.7 m
2009 2.2 CW Vampire Diaries 4.9 m
2010 2.5 CW Nikita 3.6 m
2011 1.6 CW Vampire Diaries 3.1 m
2012 0.7 CW Arrow 4.1 m
2002 14.0 CBS no data no data m
2003 13.9 CBS CSI 26.9 m
2004 13.6 CBS CSI 30.6 m
2005 12.8 CBS CSI 29 m
2006 13.0 CBS CSI 22.6 m
2007 11.7 CBS CSI 25.4 m
2008 11.3 CBS CSI 23.5 m
2009 11.8 CBS Navy NCIS 20.6 m
2010 12.5 CBS Navy NCIS 19.4 m
2011 12.3 CBS Two and a Half Men 28.7 m
2012 10.7 CBS Navy NCIS 20.5 m
2002 9.9 ABC no data no data no data
2003 10.6 ABC My Wife and Kids 13.6 m
2004 10.0 ABC Desperate Housewives 21.6 m
2005 12.2 ABC Desperate Housewives 28.4 m
2006 12.3 ABC Grey's Anatomy 25.4 m
2007 11.9 ABC Grey's Anatomy 21 m
2008 12.3 ABC Dancing with the Stars 21.4 m
2009 11.1 ABC Dancing with the Stars 22.8 m
2010 9.6 ABC Dancing with the Stars 21.3 m
2011 9.9 ABC Dancing with the Stars 19 m
2012 8.3 ABC Modern Family 14.4 m
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px Helvetica;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis line {
display: none;
}
.network-line{
fill: none;
stroke-width: 3px;
opacity:.5;
}
.network_name {
font-weight: bold;
opacity:1;
padding-top: 15px;
}
#tooltip {
background: rgba(255, 255, 255, 0.95);
position:absolute;
height:auto;
visibility:hidden;
z-index:9999;
padding:5px;
border: 1px solid #ddd;
padding: 5px 3px 0px 5px;
font-family: arial, sans-serif;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#main {
line-height: .5em;
}
#viewers, #show, #show_rating {
font-weight: bold !important;
}
#network, #year {
font-weight: bold;
}
.y-text {
font-weight: bold;
}
.data-line {
font-size:10px;
position: absolute;
left:300px;
padding: 35px;
}
</style>
<body>
<div id="tooltip">
<span id="network">hi</span>, <span id="year">year</span>
<p id="main">Average audience: <span id="viewers"></span></p>
<p id="main">Top show: <span id="show"></span> </p>
</div>
<div id="graphic"></div
<div id="data"><p class="data-line">GRAPHIC BY BLOOMBERG BUSINESSWEEEK. DATA: NIELSEN, HORIZON MEDIA. </p></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script>
var margin = {top: 20, right: 90, bottom: 30, left: 100},
width = 650 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var color = d3.scale.category10()
var x = d3.scale.linear()
.range([0, width])
.domain([2002,2012])
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) { return d});
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(5)
.ticks(8)
.orient("left")
.tickFormat(function(d) { return d + "m"});
var line = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.val); })
.defined(function(d) { return typeof(d.val) === "string" ? false : true; });
var svg = d3.select("#graphic").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data4.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "year"; }));
data.forEach(function(d) {
d.year = +d.year;
if (d.val) {
d.val = +d.val;
}
});
viewersByNetwork = d3.nest()
.key(function(d) { return d.network})
.entries(data);
console.log(viewersByNetwork);
y.domain([0,d3.max(data.map(function(d) { return d.val; }))]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class","y-text")
.attr("transform", "rotate(-90)")
.attr("y", -65)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Primetime viewers during September");
var linesContainer = svg.append("g")
linesContainer.selectAll(".network-line")
.data(viewersByNetwork)
.enter()
.append("path")
.attr("class", "network-line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) {return color(d.key); })
.on("mouseover", function(d){
d3.select(this)
.transition()
.duration(100)
.style("opacity",1)
})
.on("mouseout", function(d){
d3.select(this)
.transition()
.style("opacity",.5)
});
var labelElements = svg.append("g")
.attr("class", "network_name");
var label = labelElements.selectAll(".g-label-element")
.data(data.filter(function(d) { return typeof(d.val) === "string" ? false : true }))
.enter().append("g")
.attr("class", "g-label-element")
.attr("transform", function(d) { return "translate(" + x(d.year) + "," + y(d.val) + ")"; });
label.append("circle")
.attr("class","circle")
.attr("r", 3)
.style("fill", function(d) {return color(d.network); })
.on("mouseover", function(d){
d3.select(this)
.transition()
.duration(100)
.attr("r", 6)
.style("stroke", "#000")
.style("stroke-width",1)
d3.select("#tooltip")
.style("left", (d3.event.pageX) + 15 + "px")
.style("top", (d3.event.pageY) - 5 + "px")
.transition()
.style("visibility", "visible");
d3.select("#viewers")
.text(d.val + "m" );
d3.select("#show")
.text( d.show);
d3.select("#network")
.text( d.network );
d3.select("#year")
.text( d.year );
})
.on("mouseout", function(d){
d3.select(this)
.transition()
.attr("r", 3)
.style("stroke", "none")
.style("stroke-width", 0)
d3.select("#tooltip")
.transition()
.style("visibility", "hidden");
});
label.append("text")
.attr("class","network_name")
.attr("x", 10)
.attr("dy",5)
.text(function(d) { if (d.network == "UPN" || d.network == "WB" || d.year !== 2012) {return ""} else {return d.network}; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment