D3 Examples - Brute Force

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" charset="utf-8">
<title>Brute force</title>
​
<style>
  body {
    padding: 0;
    margin: 0;
  }
  .iterations {
    stroke-width: 2;
    stroke: red;
    opacity:0;
  }
​
  .xaxis text {
    font: 10px sans-serif;
  }
​
  .xaxis path,
  .xaxis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
​
  .title {
    font-size: 50px;
    fill: #ddd;
  }
  .currentLng {
    fill: #aaa;
  }
</style>
</head>
<body>
​
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.4.2/async.js"></script>
<script>
​
  var width = 900;
  var height = 800;
  var padding = 40;
​
  var x = d3.scale.linear()
      .domain([0, 360])
      .range([0, width - padding]);
​
  var svg = d3.select('body')
    .append('svg')
    .attr('height', height)
    .attr('width', width);
​
  var title = svg.append('g')
    .append('text')
    .attr('class', 'title')
    .attr('x', width/2 - padding * 2)
    .attr('y', 200);
​
  var currentLng = svg.append('g')
    .append('text')
    .attr('class', 'currentLng')
    .attr('x', width/2 - 20)
    .attr('y', 250);
​
  var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([0, 45, 90, 180, 360])
    .orient('bottom');
​
  svg.append('g')
    .attr('class', 'xaxis')
    .attr('transform', 'translate(' + padding/2 + ', ' + height/2 + ')')
    .call(xAxis)
​
  d3.json('iterations.json', function(error, data) {
    async.eachLimit(Object.keys(data), 1, function(key, callback) {
      title.text(key.split('_').join(' \u2014 '));
​
      var iterations = svg.selectAll('.iterations')
        .data(data[key])
      .enter().append('line')
        .attr('class', 'iterations')
        .attr('x1', function(d) { return x(d) + padding/2 })
        .attr('y1', 0)
        .attr('x2', function(d) { return x(d) + padding/2 })
        .attr('y2', 20)
​
        var n = 0;
        iterations.transition()
          .duration(4000)
          .delay(function(d, i) { return (i * 1000)})
          .style('opacity', 1)
          .attr('stroke-width', 10)
          .attr('y1', (height/2 - 20))
          .attr('x2', function(d) { return x(d) + padding/2 })
          .attr('y2', (height/2))
          .each(function(d) { ++n; })
          .each('end', function(d) { currentLng.text(d); if (!--n) remove() });
​
        function remove() {
          iterations.remove();
          callback()
        }
    }, function(error) {
      console.log('done');
    });
  });
​
</script>
</body>
<html>
​
    