Initial progress on a refactor

src/index.stories.js

@@ -5,6 +5,7 @@ import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
 import * as d3 from 'd3';
 
 import gradientPath, { getData, getPathPoints, getPathData } from './index';
+import { splitPath, drawPoints, drawSegments } from './refactor';
 
 const samplePathData = `M24.3,30
 C11.4,30,5,43.3,5,50
@@ -165,3 +166,60 @@ stories.add('using D3.js', () => {
 
   return <RenderComponent />;
 });
+
+stories.add('using refactor', () => {
+  const data = text('Path "d"', samplePathData);
+
+  class RenderComponent extends React.Component {
+    componentDidMount() {
+      // Please ignore any React stuff... this works with any Javascript project and is NOT a React component
+      // React is used here in Storybook just to get a demo running. :)
+      const margin = { top: 0, right: 0, bottom: 0, left: 0 },
+        width = 600 - margin.left - margin.right,
+        height = 300 - margin.top - margin.bottom,
+        colors = d3.schemeCategory10,
+        pts = [],
+        numPts = 5;
+
+      for (var i = 0; i < numPts; i++) {
+        pts.push([i * (width / numPts), 50]);
+        pts.push([i * (width / numPts), height - 50]);
+        pts.push([i * (width / numPts) + 50, height - 50]);
+        pts.push([i * (width / numPts) + 50, 50]);
+      }
+
+      const svg = d3
+          .select('svg')
+          .attr('width', width + margin.left + margin.right)
+          .attr('height', height + margin.top + margin.bottom),
+        g = svg
+          .append('g')
+          .attr(
+            'transform',
+            'translate(' + margin.left + ',' + margin.top + ')'
+          ),
+        line = svg
+          .select('path')
+          .attr('fill', 'none')
+          .attr('stroke', '#999')
+          .attr('class', 'hidden init')
+          .attr('stroke-width', 2),
+        p = line.node(),
+        sampleInterval = 0.25,
+        pieces = splitPath(p, sampleInterval);
+
+      // drawPoints(pieces, g, colors);
+      drawSegments(pieces, g, colors);
+    }
+
+    render() {
+      return (
+        <svg id="infinity" width="300" height="200" viewBox="0 0 100 100">
+          <path fill="none" d={data}></path>
+        </svg>
+      );
+    }
+  }
+
+  return <RenderComponent />;
+});

src/refactor.js

@@ -0,0 +1,82 @@
+import * as d3 from 'd3';
+
+export const splitPath = (p, sampleInterval) => {
+  const pLength = p.getTotalLength(),
+    numPieces = 10,
+    pieceSizes = [],
+    pieces = [];
+
+  let cumu = 0;
+
+  for (let i = 0; i < numPieces; i++) {
+    pieceSizes.push({ i, size: Math.floor(Math.random() * 20) + 5 });
+  }
+
+  const size = pieceSizes.reduce((a, b) => {
+      return a + b.size;
+    }, 0),
+    pieceSize = pLength / size;
+
+  pieceSizes.forEach((x, j) => {
+    const segs = [];
+
+    for (let i = 0; i <= x.size + sampleInterval; i += sampleInterval) {
+      const pt = p.getPointAtLength(i * pieceSize + cumu * pieceSize);
+
+      segs.push([pt.x, pt.y]);
+    }
+
+    const angle =
+      (Math.atan2(segs[1][1] - segs[0][1], segs[1][0] - segs[0][0]) * 180) /
+      Math.PI;
+
+    // TODO: Angle doesn't do anything...
+    pieces.push({ id: j, segs, angle });
+
+    cumu += x.size;
+  });
+
+  return pieces;
+};
+
+export const drawSegments = (pieces, g, colors) => {
+  const lineFunc = d3
+    .line()
+    .x(d => d[0])
+    .y(d => d[1]);
+
+  g.selectAll('path.piece')
+    .data(pieces)
+    .enter()
+    .append('path')
+    .attr('fill', 'none')
+    .attr('stroke-width', 12)
+    .attr('class', 'piece')
+    .attr('d', d => lineFunc(d.segs))
+    .attr('stroke', (d, i) => colors[i]);
+};
+
+export const drawPoints = (pieces, g, colors) => {
+  const points = [];
+
+  pieces.forEach(x => {
+    x.segs.forEach((seg, i) => {
+      if (i > 0 && i % 2 === 0) {
+        points.push({ id: x.id, seg });
+      }
+    });
+  });
+
+  g.selectAll('circle')
+    .data(points)
+    .enter()
+    .append('circle')
+    .attr('cx', d => d.seg[0])
+    .attr('cy', d => d.seg[1])
+    .style('fill', d => colors[d.id])
+    .attr('r', 0)
+    .transition()
+    .duration(0)
+    .delay((d, i) => i * 10)
+    .attr('r', 2);
+};