0-60 speedo

by Andy Jones

HTML

<div id="chart">
  </div>

CSS

.needle path {
      fill: red;
    }

          
    circle.label {
      fill: white;
    }       
    
    line.label {
      stroke: white; 
      stroke-width: 1px;
    }
    
    text.label {
      font-family: Arial;
      font-size: 12px;
      fill: white; 
    }

     text.label {
      font-size: 12px;      
    } 


.speedofont {
    fill:black;
    font-family: Arial;
    font-size:12px;
    font-weight:bold;
}

JavaScript

//
// DialChart
//
speedometer = function() {

  var w = 256,
      h = 256,  
      m = [ 0, 0, 0, 0 ], // top right bottom left
      domain = [0, 1],
      range = [-135, 135],
      minorTicks = 4,
      minorMark = 'line',
      zeroToSixty = 1000
      
      dial = [ 1.00, 0.95, 0.92, 0.85 ],   
      scale = [ 0.71, 0.75, 0.76 ],
      needle = [ 0.83, 0.05 ],
      pivot = [ 0.10, 0.05 ]; 

  function dialchart(g) {
    g.each(function(d, i) {
       
      var wm = w - m[1] - m[3],
          hm = h - m[0] - m[2],
          a = d3.scale.linear().domain(domain).range(range);

      var r = Math.min(wm / 2, hm / 2);

      var g = d3.select(this).select('g');
      if (g.empty()) {

        g = d3.select(this).append('svg:g')
          .attr('transform', 'translate(' + (m[3] + wm / 2) + ',' + (m[0] + hm / 2) + ')');

        createDefs(g.append('svg:defs'));
                    
        // face
        
        g.append('svg:circle')
          .attr('r', r * dial[0])
          .style('fill', 'url(#outerGradient)')
          .attr('filter', 'url(#dropShadow)');  

        g.append('svg:circle')
          .attr('r', r * dial[1])
          .style('fill', 'url(#innerGradient)');

        g.append('svg:circle')
          .attr('r', r * dial[2])
          .style('fill', 'url(#faceGradient)');

        // scale

        var major = a.ticks(10);
        var minor = a.ticks(10 * minorTicks).filter(function(d) { return major.indexOf(d) == -1; });

        g.selectAll('text.label')
            .data(major)
          .enter().append('svg:text')
            .attr('class', 'label')
            .attr('x', function(d) { return Math.cos( (-90 + a(d)) / 180 * Math.PI) * r * scale[1]; })
            .attr('y', function(d) { return Math.sin( (-90 + a(d)) / 180 * Math.PI) * r * scale[1]; }) 
            .attr('text-anchor', 'middle')
            .attr('dy', '0.5em')
            .text(a.tickFormat());

        if (minorMark == 'circle') {
          g.selectAll('circle.label')
 ...