10. INTRO
THE CHART USE CASE SPECTRUM
custom standard
Roll Your Own
Low Level Libraries High Level Libraries
11. INTRO
WHEN TO ROLL YOUR OWN CHARTS
▸ Concept not standard enough for a high-level library
▸ Don’t need power of D3 (animation, math helpers)
12. INTRO
EXAMPLE: ROLL YOUR OWN SVG CHART
▸ Blue = running tasks, purple = tasks waiting to run
▸ “Tasks now” is not a standard chart library format but also
isn’t very complex to build manually.
SVG (MANUAL)SVG (D3)
13. INTRO
WHEN TO ROLL YOUR OWN CHARTS (CONT.)
▸ Add functionality on the fly.
▸ Especially for interacting with other parts of the page.
▸ To minimize dependencies (therefore bundle size &
maintenance worries)
▸ Learn some web graphics fundamentals!
14. HOW
HOW TO ROLL YOUR OWN CHARTS
▸ Get to know the browser drawing APIs
▸ (HTML, SVG, Canvas, WebGL)
▸ Think about what your chart needs
▸ Interactivity? Large volume of data? Wacky shapes?
Groundbreaking 3D special effects?
▸ Choose the browser drawing API that will truly make your
chart happy.
15. API OPTIONS
BROWSER DRAWING APIS
regular html
SVG
canvas
WebGL
(divs and such)
(vector-based DOM elements)
(raster-based)
(super-low-level)
declarative
imperative
hello
17. HTML
HTML CHART EXAMPLE 1
▸ Great when your chart is just rectangles.
▸ Tip: X/Y axes are annoying as hell, you may want to use a
library instead of reinventing the wheel badly (as I did here).
18. HTML
BASIC HTML ELEMENTS: STRENGTHS & WEAKNESSES
▸ First-class support in React!
▸ Interactivity and accessibility are much simpler.
▸ HTML was born to do text.
▸ You can only draw rectangles (maybe circles and triangles
if you’re creative)!
▸ Thousands of DOM elements will choke performance.
19. HTML
BASIC HTML TIPS
▸ Use <div>s as parent element, to group, to draw.
▸ Use % widths for easy scaling.
▸ Good for bar charts, tables, heat maps, histograms.
▸ Could do scatter plots and bubble charts.
24. SVG
SVG: STRENGTHS & WEAKNESSES
▸ Each item is a DOM element, can be recognized by React
and tracked to optimize updates.
▸ Selection and mouse events are easy. Accessibility is
doable, but may take some extra effort.
▸ Text is more bothersome than with divs (positioning),
less bothersome than with canvas.
▸ They are DOM elements, so large numbers = performance
issues.
25. SVG
BASIC SVG TIPS
▸ Enclosing chart container is <svg>.
▸ Declare shapes with <rect>, <circle>, <path>, etc.
▸ For complex shapes, <path> will do a lot of the heavy
lifting. Most of the complexity goes into formatting a
string for <path>’s “d” attribute.
▸ Coordinates start at top left! Y=0 is the top of the box.
This is the opposite of most charts!
26. SVG
SVG CHART EXAMPLE
▸ Some ideas: Complex shapes you
fill pieces of using a clip path.
▸ Simple arithmetic, doesn’t really
need D3.
▸ Easy to draw shapes in any vector
program and copy them in.
▸ Demo: Rocket
30. CANVAS
CANVAS: STRENGTHS & WEAKNESSES
▸ You can draw as many “items” as you like - they are not
stored as individual objects in memory but just pixels.
▸ Canvas has no awareness of different “elements” after
they’re drawn, which makes interaction tricky.
▸ Canvas draw commands are imperative, nothing inside a
<canvas> is recognized by React. You need to manually
track its state and handle when to render/update.
▸ Text is just pixels, so no font optimization.
31. CANVAS
BASIC CANVAS TIPS
▸ (Coordinates also start at top left!)
▸ No XML tags! So no JSX.
▸ Use lifecycles to run canvas draw commands. Can use
components to totally abstract it so anything consuming
the component can treat it like a regular HTML/SVG
component.
▸ Or if you want to go whole hog, create a custom renderer!
33. CANVAS
▸ How do I know when the mouse is clicking on the
selection window?
▸ Mouse event triggers anywhere on canvas element
▸ Have to do some manual math.
DEMO: CANVAS MINIMAP
34. WEBGL
WEBGL
Web GOOD LUCK (Web Graphics Library) - low-level power
PhiloGL
LIBRARY
Luz Caballero
AUTHORS
Nicolas Garcia Belmonte
35. WEBGL
WEBGL: STRENGTHS & WEAKNESSES
▸ You can pretty much draw anything you can imagine, 2D
or 3D.
▸ Best performance.
▸ Same drawbacks as canvas.
▸ It can be very challenging to work with. Even its
abstractions (Three.js) tend to be relatively low level.
▸ Overkill for most common cases.
37. DEMO
BARS DEMO & CODE: HTML VS SVG VS CANVAS
▸ This top level component doesn’t need to change whether
Chart or Bar are using SVG or Canvas or what.
38. DEMO
BARS DEMO & CODE: HTML VS SVG VS CANVAS
HTML SVG Canvas
<Bar> render methods
41. CHART DRAWING APPROACHES
CHART DRAWING APPROACHES BY API
HTML SVG Canvas WebGL
Root <div> <svg> <canvas> <canvas>
Items <div>
<rect>,
<circle>,
<path>, etc
track in state,
draw with
commands
track in state,
draw with
commands
Great at rectangles
interactive
shapes
many items perf, 3D
Working w/
React
plugs right
in, works w/
JSX
plugs right
in, works w/
JSX
lifecycle hooks,
or custom
renderer
lifecycle hooks,
or custom
renderer
