D3 Examples - Oh my gosh

xxxxxxxxxx
 
<!DOCTYPE html>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
    <script>
        var margin = { top: 20, right: 20, bottom: 20, left: 20 },
            width = 960 - margin.right - margin.left,
            height = 500 - margin.top - margin.bottom;
        var svg = d3.select('body').append('svg')
            .attr('width', width + margin.right + margin.left)
            .attr('height', height + margin.top + margin.bottom)
            .style('background', 'black')
        var g = svg.append('g')
            .attr('transform', 'translate(' + [margin.left, margin.top] + ')')
        
        var line = d3.line()
            .curve(d3.curveMonotoneX)
            .x((d) => d.x)
            .y((d) => d.y);
        var lineData = [];
        var colorValue = 0, colorUp = true;
​
        g.append('circle')
            .attr('class', 'move')
            .attr('cx', width/2)
            .attr('cy', height/2)
            .attr('r', 2)
            .attr('fill', '#ddd');
​
        var touchPanel = svg.append('rect')
            .attr('width', width + margin.right + margin.left)
            .attr('height', height + margin.top + margin.bottom)
            .attr('stroke', 'white')
            .attr('fill', 'transparent')
            .on('mousemove', move);
​
        var colorValue = 0, colorUp = true;
​
        function move() {
            var coords = d3.mouse(this);
            var point = {x:coords[0] - margin.left,y:coords[1] - margin.top}
            lineData.push(point);
            if (lineData.length > 2) lineData.shift();
            d3.select('.move')
                .transition().duration(50)
                .attr('cx', point.x)
                .attr('cy', point.y)
​
            var circ = d3.select('.move');
            var color = d3.interpolateSpectral(colorValue);
            g.append('circle')
                .attr('class', 'move')
                .attr('cx', point.x)
                .attr('cy', point.y)
                .attr('r', 5)
                .attr('fill', 'none')
                .attr('stroke', color)
                .attr('stroke-width', 2)
            .transition().duration(3000)
                .ease(Math.sqrt)
                .attr('r', 200)
            .transition().duration(500)
                .ease(Math.sqrt)
                .attr('r', 3)
            .transition().duration(500)
                .attr('fill', color)
            .transition().delay(20000)
                .remove();
​
            g.append('path')
                .datum(lineData)
                .attr('class', 'line')
                .attr('fill', 'none')
                .attr('d', line)
                .attr('stroke', 'none')
            .transition().delay(3500)
                .attr('stroke', color)
            .transition().delay(20500)
                .remove();
​
            if (colorValue >= .99) colorUp = false;
            else if (colorValue <= .001) colorUp = true;
            colorValue = colorUp ? colorValue + .001 : colorValue - .001;
        }
    </script>
</body>
    