Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 130 lines (101 sloc) 2.947 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
<!DOCTYPE html>
<html>
  <head>
    <title>Introduction to D3</title>
    <script type="text/javascript" src="d3/d3.v3.js"></script>
    <script type="text/javascript" src="data/browsers.js"></script>
    <style type="text/css">
      body {
        padding: 50px;
      }

      svg {
        border: 1px solid black;
      }

      text {
        font: 11px sans-serif;
        fill: gray;
      }
    </style>
  </head>
  <body>

  </body>
  <script type="text/javascript">

  /* Usefull function */
  var randomColor = function() {
    return '#' + (Math.random().toString(16) + '000000').substr(2, 6);
  }

  /* Convert the string dates to date objects */
  var dateParse = d3.time.format("%B %Y").parse
  stats.forEach(function(d) {
    d.month = dateParse(d.month)
    if (d.month == null) {
      throw "bad date" // Make sure we have a proper date (no typos in the file).
    }
  });
  stats = stats.reverse()

  /* Vis */
  var width = 700
  var height = 400

  var svg = d3.select('body')
    .append('svg')
      .attr('width', width)
      .attr('height', height)

  var sx = d3.time.scale()
    .range([10, width])

  var sy = d3.scale.linear()
    .domain([0, 1])
    .range([0, height])

  var windowSize = 10
  var windowPos = 0

  labelFormat = d3.time.format("%b %y")

  var render = function() {
    var data = stats.slice(windowPos, windowPos+windowSize)

    sx.domain([data[0].month, data[data.length-1].month])

    var selBar = svg.selectAll('rect.bar')
      .data(data, function(d) { return d.month; })

    selBar.enter().append('rect')
      .attr('class', 'bar')
      //.style('fill', randomColor)
      .style('fill', colors['IE6'])
      .attr('x', function(d) { return sx(d.month); })
      .attr('y', function(d) { return height - sy(d.data['IE6'] || 0); })
      .attr('width', 30)
      .attr('height', function(d) { return sy(d.data['IE6'] || 0); })


    selBar
      .transition()
      .duration(800)
        .attr('x', function(d) { return sx(d.month); })


    selBar.exit()
      .transition()
      .duration(800)
        .attr('x', function(d) { return sx(d.month); })
        .remove()

    // ----------------------------------------

    var selLabel = svg.selectAll('text.label')
      .data(data, function(d) { return d.month; })

    selLabel.enter().append('text')
      .attr('class', 'label')
      .attr('x', function(d) { return sx(d.month); })
      .attr('y', 20)
      .text(function(d) { return labelFormat(d.month); })


    selLabel
      .transition()
      .duration(800)
        .attr('x', function(d) { return sx(d.month); })


    selLabel.exit()
      .transition()
      .duration(800)
        .attr('x', function(d) { return sx(d.month); })
        .remove()
  }

  render()
  var interval = setInterval(function() {
    windowPos++
    if (windowPos > stats.length-windowSize) {
      clearInterval(interval)
    } else {
      render()
    }
  }, 1000)

  </script>
</html>
Something went wrong with that request. Please try again.