INFO 3300 - Data-driven Web Applications

The SVG element uses vector graphics. We define graphics in terms of geometric shapes, which have arbitrary precision. This makes graphics crisp at any level of zoom, but means we might be storing vastly more information than the number of pixels for complicated scenes. The Canvas element uses pixel-based raster graphics.
Canvas-based graphics are a good option if we are showing lots of data, because we don't need to take up lots of memory with elements for individual shapes -- we just write to a canvas in a for loop. But SVG is still pretty fast! I was hoping there would be more of a difference with this tree example, but I'm not disappointed to find that SVG in Chrome is well optimized.
As we saw in the tensorflow example on Friday, canvas elements are also good when you want to show areas with fuzzy edges, like density maps. SVG can do this with shapes and blurring, but it is biased towards crispness. Pixel-level control can be helpful.
How can we show complicated data at large scale? First, how much data do we really need to push to the user? We can usually cut data variables we don't need. We can also filter systematically, or subsample randomly. Finally, using simple for-loops (not .forEach) and using canvas-based graphics can make things faster.