Canvas tutorial - Turn SVG scatterplot into Canvas - Extreme level

This scatterplot is made with d3.js and SVG - For the canvas tutorial it is now your job to turn this scatterplot into one uses canvas for the visual part (the drawing of the circles). You can still use d3’s helper functions for things such as scales, d3.select, etc.

For the medium level you need to keep the SVG in as well (and thus position both the SVG and canvas (absolutely) on top of each other) and use the SVG for all the textual parts: the axes and titles

For the extreme level, there are 3 steps (getting more difficult with each new step):

• level 1 | On a hover, instantaneously change the color of the hovered circle black (and back to the original color when moving out of the circle)
• level 2 | On a hover, linearly increase the hovered circle’s size to 1.5 times its original radius and opacity of 1 in 1000ms (and back again to normal size on a mouseout)
• level 3 | The same as level 2, but use an easing function for the radius animation

See the other two levels here: Normal level and Medium level

If you’re completely stuck (and please, for your own benefit, only then) you can look at the solution for level 1 here

Built with blockbuilder.org