Roger Veciana i Rovira rveciana

Creating visualizations like this one but using canvas is possible.

Since the Canvas element hasn't got the getTotalLength() method as it exists in SVG, I'm using the svg-path-properties, that allows this calculations with a good precision (<0.1px), as well as allowing the getPointAtLength function too.

Creating visualizations like this one but using canvas is possible.

Since the Canvas element hasn't got the getTotalLength() method as it exists in SVG, I'm using the point-at-length library, that calculates exactly this.

The library is designed to be used only from nodejs, but using browserify (as in this post), this is not a ptoblem:

browserify index.js --standalone Points > point-at-length.js

In a previous version of the block, I created an SVG element to use the getTotalLength() method, which is much less elegant and can't be used in a nodejs environment.

This example is part of this blog entry and shows how to use rollup to create a custom bundle with the library d3-composite-projections.

To use this example, just download the files from the gist

git clone https://gist.github.com/0e73c92391def44331d2069755edc199.git

and then:

npm install

npm run build