D3 Examples - ES2015 Fisheye Grid

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.background {
  fill: none;
  pointer-events: all;
}
​
path {
  fill: none;
  stroke: #333;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
<script src="fisheye.js"></script>
<script lang='babel' type='text/babel'>
​
  const width = 960;
  const height = 500;
  const xStepsBig = d3.range(10, width, 20);
  const yStepsBig = d3.range(10, height, 20);
  const xStepsSmall = d3.range(0, width + 6, 6);
  const yStepsSmall = d3.range(0, height + 6, 6);
​
  const fisheye = d3.fisheye();
​
  const line = d3.svg.line();
​
  const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
      .attr('transform', 'translate(-.5,-.5)');
​
  svg.append('rect')
    .attr('class', 'background')
    .attr('width', width)
    .attr('height', height);
​
  svg.selectAll('.x')
    .data(xStepsBig)
    .enter().append('path')
      .attr('class', 'x')
      .datum(x => yStepsSmall.map(y => [x, y]));
​
  svg.selectAll('.y')
    .data(yStepsBig)
    .enter().append('path')
      .attr('class', 'y')
      .datum(y => xStepsSmall.map(x => [x, y]));
​
  const path = svg.selectAll('path')
    .attr('d', line);
​
  svg.on('mousemove', function () {
    fisheye.center(d3.mouse(this));
    path.attr('d', d => line(d.map(fisheye)));
  });
​
</script>
​
    