D3 Examples - Page load time histograms

Page load time histograms

An example of multiple pie (donut) charts created with D3. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest. Arcs are tweened to the corresponding arc of the corresponding group in different csv files. And something is a little broken in that step. :)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Page load time histograms</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.csv.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.layout.js"></script>
    <style type="text/css">
@import url("https://mbostock.github.com/d3/ex/button.css");
​
body {
  text-align: center;
  padding: 0.5em;
  margin: 0;
}
​
svg {
  font: 10px sans-serif;
}
​
ul.date {
  margin: 0.5em auto;
  padding: 0;
}
​
ul.hor li {
  display:          inline-block;
  list-style-image: none;
  float:            left;
}
​
.clearfix:after {
  visibility: hidden;
  display:    block;
  clear:      both;
  content:    ".";
  height:     0;
}
​
    </style>
  </head>
  <body>
    <ul class="date hor clearfix"></ul>
    <script src="index.js"></script>
  </body>
</html>
​
    