Embedded Canvas in SVG

Embedded Canvas in SVG

The visualization demonstrates the use of an embedded Canvas in an SVG element, and how to generate a correlated array of numbers.

An embedded canvas may make sense when a large number of data points needs to be generated (for example in a scatter plot), that otherwise would overwhelm the DOM.

The Gist uses the array-correl npm module for generating correlated pairs of numbers (using its generate method), and for inspecting the generated array (using its inspect method) to obtain the actual pearson correlation coefficient of the array. At small sample sizes, the actual pearson correlation will differ from the desired correlation, but at large sample sizes it aligns very closely to the desired correlation.

The output of the generate method is an array of correlated pairs of numbers. Each of these array elements are rendered as a dot in the visualization, using the pair's first and second indexes as x and y coordinates.

In this demo, up to 50,000 elements can be generated and visualized in the embedded canvas with no impact to the DOM (other than creating the canvas). Mouse hit detection of data elements is performed with a 4x4 pixel zone under the current mouse position. While the example is admittedly a bit of a Rube Goldberg kind of project, it nevertheless attempts to demonstrate the following concepts:

• Creation of an embedded canvas
• Generation of normally distributed numbers (using array-correl)
• Generation of correlated sets of numbers (using array-correl)
• Computation of correlation coefficient (using array-correl)
• Drawing of large number of data points in the canvas, while controlling opacity
• Mouse data point hit detection in the canvas (even at 50K elements on the canvas)
• D3 scales, axes, element creation, event handling and update pattern
• Dynamic reconfiguration of a D3 axis
• Usage of HTLM5 elements such as radio button, range and checkbox