Skip to content

Instantly share code, notes, and snippets.

@fracek
Created May 11, 2012
Embed
What would you like to do?
Nessun Dorma Stats - Classes
count class
10 Warrior
9 Paladin
6 Hunter
5 Rogue
5 Priest
5 Death Knight
8 Shaman
6 Mage
4 Warlock
13 Druid
<html>
<head>
<title>Nessun Dorma Stats</title>
<script src="http://d3js.org/d3.v2.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<h2>Giocatori per classe</h2>
<div id="players"></div>
<script src="script.js"></script>
</div>
</body>
</html>
(function() {
var printClasses = function() {
d3.csv('classes.csv', function(rows) {
var chart = d3.select('#players').append('svg')
.attr('width', 700)
.attr('height', 230)
.attr('class', 'chart')
.append('g')
.attr('transform', 'translate(10,15)');
var x = d3.scale.linear()
.domain([0, d3.max(rows, function(r) { return r.count; })])
.range([0, 400]);
var classes = [];
for (i = 0; i < rows.length; i++) {
classes.push(rows[i]['class']);
}
var y = d3.scale.ordinal()
.domain(classes)
.rangeBands([0, 200]);
chart.selectAll('rect')
.data(rows)
.enter().append('rect')
.attr('y', function(d) { return y(d['class']); })
.attr('width', function(d) { return x(d.count); })
.attr('height', y.rangeBand())
.attr('class', function(d) { return d['class']; })
.on('mouseover', function(d) {
var c = d['class'] + ' highlight';
d3.select(this).attr('class', c);
})
.on('mouseout', function(d) {
d3.select(this).attr('class', d['class']);
});
chart.selectAll('text')
.data(rows)
.enter().append('text')
.attr('x', function(d) { return x(d.count); })
.attr('y', function(d) { return y(d['class']) +
y.rangeBand() / 2; })
.attr('dx', -3)
.attr('dy', '.35em')
.attr('text-anchor', 'end')
.text(function(d) { return d.count; });
});
}
printClasses();
}());
* {
font-family: sans-serif; }
.chart {
background: #e6e6e6;
border: 1px solid #cccccc; }
.chart rect {
stroke: #e6e6e6;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease; }
.chart rect.Warrior {
fill: #c79c6e; }
.chart rect.Warrior.highlight {
fill: #d5b593; }
.chart rect.Paladin {
fill: #f58cba; }
.chart rect.Paladin.highlight {
fill: #f9bbd6; }
.chart rect.Hunter {
fill: #abd473; }
.chart rect.Hunter.highlight {
fill: #c2e09a; }
.chart rect.Rogue {
fill: #fff569; }
.chart rect.Rogue.highlight {
fill: #fff89c; }
.chart rect.Priest {
fill: white; }
.chart rect.Priest.highlight {
fill: #e6e6e6; }
.chart rect.Death {
fill: #c41f3b; }
.chart rect.Death.highlight {
fill: #df3753; }
.chart rect.Shaman {
fill: #0070d3; }
.chart rect.Shaman.highlight {
fill: #078bff; }
.chart rect.Mage {
fill: #69ccf0; }
.chart rect.Mage.highlight {
fill: #97dcf5; }
.chart rect.Warlock {
fill: #9482c9; }
.chart rect.Warlock.highlight {
fill: #b2a6d8; }
.chart rect.Druid {
fill: #ff7d0a; }
.chart rect.Druid.highlight {
fill: #ff983d; }
#page {
width: 700px;
margin: 0px auto; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment