From Scratch to Production-Ready: Creating Dashboard Visualizations
summary
Guides a practical path from sketch to deployed dashboard: choose a tool by requirements (use D3.js when custom visuals are needed, pick out‑of‑box libs if not), build SVG charts with scales and axes, add interactions like sort and linked filtering, and verify data and context. Flags common failures: misleading visual scales, magic numbers in layout, and color choices that break for ~9% of men (use colorblind-safe color schemes). Ends with templates, code pitfalls and a checklist to ship.
AI-written summary · about
chapters (24)
- 0:00Intro
- 1:12CHART SKETCH FOR A/B TESTING
- 2:50READABILITY IS NOT ABOUT THE FONT SIZE
- 4:04DIMENSIONS KEY INFLUENCERS
- 5:30ENCODING SPOT INFORMATION AT A GLANCE
- 6:22COLORS
- 6:48COLOR SCHEME
- 7:06GET INSPIRATION
- 9:01DASHBOARD 10 SECOND RULE
- 9:52DASHBOARD SKETCH
- 11:12GET STARTED LET OTHERS INVENT THE WHEEL
- 12:24JS FRAMEWORKS ENGINEERING FLOWCHART 3
- 13:46JS FRAMEWORKS HOW TO CHOOSE THE RIGHT ONE
- 14:19MAIN DIFFERENCE MOST LIBRARIES
- 14:49SCALABLE VECTOR GRAPHICS
- 15:29D3.JS EXAMPLE
- 16:45BROWSER RESULT
- 17:41NEXT STEPS SCALES
- 18:11NEXT STEPS AXIS
- 18:46NEXT STEPS INTERACTION: SORT ON CLICK
- 20:55COMMON MISTAKES
- 22:49LIE FACTOR
- 24:00EARLY FEEDBACK DIFFERENT DATA SETS & PEOPLE
- 24:34BETTER APPROACH FOR A/B TESTING
related talks
20mearn to make the point: data visualisation strategy
53mDashboards: interactive data visualization
27mVisual Design - Do not let Data be your cul-de-sac!
41mEffective Dashboard Design Using
37mMaking Informed Decisions: Guidelines for Creating an Effective Dashboard
48mVisual Storytelling w/D3-A Conceptual Intro to Visualizing Data w/JavaScript
31mFundamentals of Data Visualization
27mClear And Presentation Danger - How To Share Data-driven Insights