D3.js donut chart

by Rikin Patel

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="demo" style="text-align: center;">
<p id="demoAddRandom" class="value">r</p>
    </div>

CSS

svg {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 3px 0 #cecece inset;
    vertical-align: middle;
}
svg circle {
    cursor: pointer;
    fill: transparent;
    stroke: #79a32b;
    stroke-width: 2px;
}
svg circle:active {
    stroke: #45d3c7;
}
.action-button {
    background-color: rgba(175, 209, 183, 0.6);
    border: 1px solid #19380d;
    border-radius: 2px;
    display: inline-block;
    padding: 3px 12px;
    text-decoration: none;
}
.action-button:active {
    box-shadow: 0 0 3px 0 #868686 inset;
}
.action-button.destroy {
    background-color: rgba(197, 86, 86, 0.6);
    border: 1px solid #863636;
}

JavaScript

var JSONData = [
  { "id": 3, "created_at": "Sun May 05 2013", "amount": 12000},
  { "id": 1, "created_at": "Mon May 13 2013", "amount": 2000},
  { "id": 2, "created_at": "Thu Jun 06 2013", "amount": 17000},
  { "id": 4, "created_at": "Thu May 09 2013", "amount": 15000},
  { "id": 5, "created_at": "Mon Jul 01 2013", "amount": 16000}
]  
var data = JSONData.slice()
  var format = d3.time.format("%a %b %d %Y")
  var amountFn = function(d) { return d.amount }
  var dateFn = function(d) { return format.parse(d.created_at) }

  var x = d3.time.scale()
    .range([10, 280])
    .domain(d3.extent(data, dateFn))

  var y = d3.scale.linear()
    .range([180, 10])
    .domain(d3.extent(data, amountFn))
  
  var svg = d3.select("#demo").append("svg:svg")
  .attr("width", 300)
  .attr("height", 200)

  var refreshGraph = function() {
    svg.selectAll("circle").data(data).enter()
     .append("svg:circle")
     .attr("r", 4)
     .attr("cx", function(d) { return x(dateFn(d)) })
     .attr("cy", function(d) { return y(amountFn(d)) }) 
    .on("click", function(d) {
d3.select(".value").text("Date: " + d.created_at + " amount: " + d.amount)
}) 
  }

  d3.selectAll(".add-data")
   .on("click", function() {
     var start = d3.min(data, dateFn)
     var end = d3.max(data, dateFn)
     var time = start.getTime() + Math.random() * (end.getTime() - start.getTime())
     var date = new Date(time)

     obj = {
       'id': Math.floor(Math.random() * 70),
       'amount': Math.floor(1000 + Math.random() * 20001),
       'created_at': date.toDateString()
     }
     data.push(obj)
     refreshGraph()
  })

  refreshGraph()