README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    This example shows how you can set up tick marks to be a fixed density rather
than a fixed number of tick marks. This is useful for implementing
visualizations that can be resized by the user.

Derived from 


Intro to D3 Example 103 - Customizing Axes
Timeline component prototype


## index.html
<!DOCTYPE html>
<html>
  <head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
    <meta charset="utf-8">
    <title>Density-based Ticks</title>

    <style>

      .axis text {
        font: 16pt sans-serif;
      }

      .axis .label {
        font: 24pt sans-serif;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        stroke-width: 2px;
        shape-rendering: crispEdges;
      }

    </style>
  </head>
  <body>
    <script>

      var outerWidth = 950;
      var outerHeight = 500;
      var margin = { left: 80, top: 50, right: 500, bottom: 250 };
      var xAxisLabelText = "Axis Label";
      var xAxisLabelOffset = 55;

      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");

      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);

      var xScale = d3.scale.linear().domain([0, 1000]);
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

      var xPixelsPerTick = 70;

      function render(){

        var time = Date.now() / 800;
        var varyingWidth = innerWidth + Math.sin(time) * 350;

        xAxis.ticks(varyingWidth / xPixelsPerTick);
        xAxisLabel.attr("x", varyingWidth / 2);

        xScale.range([0, varyingWidth]);
        xAxisG.call(xAxis);
        requestAnimationFrame(render);
      }
      render();


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

## thumbnail.png

      
          Raw
        
        
              thumbnail.png