Jagged Lines

Jagged Lines

Given two points, draw a jagged line between them using D3 v4.

You can configure the height of the peaks via maxPeakHeight and the distance between peaks with minPeakDistance.

The logic for computing the jagged points is done in createJaggedPoints(). The basic process is that the two ends points are rotated so that they are in line with the x-axis. Then at random points in between the ends (based on minPeakDistance), the y value is modified (based on maxPeakHeight). Finally, the line is unrotated and you get the desired result.

An alternative approach that does not involve rotation would be computing the slope perpendicular to the line and using that to compute the offset points. It is slightly more challenging to give intuitive inputs like the pixels defined by maxPeakHeight and minPeakDistance if you take that approach, but still possible.