1 / 21

The D3 JavaScript Library and Accessible Data Visualization

Learn about D3.js, a JavaScript library for customized data visualization, and its accessibility features compared to HTML. Explore examples like bar charts, line graphs, stacked charts, and sunburst diagrams with D3 challenges. Contact Brian McNeilly for further assistance.

coreymercado
Download Presentation

The D3 JavaScript Library and Accessible Data Visualization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The D3 JavaScript Library and Accessible Data Visualization Presented By: Brian P. McNeilly CSUN 2018 AssistiveTechnology Conference March 21, 2018

  2. What is D3? D3 & Accessible Data Visualization • Data Driven Documents • JavaScript library • Designed for rendering complex data visualization • Extremely customizable • Applications to other frameworks • D3plus & Chart.js levelaccess.com |(800) 899-9659 | info@levelaccess.com

  3. SVG vs HTML D3 & Accessible Data Visualization • SVG • Pros • Built for Graphics • Stable presentation • Cons • Less ARIA support • HTML • Pros • Wider ARIA support • More well known • Cons • Rendering inconsistencies levelaccess.com |(800) 899-9659 | info@levelaccess.com

  4. Examples

  5. Bar Chart

  6. Making Accessible Bar Charts D3 & Accessible Data Visualization • Thinking About Bar Charts • Axes • Bars • Color • Interaction • D3 Challenges levelaccess.com |(800) 899-9659 | info@levelaccess.com

  7. Sample Bar Chart: 2017 UK Elections D3 & Accessible Data Visualization levelaccess.com |(800) 899-9659 | info@levelaccess.com

  8. Line Graph

  9. Making Accessible Line Graphs D3 & Accessible Data Visualization • Thinking About Line Graphs • The Line • Axes • The “pip” • D3 Challenges levelaccess.com |(800) 899-9659 | info@levelaccess.com

  10. Sample Line Graph: Bitcoin Price in USD D3 & Accessible Data Visualization levelaccess.com |(800) 899-9659 | info@levelaccess.com

  11. Stacked Chart

  12. Making Accessible Stacked Charts D3 & Accessible Data Visualization • Thinking About Stacked Charts • “Bars” • Group Identification • Ownership • D3 Challenges • D3, Ownership, and d3.stack() levelaccess.com |(800) 899-9659 | info@levelaccess.com

  13. Sample Stacked Chart: DPRK Launches D3 & Accessible Data Visualization levelaccess.com |(800) 899-9659 | info@levelaccess.com

  14. Flare / Sunburst

  15. Making Accessible Flares / Sunbursts D3 & Accessible Data Visualization • Thinking About Flares / Sunbursts • Group identification • Ownership & levels • Interaction & content updates • D3 Challenges • Tackling ownership within d3.hierarchy() • Data & aria-owns levelaccess.com |(800) 899-9659 | info@levelaccess.com

  16. Sample Flare: Sign Language Families D3 & Accessible Data Visualization levelaccess.com |(800) 899-9659 | info@levelaccess.com

  17. Looking Forward

  18. Where Do We Go From Here? D3 & Accessible Data Visualization • Making accessible charts seamless • D3plus or Chart.js • SVG-AAM & SVG2 • SVG support for browser high contrast mode! levelaccess.com |(800) 899-9659 | info@levelaccess.com

  19. Any Questions?

  20. Thank You/Resources D3 & Accessible Data Visualization Contact Us Brian McNeillybrian.mcneilly@levelaccess.com Follow Us @LevelAccessA11y Level-Access Level Access Level Access Blog Slide Deck Available for Download at: https://www.levelaccess.com/csun18/ levelaccess.com |(800) 899-9659 | info@levelaccess.com

  21. Additional Resources & image citations D3 & Accessible Data Visualization • Chart / Graph / Diagram Links • 2017 UK Parliamentary Election Results Bar Chart • Bitcoin Price In US Dollars Line Graph • 2017 North Korean Test Launches Stacked Chart • Sign Languages By Linguistic Family Flare/Sunburst Diagram • Image Citations • D3 Logo via Wikipedia • All other images are screenshots from the above links levelaccess.com |(800) 899-9659 | info@levelaccess.com

More Related