Brute Force

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" charset="utf-8">
<title>Brute force</title>

.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>

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)

function remove() {
          iterations.remove();
          callback()
        }
    }, function(error) {
      console.log('done');
    });
  });

</script>
</body>
<html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/async/1.4.2/async.js