fracek/index.html

## index.html
<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>

## script.js
(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]);
}());


## style.css
* {
  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; }
	<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; }