Downloaded 55 times
Uploaded byEric Carlisle
Dazzing Data Depiction with D3.JS
This document contains a presentation on D3.js, a JavaScript library for manipulating documents based on data. The presentation discusses how data visualization was traditionally part of large software suites or browser plugins before D3. It then covers what D3 is and is not, including that it is a standards-based library native to modern browsers. The rest of the presentation focuses on getting started with D3, the enter-update-exit pattern for binding data to the DOM, transitions, scales, and additional charting libraries to check out.
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...](https://cdn.slidesharecdn.com/ss_thumbnails/md-craftingimmersiveuiwithe2eandagslshaderveronicaputrianggraini-251124030840-0c677f44-thumbnail.jpg?width=640&height=640&fit=bounds)
Dazzing Data Depiction with D3.JS
- 1. Dazzling Data Depiction with .JS https://github.com/ecarlisle/d3-jsnation http://www.slideshare.net/ericcarlisle Github: SlideShare:
- 2. Me, Myself, andI Name: Craft: Crew: Locale: XP: Eric Carlisle UI / UX Architect Baltimore, MD
- 3. Agenda • BriefHistory of the World (abridged for D3) • What D3 is & What it’s Not • Getting Started with D3 • Enter, Update, Exit • Transitions • Scales • Q&A
- 4. Before D3, DataViz was… • Part of a larger software suite.
- 5. Before D3, DataViz was… • Part of a larger software suite. or • Piped through a browser plugin.
- 6. Before D3, DataViz was… • Part of a larger software suite. or • Piped through a browser plugin. or • Dependent on a 3rd party service.
- 7. Before D3, DataViz was… • Part of a larger software suite. or • Piped through a browser plugin. or • Dependent on a 3rd party service. or • An Excel export.
- 8. What is D3? Data Driven Documents “A JavaScript library for manipulating documents based on data” Standards based Native to Modern Browsers*
- 9. What is D3? Data Driven Documents “A JavaScript library for manipulating documents based on data” Standards based Native to Modern Browsers* * Version 9+ of the browser that shall not be named.
- 10. D3 is NOTa… • Monolithic JavaScript framework • Graphing, charting library • Graphical Abstraction • Shim
- 11. D3 is NOTa… • Monolithic JavaScript framework • Graphing, charting library • Graphical Abstraction • Shim
- 12. Getting Started Familiarwith ? DOM Selection – jQuery (Sizzle) DOM Selection – D3 (W3C Selectors API) Method Chaining – jQuery Method Chaining – D3
- 13.
- 14. Getting Started Familiarwith ? Event Handling – jQuery Events – D3 Data Retrieval - jQuery Data Retrieval – D3
- 15.
- 16. The Enter, Update,Exit Pattern Typical pattern for binding data to the DOM DATA DOM DATA ∩ DOM DATA DOM DOM DATA
- 17. The Enter, Update,Exit Pattern Typical pattern for binding data to the DOM selection.data() ENTER UPDATE EXIT
- 18.
- 19. Transitions • Selectionsoperating over time • Transformation via interpolation • Can be good or evil. • Can be chained
- 20. Transitions • Selectionsoperating over time • Transformation via interpolation • Can be good or evil. • Can be chained
- 21. CODE! Hello, whathave we here?
- 22. Scales • Mapsdomain input to output range Domain: range of input values (data) Range: range of output values (constraint) • Does the math for you!!! • Quantitative, Ordinal, Time • Can be chained
- 23.
- 24. Also Check Out • NVD3 http://nvd3.org/ • C3 http://c3js.org/ • Rickshaw http://code.shutterstock.com/rickshaw/ • Dashing D3.JS https://www.dashingd3js.com/
- 25. Q&A ecarlisle@lgscout.com eric_carlisle https://github.com/ecarlisle/d3-jsnation http://www.slideshare.net/ericcarlisle Email Twitter: Github: SlideShare:
Editor's Notes
- #5 Before D3, that is, before the advent of JavaScript visualization libraries… I may be going back in time a bit, but this shows how far data viz has come along with JavaScript tooling. Dataviz used to be a pretty daunting challenge with limitations. I have a lot of Business Intelligence experience, and
- #6 Before D3, that is, before the advent of JavaScript visualization libraries… I may be going back in time a bit, but this shows how far data viz has come along with JavaScript tooling. Dataviz used to be a pretty daunting challenge with limitations. I have a lot of Business Intelligence experience, and
- #7 Before D3, that is, before the advent of JavaScript visualization libraries… I may be going back in time a bit, but this shows how far data viz has come along with JavaScript tooling. Dataviz used to be a pretty daunting challenge with limitations. I have a lot of Business Intelligence experience, and
- #8 Before D3, that is, before the advent of JavaScript visualization libraries… I may be going back in time a bit, but this shows how far data viz has come along with JavaScript tooling. Dataviz used to be a pretty daunting challenge with limitations. I have a lot of Business Intelligence experience, and
- #9 - Introducing data to the DOM – paradigm shift, new way of thinking
- #10 - Introducing data to the DOM – paradigm shift, new way of thinking
- #13 In jQuery, the global object is $. In D3, the global object is d3.
- #15 In jQuery, the global object is $. In D3, the global object is d3.
- #17 Wind your brain around this one.
- #18 Wind your brain around this one.