Skip to content

Instantly share code, notes, and snippets.

@mikeleeco

mikeleeco/esrb.js

Last active August 29, 2015 14:19
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 mikeleeco/e250b7ac773cfbcd4eee to your computer and use it in GitHub Desktop.
Save mikeleeco/e250b7ac773cfbcd4eee to your computer and use it in GitHub Desktop.
Download ZIP
Distribution of ESRB Ratings (1994-2014)
Raw
esrb.js
var year = 1994;
var buttonYears = [1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014];
var margin = {top: 30, right: 0, bottom: 0, left: 100},
width = 500 - margin.left - margin.left,
height = 450 - margin.top - margin.bottom;
var body = d3.select("body");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeBands([0, height], 0.2, 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(10, "%");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
function keys(d) {
return d.esrb;
}
body.append("h2")
.text("ESRB Distribution");
var buttons = body.append("div")
.attr("class", "buttons-container")
.selectAll("div").data(buttonYears)
.enter().append("div")
.text(function(d) { return d; })
.attr("class", function(d) {
if(d == year)
return "button selected";
else
return "button";
});
body.append("div")
.attr("class", "clearfix")
body.append("div")
.attr("class", "top-label esrb-label")
.append("p")
.text("ESRB Rating");
body.append("div")
.attr("class", "top-label")
.append("p")
.text("Portion of ESRB Ratings");
body.append("div")
.attr("class", "clearfix")
d3.csv("esrbyear.csv", function(error, data){
var esrbData = data.filter(function(element) {return element.year == year});
x.domain([0, d3.max(data, function(element) { return element.avg; })]);
y.domain(esrbData.map(function(element) {return element.esrb}));
var svg = body.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 + ")");
var barGroup = svg.append("g")
.attr("class", "bar");
var bars = barGroup.selectAll("rect")
.data(esrbData, keys)
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d) {return y(d.esrb)})
.attr("width", function(d) {return x(d.avg)})
.attr("height", y.rangeBand());
svg.append("g")
.call(xAxis)
.attr("class", "x axis")
svg.append("g")
.call(yAxis)
.attr("class","y axis")
buttons.on("click", function(d) {
d3.select(".selected")
.classed("selected", false);
d3.select(this)
.classed("selected", true);
year = d;
esrbData = data.filter(function(element) {return element.year == year});
bars.data(esrbData, keys)
.transition()
.duration(500)
.attr("width", function(d) { return x(d.avg); });
});
});
Raw
esrbyear.csv
year esrb count avg
1994 Adults Only 4 0.0150943396
1995 Adults Only 1 0.0018975332
1996 Adults Only 4 0.0074626866
1997 Adults Only 4 0.0078740157
1998 Adults Only 5 0.0084175084
1999 Adults Only 2 0.0028818444
2000 Adults Only 1 0.0013140604
2001 Adults Only 5 0.0062893082
2002 Adults Only 3 0.0034324943
2003 Adults Only 5 0.006443299
2004 Adults Only 6 0.008683068
2005 Adults Only 2 0.0026773762
2006 Adults Only 0 0
2007 Adults Only 0 0
2008 Adults Only 0 0
2009 Adults Only 0 0
2010 Adults Only 0 0
2011 Adults Only 1 0.0030864198
2012 Adults Only 0 0
2013 Adults Only 0 0
2014 Adults Only 0 0
1994 Early Childhood 2 0.0075471698
1995 Early Childhood 2 0.0037950664
1996 Early Childhood 1 0.0018656716
1996 Early Childhood 0 0
1997 Early Childhood 2 0.0039370079
1999 Early Childhood 7 0.0100864553
2000 Early Childhood 4 0.0052562418
2001 Early Childhood 6 0.0075471698
2002 Early Childhood 11 0.0125858124
2003 Early Childhood 5 0.006443299
2004 Early Childhood 3 0.004341534
2005 Early Childhood 3 0.0040160643
2006 Early Childhood 0 0
2007 Early Childhood 0 0
2008 Early Childhood 0 0
2009 Early Childhood 1 0.0018083183
2010 Early Childhood 2 0.0042918455
2011 Early Childhood 0 0
2012 Early Childhood 0 0
2013 Early Childhood 0 0
2014 Early Childhood 0 0
1994 Everyone 45 0.1698113208
1995 Everyone 30 0.0569259962
1996 Everyone 45 0.0839552239
1997 Everyone 83 0.1633858268
1998 Everyone 316 0.531986532
1999 Everyone 423 0.6095100865
2000 Everyone 467 0.6136662286
2001 Everyone 478 0.6012578616
2002 Everyone 445 0.5091533181
2003 Everyone 363 0.4677835052
2004 Everyone 291 0.4211287988
2005 Everyone 283 0.3788487282
2006 Everyone 291 0.3688212928
2007 Everyone 321 0.3967861557
2008 Everyone 287 0.3910081744
2009 Everyone 194 0.3508137432
2010 Everyone 127 0.2725321888
2011 Everyone 66 0.2037037037
2012 Everyone 39 0.1517509728
2013 Everyone 26 0.1733333333
2014 Everyone 12 0.15
1994 Everyone 10+ 5 0.0188679245
1995 Everyone 10+ 4 0.0075901328
1996 Everyone 10+ 1 0.0018656716
1997 Everyone 10+ 0 0
1998 Everyone 10+ 1 0.0016835017
1999 Everyone 10+ 0 0
2000 Everyone 10+ 0 0
2001 Everyone 10+ 0 0
2002 Everyone 10+ 1 0.0011441648
2003 Everyone 10+ 4 0.0051546392
2004 Everyone 10+ 10 0.01447178
2005 Everyone 10+ 72 0.0963855422
2006 Everyone 10+ 121 0.1533586819
2007 Everyone 10+ 136 0.1681087763
2008 Everyone 10+ 138 0.1880108992
2009 Everyone 10+ 99 0.1790235081
2010 Everyone 10+ 91 0.19527897
2011 Everyone 10+ 56 0.1728395062
2012 Everyone 10+ 39 0.1517509728
2013 Everyone 10+ 20 0.1333333333
2014 Everyone 10+ 14 0.175
1994 Kids to Adults 146 0.5509433962
1995 Kids to Adults 363 0.6888045541
1996 Kids to Adults 285 0.5317164179
1997 Kids to Adults 222 0.437007874
1998 Kids to Adults 24 0.0404040404
1999 Kids to Adults 8 0.0115273775
2000 Kids to Adults 1 0.0013140604
2001 Kids to Adults 1 0.0012578616
2002 Kids to Adults 0 0
2003 Kids to Adults 1 0.0012886598
2004 Kids to Adults 0 0
2005 Kids to Adults 0 0
2006 Kids to Adults 0 0
2007 Kids to Adults 0 0
2008 Kids to Adults 0 0
2009 Kids to Adults 0 0
2010 Kids to Adults 0 0
2011 Kids to Adults 0 0
2012 Kids to Adults 0 0
2013 Kids to Adults 0 0
2014 Kids to Adults 0 0
1994 Mature 15 0.0566037736
1995 Mature 30 0.0569259962
1996 Mature 56 0.1044776119
1997 Mature 55 0.1082677165
1998 Mature 56 0.0942760943
1999 Mature 75 0.1080691643
2000 Mature 73 0.0959264126
2001 Mature 80 0.1006289308
2002 Mature 97 0.1109839817
2003 Mature 94 0.1211340206
2004 Mature 111 0.1606367583
2005 Mature 140 0.187416332
2006 Mature 111 0.1406844106
2007 Mature 104 0.1285537701
2008 Mature 91 0.1239782016
2009 Mature 100 0.1808318264
2010 Mature 95 0.2038626609
2011 Mature 90 0.2777777778
2012 Mature 94 0.3657587549
2013 Mature 64 0.4266666667
2014 Mature 31 0.3875
1994 Teen 48 0.1811320755
1995 Teen 97 0.1840607211
1996 Teen 144 0.2686567164
1997 Teen 142 0.2795275591
1998 Teen 192 0.3232323232
1999 Teen 179 0.257925072
2000 Teen 215 0.2825229961
2001 Teen 225 0.2830188679
2002 Teen 317 0.3627002288
2003 Teen 304 0.3917525773
2004 Teen 270 0.3907380608
2005 Teen 247 0.3306559572
2006 Teen 266 0.3371356147
2007 Teen 248 0.3065512979
2008 Teen 218 0.2970027248
2009 Teen 159 0.287522604
2010 Teen 151 0.3240343348
2011 Teen 111 0.3425925926
2012 Teen 85 0.3307392996
2013 Teen 40 0.2666666667
2014 Teen 23 0.2875
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: Helvetica;
}
svg {
width: 700px;
height: 500px;
margin-left: 30px;
font-size: 13px;
}
.buttons-container {
width: 520px;
margin-bottom: 25px;
}
.button {
float: left;
margin-left: 10px;
font-weight: lighter;
cursor: pointer;
}
.selected {
font-weight: bold;
}
.top-label {
font-size: 13px;
font-style: italic;
text-transform: uppercase;
float: left;
}
.esrb-label {
text-align: right;
font-weight: bold;
width: 90px;
padding-right: 10px;
}
.clearfix {
clear: both;
}
.bar {
fill: DarkSlateBlue;
}
.bar-label {
text-anchor: end;
}
.axis-label {
text-anchor: middle;
font-size: 13px;
}
.x.axis line {
fill: none;
stroke: #000;
}
.x.axis text {
font-size: 13px;
}
.axis path {
display:none;
}
.y.axis line {
display:none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var year = 1994;
var buttonYears = [1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014];
var margin = {top: 30, right: 0, bottom: 0, left: 100},
width = 500 - margin.left - margin.left,
height = 450 - margin.top - margin.bottom;
var body = d3.select("body");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeBands([0, height], 0.2, 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(10, "%");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
function keys(d) {
return d.esrb;
}
body.append("h2")
.text("ESRB Distribution");
var buttons = body.append("div")
.attr("class", "buttons-container")
.selectAll("div").data(buttonYears)
.enter().append("div")
.text(function(d) { return d; })
.attr("class", function(d) {
if(d == year)
return "button selected";
else
return "button";
});
body.append("div")
.attr("class", "clearfix")
body.append("div")
.attr("class", "top-label esrb-label")
.append("p")
.text("ESRB Rating");
body.append("div")
.attr("class", "top-label")
.append("p")
.text("Portion of ESRB Ratings");
body.append("div")
.attr("class", "clearfix")
d3.csv("esrbyear.csv", function(error, data){
var esrbData = data.filter(function(element) {return element.year == year});
x.domain([0, d3.max(data, function(element) { return element.avg; })]);
y.domain(esrbData.map(function(element) {return element.esrb}));
var svg = body.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 + ")");
var barGroup = svg.append("g")
.attr("class", "bar");
var bars = barGroup.selectAll("rect")
.data(esrbData, keys)
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d) {return y(d.esrb)})
.attr("width", function(d) {return x(d.avg)})
.attr("height", y.rangeBand());
svg.append("g")
.call(xAxis)
.attr("class", "x axis")
svg.append("g")
.call(yAxis)
.attr("class","y axis")
buttons.on("click", function(d) {
d3.select(".selected")
.classed("selected", false);
d3.select(this)
.classed("selected", true);
year = d;
esrbData = data.filter(function(element) {return element.year == year});
bars.data(esrbData, keys)
.transition()
.duration(500)
.attr("width", function(d) { return x(d.avg); });
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment