D3 Examples - Dial Chart examples

xxxxxxxxxx
 
<!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>
​
    <style type="text/css">
​
    #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;
​
      var layout = [ 
        { x: 150, y: 250, r: 80, m: 100, ticks: 2, mark: 'line' }, 
        { x: 460, y: 250, r: 200, m: 50, ticks: 4, mark: 'line' }, 
        { x: 810, y: 250, r: 120, m: 80, ticks: 2, mark: 'circle' } 
      ];
      var charts = layout.map(function(d) { 
        return NBXDialChart()
          .width(d.r * 2)
          .height(d.r * 2)
          .domain([0, d.m])
          .range([-150, 150])
          .minorTicks(d.ticks)
          .minorMark(d.mark);
      });      
      
      var svg = d3.select(chartselector)
        .append('svg:svg')
          .attr('width', w) 
          .attr('height', h);
      
      var dials = svg.selectAll('g.dial')
          .data(layout)
        .enter().append('svg:g')
          .attr('class', 'dial')
          .attr('id', function(d, i) { return 'dial-' + i; })
          .attr('transform', function(d) { return 'translate(' + (d.x - d.r) + ',' + (d.y - d.r) + ')'; } );
​
      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>
​
    