Company
Date Published
Author
MongoDB
Word count
2210
Language
English
Hacker News points
None

Summary

D3 Round Two: How to Blend HTML5 Canvas with SVG to Speed Up Rendering` discusses how to improve rendering performance of D3 charts by combining HTML5 canvas and SVG. The article explains that using canvas alone can be faster than SVG, but it requires manual scaling and axes creation, which are handled by D3. To take advantage of D3's features while still benefiting from the speed of canvas, the authors use a virtual canvas approach to map colors to data points, allowing for efficient mouse event handling. The solution involves creating an SVG circle to highlight the selected point, positioning it on top of the canvas, and using CSS to prevent SVG events from intercepting canvas events. The final result is a fast and interactive scatterplot that combines the benefits of both canvas and SVG.