Dial Chart examples

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>dials</title>       
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
    <script type="text/javascript" src="dial.chart.js"></script>

#dial-0 .needle path {
      fill: beige;
    }

#dial-1 .needle path {
      fill: #b21f24;
    }

#dial-2 .needle path {
      fill: steelblue;
    }
          
    circle.label {
      fill: white;
    }       
    
    line.label {
      stroke: white; 
      stroke-width: 1px;
    }
    
    text.label {
      font-family: Arial;
      font-size: 12px;
      fill: white; 
    }

#dial-1 text.label {
      font-size: 16px;      
    }

#dial-2 text.label {
      font-size: 14px;      
    }

</style>

</head>
<body style="background-color:#009F01">
  <button id="update" onclick="transition()">Update</button>
  <div id="chart">
  </div>
  <script type="text/javascript">

(function(chartselector) {

var w = 960,
          h = 500;

dials.each(function(d, i) { d3.select(this).data([20]).call(charts[i]); });

window.transition = function() {
        dials.each(function(d, i) { 
          d3.select(this)
              .data([ Math.random() * charts[i].domain()[1] ])
            .call(charts[i]); 
        });
      };

})('#chart');

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.min.js to a secure url

https://mbostock.github.com/d3/d3.min.js