Skip to content

Instantly share code, notes, and snippets.

@fracek
Created May 11, 2012
Embed
What would you like to do?
Nessun Dorma Stats - Destroyer's End
<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>Destroyer's End</h2>
<div class="legenda">
<h4>Legenda</h4>
<div class="lb titolo"></div><b>Niente Titolo</b>
<div class="clear"></div>
<div class="lb notitolo"></div><b>Titolo</b>
</div>
<div id="global">
<h3>Raiders e Reclute</h3>
<div id="de_g"></div>
</div>
<div id="raiders">
<h3>Solo raiders</h3>
<div id="de_r"></div>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
(function() {
var makePie = function(sel, data) {
var w = 300,
h = 300,
r = Math.min(w, h) / 2,
color = d3.scale.category20(),
donut = d3.layout.pie().sort(null),
arc = d3.svg.arc().innerRadius(r - 60).outerRadius(r - 20);
var svg = d3.select(sel).append('svg:svg')
.attr('width', w)
.attr('height', h)
.append('svg:g')
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var arcs = svg.selectAll("path")
.data(donut(data))
.enter().append("svg:path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { this._current = d; });
}
makePie('#de_g', [30, 41]);
makePie('#de_r', [30, 25]);
}());
* {
font-family: sans-serif; }
#page {
width: 700px;
position: relative;
margin: 0px auto; }
#global {
float: left;
text-align: center;
}
#raiders {
float: right;
text-align: center;
}
.legenda {
margin: 0px auto;
position: absolute;
top: 0;
left: 300px;
width: 100px; }
.legenda .lb {
float: left;
width: 20px;
height: 20px; }
.legenda b {
width: 80px; }
.legenda .lb.titolo {
background: #afc8e9; }
.legenda .lb.notitolo {
background: #1e75b3; }
.clear {
clear: both; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment