https://www.meetup.com/Charlotte-Front-End-Developers/events/241359201/

1. Data
Visualizations
with D3.js
Charlotte Front-End
Developers
Thursday, July 27, 2017
6:30 PM to 8:30 PM
Brian Greig

2. Who am I
• Brian Greig
• Third Party Software Engineer
at BoA
• 13 years of web development
and data analysis
• Recent Charlotte transpant
• Requisite Social Media
@IgnoreIntuition
github.com/ignoreintuition/
linkedin.com/in/bgreig/

3. Data Visualization with D3.js
• Data Visualization concepts
• Accessing data via API
• Basic components
• Binding data
• Building visualizations
• Making your visuals interactive

4. Data Visualization
• What is Data Visualization?
• What makes a Data Visualization good or bad?
Subjective? Objective?
• Does your chart tell a story? Does it give insight into the
underlying data?
• Why D3?

5. Data Visualization
http://graphics.wsj.com/elections/2016/field-guide-red-blue-america/
https://tctechcrunch2011.files.wordpress.com/2014/02/power-map.png?w=738

6. Data Visualization
Dimension Determine how the data in your visualization is grouped
Measure Calculations used in visuzalitions. Composed of aggregations.
Hierarchy
Data fields expanding into larger data sets and groups of data
sets, with each subsequently larger data set of a higher rank
than the set that came before it.
Detail Dimension Provides descriptive data about a dimension object
Schema Organization of data (blueprint)
Subset Set of which all the elements are contained in another set.
Key Terms

7. Accessing Data Via API
• Spinning up an API Server
• Using public APIs
• Preprocessing data on your server and exposing it via
your own API.

8. Accessing Data Via API
• XMLHttpRequest
• jQuery
• d3.request - make an asynchronous request.
• d3.queue - manage the concurrent evaluation of
asynchronous tasks.

9. Basic Components
Preparing your data for reporting
• Server-side vs client-side
• Pre-aggregation / real-time aggregation
• Obtaining your data
• Aggregating your data (d3.nest)
• Filtering your data (array.prototype.filter)
• Sorting your data (array.prototype.sort)

10. Basic Components
Structuring your application
• init: This is where you create your scales, ranges, domains, as well
as binding your data to the DOM element that is going to use it.
• enter: This is the initial, static visualization. here you will assign
attributes and values to the different components of your element.
• update: Here you will update any of the dynamic attributes of your
graph if the user changes the context or scope of your data.
• exit: Any cleanup.

11. Basic Components
Your basic D3 Starter Kit
• Define the dataset [1]
• Create a container [3-5]
• Bind your data [8]
• Append visual
components & set
attributes [11-18]
• Clean up [24]

12. Binding Data
• Access data via
API
• Load data
synchronously
• Await runs on
success

13. Binding Data
• Aggregate as much
as possible on the
server
• Use rollup to further
aggregate data on
the front-end
• Use array functions
(filter, sort) to create
subsets

14. The commonality between science and art is in trying to see profoundly
- to develop strategies of seeing and showing. - Edward Tufte
Build Visualizations

15. Build Visualizations
_init()
• set metric
• set scale
• scaleOrdinal
• scaleLinear
• set domains
• set axis
• bind data

16. Build Visualizations
_enter()
• append the
elements to the
SVG
• set attributes
• static
• as a function
of the data
• draw axis

17. Build Visualizations
Giving your data context
• Titles: Always, ALWAYS, include titles. Just enough to give
proper context
• Tooltips. Allowing your users to highlight the components of
your graph reduces clutter
• Axis. Terse and explanatory
• Colors. Varied and considerate of ADA
• Legends. Only if they provide value

18. Making it Interactive
Leverage the DOM
API
• Event listeners
• Array prototype
functions

19. Making it Interactive
_update()
• runs when the
graph needs to be
redrawn
• transitions
• update attributes
• Attributes that
don’t need to be
recalculated should
be left alone

20. Questions

21. Appendix
• D3 API Reference: https://d3js.org/
• JSON Placeholder: https://jsonplaceholder.typicode.com/
• Github Repo: https://github.com/ignoreintuition/
dataviz_boilerplate
• 20 Years of Games: https://www.kaggle.com/egrinstein/
20-years-of-games