Skip to content

Instantly share code, notes, and snippets.

@abresler

abresler/index.html

Created February 5, 2014 23:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abresler/8835509 to your computer and use it in GitHub Desktop.
Save abresler/8835509 to your computer and use it in GitHub Desktop.
Download ZIP
race_by_year
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
<script src='http://nvd3.org/lib/fisheye.js' type='text/javascript'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<style>
.rChart {
display: block
margin: auto auto;
width: 100%;
height: 400px;
}
.bs-docs-example:after {
content: "";
background: transparent;
border: none;
}
</style>
</head>
<body ng-app>
<div class='container' ng-controller="DemoCtrl">
<div class='row'>
<div class='col-md-3'>
<form class='well'>
<label><b>Select group :</b></label>
<select class='form-control' ng-model="opts.group"
ng-options="ctl for ctl in controls.group.values">
</select><br>
<label><b>Select x :</b></label>
<select class='form-control' ng-model="opts.x"
ng-options="ctl for ctl in controls.x.values">
</select><br>
<select
ng-model="selected"
ng-options="c as c.value group by c.variable for c in filters"
class="form-control" multiple size="10">
</select>
</form>
</div>
<div class='col-md-8'>
<div class="bs-docs-example">
<div id='chart23e522168a19' class='rChart '>
<svg></svg>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function DemoCtrl($scope){
$scope.opts = {
"dom": "chart23e522168a19",
"width": 800,
"height": 515,
"x": "year",
"y": "total",
"group": "label",
"type": "multiBarChart",
"id": "chart23e522168a19"
}
$scope.data = [
{
"year": 1985,
"label": "men_white",
"total": 1190,
"gender": "men",
"race": "white"
},
{
"year": 1985,
"label": "women_white",
"total": 1723,
"gender": "women",
"race": "white"
},
{
"year": 1985,
"label": "men_black",
"total": 74,
"gender": "men",
"race": "black"
},
{
"year": 1985,
"label": "women_black",
"total": 140,
"gender": "women",
"race": "black"
},
{
"year": 1985,
"label": "men_other",
"total": 30,
"gender": "men",
"race": "other"
},
{
"year": 1985,
"label": "women_other",
"total": 32,
"gender": "women",
"race": "other"
},
{
"year": 1987,
"label": "men_white",
"total": 1137,
"gender": "men",
"race": "white"
},
{
"year": 1987,
"label": "women_white",
"total": 1711,
"gender": "women",
"race": "white"
},
{
"year": 1987,
"label": "men_black",
"total": 75,
"gender": "men",
"race": "black"
},
{
"year": 1987,
"label": "women_black",
"total": 156,
"gender": "women",
"race": "black"
},
{
"year": 1987,
"label": "men_other",
"total": 26,
"gender": "men",
"race": "other"
},
{
"year": 1987,
"label": "women_other",
"total": 49,
"gender": "women",
"race": "other"
},
{
"year": 1989,
"label": "men_white",
"total": 1288,
"gender": "men",
"race": "white"
},
{
"year": 1989,
"label": "women_white",
"total": 1911,
"gender": "women",
"race": "white"
},
{
"year": 1989,
"label": "men_black",
"total": 62,
"gender": "men",
"race": "black"
},
{
"year": 1989,
"label": "women_black",
"total": 166,
"gender": "women",
"race": "black"
},
{
"year": 1989,
"label": "men_other",
"total": 43,
"gender": "men",
"race": "other"
},
{
"year": 1989,
"label": "women_other",
"total": 57,
"gender": "women",
"race": "other"
},
{
"year": 1990,
"label": "men_white",
"total": 1340,
"gender": "men",
"race": "white"
},
{
"year": 1990,
"label": "women_white",
"total": 1917,
"gender": "women",
"race": "white"
},
{
"year": 1990,
"label": "men_black",
"total": 62,
"gender": "men",
"race": "black"
},
{
"year": 1990,
"label": "women_black",
"total": 157,
"gender": "women",
"race": "black"
},
{
"year": 1990,
"label": "men_other",
"total": 46,
"gender": "men",
"race": "other"
},
{
"year": 1990,
"label": "women_other",
"total": 69,
"gender": "women",
"race": "other"
},
{
"year": 1991,
"label": "men_white",
"total": 1298,
"gender": "men",
"race": "white"
},
{
"year": 1991,
"label": "women_white",
"total": 1846,
"gender": "women",
"race": "white"
},
{
"year": 1991,
"label": "men_black",
"total": 87,
"gender": "men",
"race": "black"
},
{
"year": 1991,
"label": "women_black",
"total": 165,
"gender": "women",
"race": "black"
},
{
"year": 1991,
"label": "men_other",
"total": 60,
"gender": "men",
"race": "other"
},
{
"year": 1991,
"label": "women_other",
"total": 82,
"gender": "women",
"race": "other"
},
{
"year": 1992,
"label": "men_white",
"total": 1303,
"gender": "men",
"race": "white"
},
{
"year": 1992,
"label": "women_white",
"total": 1919,
"gender": "women",
"race": "white"
},
{
"year": 1992,
"label": "men_black",
"total": 99,
"gender": "men",
"race": "black"
},
{
"year": 1992,
"label": "women_black",
"total": 188,
"gender": "women",
"race": "black"
},
{
"year": 1992,
"label": "men_other",
"total": 76,
"gender": "men",
"race": "other"
},
{
"year": 1992,
"label": "women_other",
"total": 70,
"gender": "women",
"race": "other"
},
{
"year": 1993,
"label": "men_white",
"total": 1264,
"gender": "men",
"race": "white"
},
{
"year": 1993,
"label": "women_white",
"total": 1810,
"gender": "women",
"race": "white"
},
{
"year": 1993,
"label": "men_black",
"total": 88,
"gender": "men",
"race": "black"
},
{
"year": 1993,
"label": "women_black",
"total": 181,
"gender": "women",
"race": "black"
},
{
"year": 1993,
"label": "men_other",
"total": 73,
"gender": "men",
"race": "other"
},
{
"year": 1993,
"label": "women_other",
"total": 86,
"gender": "women",
"race": "other"
},
{
"year": 1994,
"label": "men_white",
"total": 1264,
"gender": "men",
"race": "white"
},
{
"year": 1994,
"label": "women_white",
"total": 1818,
"gender": "women",
"race": "white"
},
{
"year": 1994,
"label": "men_black",
"total": 99,
"gender": "men",
"race": "black"
},
{
"year": 1994,
"label": "women_black",
"total": 228,
"gender": "women",
"race": "black"
},
{
"year": 1994,
"label": "men_other",
"total": 79,
"gender": "men",
"race": "other"
},
{
"year": 1994,
"label": "women_other",
"total": 122,
"gender": "women",
"race": "other"
},
{
"year": 1995,
"label": "men_white",
"total": 1143,
"gender": "men",
"race": "white"
},
{
"year": 1995,
"label": "women_white",
"total": 1838,
"gender": "women",
"race": "white"
},
{
"year": 1995,
"label": "men_black",
"total": 87,
"gender": "men",
"race": "black"
},
{
"year": 1995,
"label": "women_black",
"total": 200,
"gender": "women",
"race": "black"
},
{
"year": 1995,
"label": "men_other",
"total": 96,
"gender": "men",
"race": "other"
},
{
"year": 1995,
"label": "women_other",
"total": 142,
"gender": "women",
"race": "other"
},
{
"year": 1996,
"label": "men_white",
"total": 1228,
"gender": "men",
"race": "white"
},
{
"year": 1996,
"label": "women_white",
"total": 1817,
"gender": "women",
"race": "white"
},
{
"year": 1996,
"label": "men_black",
"total": 103,
"gender": "men",
"race": "black"
},
{
"year": 1996,
"label": "women_black",
"total": 219,
"gender": "women",
"race": "black"
},
{
"year": 1996,
"label": "men_other",
"total": 103,
"gender": "men",
"race": "other"
},
{
"year": 1996,
"label": "women_other",
"total": 150,
"gender": "women",
"race": "other"
},
{
"year": 1997,
"label": "men_white",
"total": 1196,
"gender": "men",
"race": "white"
},
{
"year": 1997,
"label": "women_white",
"total": 1802,
"gender": "women",
"race": "white"
},
{
"year": 1997,
"label": "men_black",
"total": 81,
"gender": "men",
"race": "black"
},
{
"year": 1997,
"label": "women_black",
"total": 196,
"gender": "women",
"race": "black"
},
{
"year": 1997,
"label": "men_other",
"total": 103,
"gender": "men",
"race": "other"
},
{
"year": 1997,
"label": "women_other",
"total": 159,
"gender": "women",
"race": "other"
},
{
"year": 1998,
"label": "men_white",
"total": 1280,
"gender": "men",
"race": "white"
},
{
"year": 1998,
"label": "women_white",
"total": 1773,
"gender": "women",
"race": "white"
},
{
"year": 1998,
"label": "men_black",
"total": 92,
"gender": "men",
"race": "black"
},
{
"year": 1998,
"label": "women_black",
"total": 255,
"gender": "women",
"race": "black"
},
{
"year": 1998,
"label": "men_other",
"total": 102,
"gender": "men",
"race": "other"
},
{
"year": 1998,
"label": "women_other",
"total": 167,
"gender": "women",
"race": "other"
},
{
"year": 1999,
"label": "men_white",
"total": 1114,
"gender": "men",
"race": "white"
},
{
"year": 1999,
"label": "women_white",
"total": 1683,
"gender": "women",
"race": "white"
},
{
"year": 1999,
"label": "men_black",
"total": 101,
"gender": "men",
"race": "black"
},
{
"year": 1999,
"label": "women_black",
"total": 238,
"gender": "women",
"race": "black"
},
{
"year": 1999,
"label": "men_other",
"total": 115,
"gender": "men",
"race": "other"
},
{
"year": 1999,
"label": "women_other",
"total": 156,
"gender": "women",
"race": "other"
},
{
"year": 2000,
"label": "men_white",
"total": 1067,
"gender": "men",
"race": "white"
},
{
"year": 2000,
"label": "women_white",
"total": 1758,
"gender": "women",
"race": "white"
},
{
"year": 2000,
"label": "men_black",
"total": 78,
"gender": "men",
"race": "black"
},
{
"year": 2000,
"label": "women_black",
"total": 250,
"gender": "women",
"race": "black"
},
{
"year": 2000,
"label": "men_other",
"total": 89,
"gender": "men",
"race": "other"
},
{
"year": 2000,
"label": "women_other",
"total": 145,
"gender": "women",
"race": "other"
},
{
"year": 2001,
"label": "men_white",
"total": 1131,
"gender": "men",
"race": "white"
},
{
"year": 2001,
"label": "women_white",
"total": 1697,
"gender": "women",
"race": "white"
},
{
"year": 2001,
"label": "men_black",
"total": 84,
"gender": "men",
"race": "black"
},
{
"year": 2001,
"label": "women_black",
"total": 244,
"gender": "women",
"race": "black"
},
{
"year": 2001,
"label": "men_other",
"total": 104,
"gender": "men",
"race": "other"
},
{
"year": 2001,
"label": "women_other",
"total": 147,
"gender": "women",
"race": "other"
},
{
"year": 2002,
"label": "men_white",
"total": 1155,
"gender": "men",
"race": "white"
},
{
"year": 2002,
"label": "women_white",
"total": 1793,
"gender": "women",
"race": "white"
},
{
"year": 2002,
"label": "men_black",
"total": 104,
"gender": "men",
"race": "black"
},
{
"year": 2002,
"label": "women_black",
"total": 251,
"gender": "women",
"race": "black"
},
{
"year": 2002,
"label": "men_other",
"total": 109,
"gender": "men",
"race": "other"
},
{
"year": 2002,
"label": "women_other",
"total": 148,
"gender": "women",
"race": "other"
},
{
"year": 2003,
"label": "men_white",
"total": 1159,
"gender": "men",
"race": "white"
},
{
"year": 2003,
"label": "women_white",
"total": 1856,
"gender": "women",
"race": "white"
},
{
"year": 2003,
"label": "men_black",
"total": 101,
"gender": "men",
"race": "black"
},
{
"year": 2003,
"label": "women_black",
"total": 279,
"gender": "women",
"race": "black"
},
{
"year": 2003,
"label": "men_other",
"total": 149,
"gender": "men",
"race": "other"
},
{
"year": 2003,
"label": "women_other",
"total": 197,
"gender": "women",
"race": "other"
},
{
"year": 2004,
"label": "men_white",
"total": 1159,
"gender": "men",
"race": "white"
},
{
"year": 2004,
"label": "women_white",
"total": 1794,
"gender": "women",
"race": "white"
},
{
"year": 2004,
"label": "men_black",
"total": 106,
"gender": "men",
"race": "black"
},
{
"year": 2004,
"label": "women_black",
"total": 293,
"gender": "women",
"race": "black"
},
{
"year": 2004,
"label": "men_other",
"total": 149,
"gender": "men",
"race": "other"
},
{
"year": 2004,
"label": "women_other",
"total": 214,
"gender": "women",
"race": "other"
},
{
"year": 2005,
"label": "men_white",
"total": 932,
"gender": "men",
"race": "white"
},
{
"year": 2005,
"label": "women_white",
"total": 1373,
"gender": "women",
"race": "white"
},
{
"year": 2005,
"label": "men_black",
"total": 88,
"gender": "men",
"race": "black"
},
{
"year": 2005,
"label": "women_black",
"total": 240,
"gender": "women",
"race": "black"
},
{
"year": 2005,
"label": "men_other",
"total": 144,
"gender": "men",
"race": "other"
},
{
"year": 2005,
"label": "women_other",
"total": 199,
"gender": "women",
"race": "other"
},
{
"year": 2006,
"label": "men_white",
"total": 107,
"gender": "men",
"race": "white"
},
{
"year": 2006,
"label": "women_white",
"total": 278,
"gender": "women",
"race": "white"
},
{
"year": 2006,
"label": "men_black",
"total": 1152,
"gender": "men",
"race": "black"
},
{
"year": 2006,
"label": "women_black",
"total": 1682,
"gender": "women",
"race": "black"
},
{
"year": 2006,
"label": "men_other",
"total": 226,
"gender": "men",
"race": "other"
},
{
"year": 2006,
"label": "women_other",
"total": 328,
"gender": "women",
"race": "other"
},
{
"year": 2007,
"label": "men_white",
"total": 1201,
"gender": "men",
"race": "white"
},
{
"year": 2007,
"label": "women_white",
"total": 1637,
"gender": "women",
"race": "white"
},
{
"year": 2007,
"label": "men_black",
"total": 92,
"gender": "men",
"race": "black"
},
{
"year": 2007,
"label": "women_black",
"total": 283,
"gender": "women",
"race": "black"
},
{
"year": 2007,
"label": "men_other",
"total": 234,
"gender": "men",
"race": "other"
},
{
"year": 2007,
"label": "women_other",
"total": 340,
"gender": "women",
"race": "other"
},
{
"year": 2008,
"label": "men_white",
"total": 1278,
"gender": "men",
"race": "white"
},
{
"year": 2008,
"label": "women_white",
"total": 1833,
"gender": "women",
"race": "white"
},
{
"year": 2008,
"label": "men_black",
"total": 114,
"gender": "men",
"race": "black"
},
{
"year": 2008,
"label": "women_black",
"total": 262,
"gender": "women",
"race": "black"
},
{
"year": 2008,
"label": "men_other",
"total": 267,
"gender": "men",
"race": "other"
},
{
"year": 2008,
"label": "women_other",
"total": 377,
"gender": "women",
"race": "other"
},
{
"year": 2009,
"label": "men_white",
"total": 1302,
"gender": "men",
"race": "white"
},
{
"year": 2009,
"label": "women_white",
"total": 1835,
"gender": "women",
"race": "white"
},
{
"year": 2009,
"label": "men_black",
"total": 120,
"gender": "men",
"race": "black"
},
{
"year": 2009,
"label": "women_black",
"total": 299,
"gender": "women",
"race": "black"
},
{
"year": 2009,
"label": "men_other",
"total": 290,
"gender": "men",
"race": "other"
},
{
"year": 2009,
"label": "women_other",
"total": 390,
"gender": "women",
"race": "other"
},
{
"year": 2010,
"label": "men_white",
"total": 1272,
"gender": "men",
"race": "white"
},
{
"year": 2010,
"label": "women_white",
"total": 1796,
"gender": "women",
"race": "white"
},
{
"year": 2010,
"label": "men_black",
"total": 153,
"gender": "men",
"race": "black"
},
{
"year": 2010,
"label": "women_black",
"total": 288,
"gender": "women",
"race": "black"
},
{
"year": 2010,
"label": "men_other",
"total": 342,
"gender": "men",
"race": "other"
},
{
"year": 2010,
"label": "women_other",
"total": 545,
"gender": "women",
"race": "other"
},
{
"year": 2011,
"label": "men_white",
"total": 1310,
"gender": "men",
"race": "white"
},
{
"year": 2011,
"label": "women_white",
"total": 2032,
"gender": "women",
"race": "white"
},
{
"year": 2011,
"label": "men_black",
"total": 124,
"gender": "men",
"race": "black"
},
{
"year": 2011,
"label": "women_black",
"total": 315,
"gender": "women",
"race": "black"
},
{
"year": 2011,
"label": "men_other",
"total": 364,
"gender": "men",
"race": "other"
},
{
"year": 2011,
"label": "women_other",
"total": 509,
"gender": "women",
"race": "other"
},
{
"year": 2012,
"label": "men_white",
"total": 1255,
"gender": "men",
"race": "white"
},
{
"year": 2012,
"label": "women_white",
"total": 1783,
"gender": "women",
"race": "white"
},
{
"year": 2012,
"label": "men_black",
"total": 130,
"gender": "men",
"race": "black"
},
{
"year": 2012,
"label": "women_black",
"total": 275,
"gender": "women",
"race": "black"
},
{
"year": 2012,
"label": "men_other",
"total": 421,
"gender": "men",
"race": "other"
},
{
"year": 2012,
"label": "women_other",
"total": 581,
"gender": "women",
"race": "other"
}
]
$scope.controls = {
"group": {
"name": "group",
"value": "label",
"values": [ "label", "gender", "race", "year" ],
"label": "Select group :"
},
"x": {
"name": "x",
"value": "year",
"values": [ "year", "label", "gender", "race" ],
"label": "Select x :"
}
}
$scope.filters = [
{
"variable": "race",
"value": "white"
},
{
"variable": "race",
"value": "black"
},
{
"variable": "race",
"value": "other"
},
{
"variable": "gender",
"value": "men"
},
{
"variable": "gender",
"value": "women"
}
]
$scope.drawChart = function(){
drawChart($scope.opts, $scope.data)
}
$scope.$watch('selected', function(){
if (!(typeof($scope.selected) === "undefined")) {
$scope.opts.selected = $scope.selected.map(function(d){
selectKey={};
selectKey[d.variable]=d.value;
return selectKey;
})
}
})
$scope.$watch('opts',function(){
$scope.drawChart()
}, true)
}
function drawChart(opts, data){
if (_.keys(opts.selected).length > 0){
// for multiselect union
data = _.at(data,_.chain(opts.selected)
.map(function(d){
return _.compact(
data.map(function(val,ind){
if(val[_.keys(d)[0]]===d[_.keys(d)[0]]) {
return ind
} else {return false}
})
)
})
.flatten()
.uniq()
.value()
)
/* for multiselect intersection
data = _.chain(opts.selected)
.map(function(d){
return _.compact(
data.map(function(val,ind){
if(val[_.keys(d)[0]]===d[_.keys(d)[0]]) {
return ind
} else {return false}
})
)
})
.value();
var intersected = _.countBy(_.flatten(testdata,function(d){return d}));
var varKeys = _.uniq(_.flatten(opts.selected.map(function(d){return _.keys(d)})));
data = _.at(data,_.chain(intersected)
.map(function(d,i){
if (d===varKeys.length) {return i} else {return false}
})
.compact()
.value()
);
*/
}
var data = d3.nest()
.key(function(d){
return opts.group === undefined ? 'main' : d[opts.group]
})
.entries(data)
nv.addGraph(function() {
var chart = nv.models[opts.type]()
.x(function(d) { return d[opts.x] })
.y(function(d) { return d[opts.y] })
.width(opts.width)
.height(opts.height)
chart
.showControls(true)
.showLegend(true)
.showXAxis(true)
.showYAxis(true)
.stacked(true)
.reduceXTicks(true)
.color([ "#000000", "#009E60", "#773141", "#000080", "#CA001A", "#FFCC00", "#192F6B", "#FB4F14", "#0088CE", "#708090", "#D0B240", "#9ECEEE", "#000080", "#D4001F" ])
chart.xAxis
.rotateLabels( -20)
chart.yAxis
.tickFormat(function(d) {return d3.format('.0f')(d)})
d3.select("#" + opts.id + ' svg')
// .empty()
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment