Filtered by Tag: d3

D3 Round Two: How to Blend HTML5 Canvas with SVG to Speed Up Rendering

| | javascript d3 optimization ui canvas

Soon after the publication of "Digging Into D3 Internals to Eliminate Jank," I was pleased to see that it had sparked a discussion on Twitter, with D3 community members, notably Noah Veltman and Mike Bostock, sharing suggestions for improving our rendering solution.

A suggestion we received both in this discussion and on was to use canvas to render the data points. We had originally avoided canvas because of time constraints, lack of team familiarity with canvas, and the complications it introduced with regards to mouse interactions. However, Noah proposed a combination of SVG and canvas that strikes a balance between canvas' performance and SVG's convenience, complete with a demo. It piqued my interest, and so I decided to explore it in some more detail here.

Digging into D3 Internals to Eliminate Jank over Large Data Sets

| | javascript d3 optimization ui

Browser JavaScript isn’t like most other user-facing application runtimes, where a main thread handles the UI and you can spin work off into background threads. Because it’s single-threaded, when you have to do heavy lifting, sometimes you need to get creative to keep your UI responsive.

This was the case on one of Cloud Manager’s newest features, the Visual Profiler. It was an ambitious design, and when I was given the initial mocks I was immediately excited by the prospect. As a front-end engineer, I couldn’t wait to start implementing the new chart and table.