Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Charts From Scratch In React

132 views

Published on

Why and how to draw charts from scratch in React - Slides for Reactathon 2018

Published in: Software
  • Be the first to comment

  • Be the first to like this

Charts From Scratch In React

  1. 1. CHARTS FROM SCRATCH IN REACT CHRISTINA HOLLAND
  2. 2. ABOUT ME CHRISTINA HSU HOLLAND ▸ BS in Molecular and Cell Bio ▸ Animator for 10 years ▸ Bootcamp (Hack Reactor) ▸ Front-end Engineer at Pepperdata
  3. 3. INTRO TODAY’S TALK PLAN ▸ Why? ▸ Overview of browser drawing APIs (with examples). ▸ Demos with code.
  4. 4. INTRO WHY BUILD CHARTS FROM SCRATCH? ▸ What are we, animals? ▸ We don’t build our own cars! ▸ Okay but seriously
  5. 5. INTRO THE CHART USE CASE SPECTRUM custom standard Roll Your OwnLow Level Libraries High Level Libraries
  6. 6. INTRO THE CHART USE CASE SPECTRUM custom standard Roll Your Own Low Level Libraries High Level Libraries
  7. 7. INTRO Stephanie Yee & Tony Chu http://www.r2d3.us/ MIND-BLOWING SUPER BESPOKE CUSTOM CHART (D3)
  8. 8. INTRO THE CHART USE CASE SPECTRUM custom standard Roll Your OwnLow Level Libraries High Level Libraries
  9. 9. INTRO GOOD OLD LINE AND BAR CHARTS AND ALL THAT HighchartsVictory NVD3 C3
  10. 10. INTRO THE CHART USE CASE SPECTRUM custom standard Roll Your Own Low Level Libraries High Level Libraries
  11. 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. 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. 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. 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. 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
  16. 16. HTML BASIC HTML ELEMENTS Mostly divs
  17. 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. 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. 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.
  20. 20. HTML HTML CHART EXAMPLE 2 (BARS) DIVS
  21. 21. HTML HTML CHART EXAMPLE 3 (TIMELINE OF SPARK STAGES) DIVS
  22. 22. SVG SVG (SCALABLE VECTOR GRAPHICS) A bunch of shapes that are DOM elements
  23. 23. SVG SVG (SCALABLE VECTOR GRAPHICS) https://www.w3schools.com/graphics/svg_examples.asp
  24. 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. 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. 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
  27. 27. SVG SVG 5 minutes
 to render
  28. 28. CANVAS CANVAS A JavaScript-driven Microsoft Paint window ~10 seconds
 to render
  29. 29. CANVAS CANVAS https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API#Example
  30. 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. 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!
  32. 32. CANVAS DEMO: CANVAS MINIMAP
  33. 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. 34. WEBGL WEBGL Web GOOD LUCK (Web Graphics Library) - low-level power PhiloGL LIBRARY Luz Caballero AUTHORS Nicolas Garcia Belmonte
  35. 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.
  36. 36. DEMO BARS DEMO & CODE: HTML VS SVG VS CANVAS
  37. 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. 38. DEMO BARS DEMO & CODE: HTML VS SVG VS CANVAS HTML SVG Canvas <Bar> render methods
  39. 39. DEMO PATHS DEMO & CODE: SVG VS CANVAS
  40. 40. DEMO SVG VS CANVAS PATHS ▸ Series of (x, y) coords: [(1, 2), (2, 3), (3, 1)] ▸ HTML: Don’t ▸ SVG: <path d=“M1,2L2,3L3,1” /> ▸ Canvas: ctx.beginPath() ctx.moveTo(1, 2) ctx.lineTo(2, 3) ctx.lineTo(3, 1) ctx.stroke()
  41. 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
  42. 42. CONCLUSION THANK YOU ▸ Twitter: @americanwombat ▸ Email: hsubox@gmail.com

×