es2015 d3 v4 curve interpolation comparison

lest you think I've abandoned modernity entirely, I present you with this ES2015 version of the bl.ock v4 curve interpolation comparison. the code found here follows the Airbnb JavaScript Style Guide, with the rule modifications described in this .eslintrc

{
  "extends": "airbnb",
  "rules": {
    "comma-dangle": "off",
    "no-param-reassign": "off",
    "no-restricted-syntax": "off",
    newline-per-chained-call: "off"
  }
}

this iteration also uses only inline styles, because reasons

a fork of this bl.ock which in turn is an iteration on @d3noob's' v4 curve interpolation comparison

Original `README.md`:

This bl.ock demonstrates the range of interpolation curves available in v4 of d3.js.

You can click on any of the legend labels to toggle visibility of the lines.

Details of the curve can be found on the D3 wiki.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

<!DOCTYPE html>
<meta charset='utf-8'>
<body>
    	
<script src='https://d3js.org/d3.v4.min.js'></script>
 
<script src='https://npmcdn.com/babel-core@5.8.34/browser.min.js'></script>
<script lang='babel' type='text/babel'>
  // set the dimensions and margins of the graph
  const margin = { top: 20, right: 150, bottom: 30, left: 50 };
  const width = 960 - margin.left - margin.right;
  const height = 470 - margin.top - margin.bottom;

// array of curve functions and titles
  const curveArray = [
    {
      d3Curve: d3.curveLinear,
      curveTitle: 'curveLinear'
    },
    {
      d3Curve: d3.curveStep,
      curveTitle: 'curveStep'
    },
    {
      d3Curve: d3.curveStepBefore,
      curveTitle: 'curveStepBefore'
    },
    {
      d3Curve: d3.curveStepAfter,
      curveTitle: 'curveStepAfter'
    },
    {
      d3Curve: d3.curveBasis,
      curveTitle: 'curveBasis'
    },
    {
      d3Curve: d3.curveCardinal,
      curveTitle: 'curveCardinal'
    },
    {
      d3Curve: d3.curveMonotoneX,
      curveTitle: 'curveMonotoneX'
    },
    {
      d3Curve: d3.curveCatmullRom,
      curveTitle: 'curveCatmullRom'
    }
  ];

// parse the date and time
  const parseTime = d3.timeParse('%d-%b-%y');

// set the range of the scales
  const x = d3.scaleTime()
    .range([0, width]);

const y = d3.scaleLinear()
    .range([height, 0]);

// append the svg object to the body of the page
  // append a 'group' element to 'svg'
  // move the 'group' element to the top left margin
  const svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

// get the data
  d3.csv('data-3.csv', (error, data) => {
    if (error) throw error;

// format the data
    data.forEach(d => {
      d.date = parseTime(d.date);
      d.close = +d.close;
    });

// set the color scale
    const color = d3.scaleOrdinal(d3.schemeCategory10);

curveArray.forEach((daCurve, i) => {
      // scale the range of the data
      x.domain(d3.extent(data, d => d.date));
      y.domain(d3.extent(data, d => d.close));

// create and configure line pathstring generator
      const line = d3.line()
                     .curve(daCurve.d3Curve)
                     .x(d => x(d.date))
                     .y(d => y(d.close));

// add the paths with different curves
      svg.append('path')
        .datum(data)
        .attr('class', 'line')
        .style('stroke', () => {
          // Add the colors dynamically
          daCurve.color = color(daCurve.curveTitle);
          return daCurve.color;
        })
        .attr('id', `tag${i}`) // assign an ID
        .attr('d', line);

// add the legend
      svg.append('text')
        .attr('x', width + 5) // space the legend
        .attr('y', margin.top + 20 + (i * 20))
        .attr('class', 'legend') // style the legend
        .style('fill', () => {
          // add the colors dynamically
          daCurve.color = color(daCurve.curveTitle);
          return daCurve.color;
        })
        .on('click', () => {
          // determine if current line is visible
          const active = daCurve.active !== true;
          const newOpacity = active ? 0 : 1;
          // hide or show the elements based on the ID
          d3.select(`#tag${i}`)
            .transition()
              .duration(100)
              .style('opacity', newOpacity);
          // update whether or not the elements are active
          daCurve.active = active;
        })
        .text(daCurve.curveTitle);
    });

// add the 'all' option to the Legend
    svg.append('text')
        .attr('x', width + 5) // space the legend
        .attr('y', margin.top + 20 + (8 * 20))
        .attr('class', 'legend') // style the legend
        .style('fill', () => d3.schemeCategory10[8]) // add the colors dynamically
        .on('click', () => {
          d3.selectAll('.line')
            .transition()
            .duration(100)
            .style('opacity', 1);
        })
        .text('all');

// add the 'none'option to the Legend
    svg.append('text')
      .attr('x', width + 5) // space the legend
      .attr('y', margin.top + 20 + (9 * 20))
      .attr('class', 'legend') // style the legend
      .style('fill', () => d3.schemeCategory10[9]) // add the colors dynamically
      .on('click', () => {
        d3.selectAll('.line')
          .transition()
          .duration(100)
          .style('opacity', 0);
      })
      .text('none');

// add the scatterplot
    svg.selectAll('dot')
      .data(data)
      .enter().append('circle')
        .attr('r', 4)
        .attr('cx', d => x(d.date))
        .attr('cy', d => y(d.close));

// configure the x-axis generator
    const xAxis = d3.axisBottom(x)
      .tickFormat(d3.timeFormat('%j')); // format as day-of-year

// add the x-axis
    svg.append('g')
      .attr('class', 'axis')
      .attr('transform', `translate(0, ${height})`)
      .call(xAxis);

// add the y-axis
    svg.append('g')
      .attr('class', 'axis')
      .call(d3.axisLeft(y));
    
    // styles
    d3.selectAll('.line')
      .style('fill', 'none')
      .style('stroke-width', '2px');

d3.select('body')
      .style('font', '12px Arial');

d3.selectAll('.legend')
      .style('font-size', '16px')
      .style('font-weight', 'bold')
      .style('text-anchor', 'left');
  });
</script>
</body>

https://d3js.org/d3.v4.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js