SlideShare a Scribd company logo
Data
Visualizations
with D3.js
Charlotte Front-End
Developers 

Thursday, July 27, 2017

6:30 PM to 8:30 PM

Brian Greig
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/
Data Visualization with D3.js
• Data Visualization concepts

• Accessing data via API

• Basic components

• Binding data

• Building visualizations

• Making your visuals interactive
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?
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
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
Accessing Data Via API
• Spinning up an API Server

• Using public APIs

• Preprocessing data on your server and exposing it via
your own API.
Accessing Data Via API
• XMLHttpRequest

• jQuery

• d3.request - make an asynchronous request. 

• d3.queue - manage the concurrent evaluation of
asynchronous tasks.
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)
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.
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]
Binding Data
• Access data via
API

• Load data
synchronously

• Await runs on
success
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
The commonality between science and art is in trying to see profoundly
- to develop strategies of seeing and showing. - Edward Tufte
Build Visualizations
Build Visualizations
_init()

• set metric

• set scale

• scaleOrdinal

• scaleLinear

• set domains

• set axis

• bind data
Build Visualizations
_enter()

• append the
elements to the
SVG

• set attributes

• static 

• as a function
of the data

• draw axis
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
Making it Interactive
Leverage the DOM
API

• Event listeners

• Array prototype
functions
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
Questions
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
Ad

Recommended

Introduction to einstein analytics
Introduction to einstein analytics
Steven Hugo
 
Automating Regional Data Integration with Python & ArcPy (Heather Widlund)
Automating Regional Data Integration with Python & ArcPy (Heather Widlund)
GIS Colorado
 
Dynamic Data Visualization with Tableau
Dynamic Data Visualization with Tableau
AkashBorse2
 
Future.ready().watson dataplatform 01
Future.ready().watson dataplatform 01
Redazione InnovaPuglia
 
Data migration services
Data migration services
Nitai Partners Inc
 
Introducing Entity Framework Core
Introducing Entity Framework Core
Joy Sarker
 
Faster is the New Fast - with Mi Express You can Analyze Location Data Faster
Faster is the New Fast - with Mi Express You can Analyze Location Data Faster
MISNet - Integeo SE Asia
 
Creating Data Visualisations for the Web
Creating Data Visualisations for the Web
EmpathyBroker
 
What is Revit Structure - Dhyan Academy
What is Revit Structure - Dhyan Academy
dhyanacademyengineer
 
Interactive Visualization of Software Components with Virtual Reality Headsets
Interactive Visualization of Software Components with Virtual Reality Headsets
Andreas Schreiber
 
JoTechies -Azure Machine Learning
JoTechies -Azure Machine Learning
JoTechies
 
Aws community day pune 2020 v3
Aws community day pune 2020 v3
Sridevi Murugayen
 
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
Andrea Mauri
 
Pitkin Maps & More (Mary Lakner)
Pitkin Maps & More (Mary Lakner)
GIS Colorado
 
RackBuilder Plus
RackBuilder Plus
ManageEngine, Zoho Corporation
 
L21 sharing data using data synchronization
L21 sharing data using data synchronization
Naresh Kumar SAHU
 
DB Generator 2016
DB Generator 2016
Andy Hamer
 
Let's analyze how world reacts to road traffic by sentiment analysis final
Let's analyze how world reacts to road traffic by sentiment analysis final
Sajeetharan
 
Mind the Gap - Data Science Meets Software Engineering
Mind the Gap - Data Science Meets Software Engineering
Bernhard Haslhofer
 
This Week in Neo4j - 24th November 2018
This Week in Neo4j - 24th November 2018
Neo4j
 
Network analysis on HR strategy
Network analysis on HR strategy
Min Luen Sun
 
Edge processing and High Level Visualization versus Cloud computing and Kibana
Edge processing and High Level Visualization versus Cloud computing and Kibana
Stefano Milani
 
Data Visualization With Tableau | Edureka
Data Visualization With Tableau | Edureka
Edureka!
 
Internship Presentation
Internship Presentation
Jobayer Ahmmed
 
Introducing greenspaceLive and gTools
Introducing greenspaceLive and gTools
calum_gsl
 
Relevant Search Leveraging Knowledge Graphs with Neo4j
Relevant Search Leveraging Knowledge Graphs with Neo4j
GraphAware
 
GIS As-Builts - How & Why
GIS As-Builts - How & Why
GIS Colorado
 
business intelligence
business intelligence
Mohammed Hafeez
 
Charlotte Front End - D3
Charlotte Front End - D3
Brian Greig
 
Introduction to D3.js
Introduction to D3.js
Oleksii Prohonnyi
 

More Related Content

What's hot (20)

What is Revit Structure - Dhyan Academy
What is Revit Structure - Dhyan Academy
dhyanacademyengineer
 
Interactive Visualization of Software Components with Virtual Reality Headsets
Interactive Visualization of Software Components with Virtual Reality Headsets
Andreas Schreiber
 
JoTechies -Azure Machine Learning
JoTechies -Azure Machine Learning
JoTechies
 
Aws community day pune 2020 v3
Aws community day pune 2020 v3
Sridevi Murugayen
 
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
Andrea Mauri
 
Pitkin Maps & More (Mary Lakner)
Pitkin Maps & More (Mary Lakner)
GIS Colorado
 
RackBuilder Plus
RackBuilder Plus
ManageEngine, Zoho Corporation
 
L21 sharing data using data synchronization
L21 sharing data using data synchronization
Naresh Kumar SAHU
 
DB Generator 2016
DB Generator 2016
Andy Hamer
 
Let's analyze how world reacts to road traffic by sentiment analysis final
Let's analyze how world reacts to road traffic by sentiment analysis final
Sajeetharan
 
Mind the Gap - Data Science Meets Software Engineering
Mind the Gap - Data Science Meets Software Engineering
Bernhard Haslhofer
 
This Week in Neo4j - 24th November 2018
This Week in Neo4j - 24th November 2018
Neo4j
 
Network analysis on HR strategy
Network analysis on HR strategy
Min Luen Sun
 
Edge processing and High Level Visualization versus Cloud computing and Kibana
Edge processing and High Level Visualization versus Cloud computing and Kibana
Stefano Milani
 
Data Visualization With Tableau | Edureka
Data Visualization With Tableau | Edureka
Edureka!
 
Internship Presentation
Internship Presentation
Jobayer Ahmmed
 
Introducing greenspaceLive and gTools
Introducing greenspaceLive and gTools
calum_gsl
 
Relevant Search Leveraging Knowledge Graphs with Neo4j
Relevant Search Leveraging Knowledge Graphs with Neo4j
GraphAware
 
GIS As-Builts - How & Why
GIS As-Builts - How & Why
GIS Colorado
 
business intelligence
business intelligence
Mohammed Hafeez
 
What is Revit Structure - Dhyan Academy
What is Revit Structure - Dhyan Academy
dhyanacademyengineer
 
Interactive Visualization of Software Components with Virtual Reality Headsets
Interactive Visualization of Software Components with Virtual Reality Headsets
Andreas Schreiber
 
JoTechies -Azure Machine Learning
JoTechies -Azure Machine Learning
JoTechies
 
Aws community day pune 2020 v3
Aws community day pune 2020 v3
Sridevi Murugayen
 
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
A Big Data Analysis Framework for Model-Based Web User Behavior Analytics
Andrea Mauri
 
Pitkin Maps & More (Mary Lakner)
Pitkin Maps & More (Mary Lakner)
GIS Colorado
 
L21 sharing data using data synchronization
L21 sharing data using data synchronization
Naresh Kumar SAHU
 
DB Generator 2016
DB Generator 2016
Andy Hamer
 
Let's analyze how world reacts to road traffic by sentiment analysis final
Let's analyze how world reacts to road traffic by sentiment analysis final
Sajeetharan
 
Mind the Gap - Data Science Meets Software Engineering
Mind the Gap - Data Science Meets Software Engineering
Bernhard Haslhofer
 
This Week in Neo4j - 24th November 2018
This Week in Neo4j - 24th November 2018
Neo4j
 
Network analysis on HR strategy
Network analysis on HR strategy
Min Luen Sun
 
Edge processing and High Level Visualization versus Cloud computing and Kibana
Edge processing and High Level Visualization versus Cloud computing and Kibana
Stefano Milani
 
Data Visualization With Tableau | Edureka
Data Visualization With Tableau | Edureka
Edureka!
 
Internship Presentation
Internship Presentation
Jobayer Ahmmed
 
Introducing greenspaceLive and gTools
Introducing greenspaceLive and gTools
calum_gsl
 
Relevant Search Leveraging Knowledge Graphs with Neo4j
Relevant Search Leveraging Knowledge Graphs with Neo4j
GraphAware
 
GIS As-Builts - How & Why
GIS As-Builts - How & Why
GIS Colorado
 

Similar to Data Visualizations with D3.js (20)

Charlotte Front End - D3
Charlotte Front End - D3
Brian Greig
 
Introduction to D3.js
Introduction to D3.js
Oleksii Prohonnyi
 
Data Visualization for Big Data: Experience from the Front Line
Data Visualization for Big Data: Experience from the Front Line
Rosa Romero Gómez, PhD
 
chapter 6 data visualization ppt.pptx
chapter 6 data visualization ppt.pptx
sayalisonavane3
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3
Aleksander Fabijan
 
Data visualization in a Nutshell
Data visualization in a Nutshell
WingChan46
 
Frontend Architecture and Data Visualization
Frontend Architecture and Data Visualization
Altocloud
 
Mini-Training: DataViz, data-driven documents and D3.js
Mini-Training: DataViz, data-driven documents and D3.js
Betclic Everest Group Tech Team
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutes
Jos Dirksen
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
Oleksii Prohonnyi
 
Pittsburgh code and supply
Pittsburgh code and supply
dudaspm
 
FITC - Data Visualization in Practice
FITC - Data Visualization in Practice
Rami Sayar
 
Dazzing Data Depiction with D3.JS
Dazzing Data Depiction with D3.JS
Eric Carlisle
 
Academy PRO: D3, part 1
Academy PRO: D3, part 1
Binary Studio
 
Dreamforce 2014 - Introduction to d3.js
Dreamforce 2014 - Introduction to d3.js
ramanathanp82
 
Feed your inner data scientist. JS Visualization Tools
Feed your inner data scientist. JS Visualization Tools
Doug Mair
 
D3js
D3js
Manav Prasad
 
Data visualisation with D3
Data visualisation with D3
Florian Evéquoz
 
D3
D3
Xi SiZhe
 
The D3 Toolbox
The D3 Toolbox
Mark Rickerby
 
Charlotte Front End - D3
Charlotte Front End - D3
Brian Greig
 
Data Visualization for Big Data: Experience from the Front Line
Data Visualization for Big Data: Experience from the Front Line
Rosa Romero Gómez, PhD
 
chapter 6 data visualization ppt.pptx
chapter 6 data visualization ppt.pptx
sayalisonavane3
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3
Aleksander Fabijan
 
Data visualization in a Nutshell
Data visualization in a Nutshell
WingChan46
 
Frontend Architecture and Data Visualization
Frontend Architecture and Data Visualization
Altocloud
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutes
Jos Dirksen
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
Oleksii Prohonnyi
 
Pittsburgh code and supply
Pittsburgh code and supply
dudaspm
 
FITC - Data Visualization in Practice
FITC - Data Visualization in Practice
Rami Sayar
 
Dazzing Data Depiction with D3.JS
Dazzing Data Depiction with D3.JS
Eric Carlisle
 
Academy PRO: D3, part 1
Academy PRO: D3, part 1
Binary Studio
 
Dreamforce 2014 - Introduction to d3.js
Dreamforce 2014 - Introduction to d3.js
ramanathanp82
 
Feed your inner data scientist. JS Visualization Tools
Feed your inner data scientist. JS Visualization Tools
Doug Mair
 
Data visualisation with D3
Data visualisation with D3
Florian Evéquoz
 
Ad

Recently uploaded (20)

The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT Kharagpur Quiz Club
 
Communicable Diseases and National Health Programs – Unit 9 | B.Sc Nursing 5t...
Communicable Diseases and National Health Programs – Unit 9 | B.Sc Nursing 5t...
RAKESH SAJJAN
 
Community Health Nursing Approaches, Concepts, Roles & Responsibilities – Uni...
Community Health Nursing Approaches, Concepts, Roles & Responsibilities – Uni...
RAKESH SAJJAN
 
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
RAKESH SAJJAN
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
SCHIZOPHRENIA OTHER PSYCHOTIC DISORDER LIKE Persistent delusion/Capgras syndr...
SCHIZOPHRENIA OTHER PSYCHOTIC DISORDER LIKE Persistent delusion/Capgras syndr...
parmarjuli1412
 
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
 
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
jutaydeonne
 
Code Profiling in Odoo 18 - Odoo 18 Slides
Code Profiling in Odoo 18 - Odoo 18 Slides
Celine George
 
English 3 Quarter 1_LEwithLAS_Week 1.pdf
English 3 Quarter 1_LEwithLAS_Week 1.pdf
DeAsisAlyanajaneH
 
GEOGRAPHY-Study Material [ Class 10th] .pdf
GEOGRAPHY-Study Material [ Class 10th] .pdf
SHERAZ AHMAD LONE
 
LDMMIA Yoga S10 Free Workshop Grad Level
LDMMIA Yoga S10 Free Workshop Grad Level
LDM & Mia eStudios
 
How payment terms are configured in Odoo 18
How payment terms are configured in Odoo 18
Celine George
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
Paper 107 | From Watchdog to Lapdog: Ishiguro’s Fiction and the Rise of “Godi...
Paper 107 | From Watchdog to Lapdog: Ishiguro’s Fiction and the Rise of “Godi...
Rajdeep Bavaliya
 
Nutrition Assessment and Nutrition Education – Unit 4 | B.Sc Nursing 5th Seme...
Nutrition Assessment and Nutrition Education – Unit 4 | B.Sc Nursing 5th Seme...
RAKESH SAJJAN
 
This is why students from these 44 institutions have not received National Se...
This is why students from these 44 institutions have not received National Se...
Kweku Zurek
 
Health Care Planning and Organization of Health Care at Various Levels – Unit...
Health Care Planning and Organization of Health Care at Various Levels – Unit...
RAKESH SAJJAN
 
VCE Literature Section A Exam Response Guide
VCE Literature Section A Exam Response Guide
jpinnuck
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT Kharagpur Quiz Club
 
Communicable Diseases and National Health Programs – Unit 9 | B.Sc Nursing 5t...
Communicable Diseases and National Health Programs – Unit 9 | B.Sc Nursing 5t...
RAKESH SAJJAN
 
Community Health Nursing Approaches, Concepts, Roles & Responsibilities – Uni...
Community Health Nursing Approaches, Concepts, Roles & Responsibilities – Uni...
RAKESH SAJJAN
 
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
RAKESH SAJJAN
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
SCHIZOPHRENIA OTHER PSYCHOTIC DISORDER LIKE Persistent delusion/Capgras syndr...
SCHIZOPHRENIA OTHER PSYCHOTIC DISORDER LIKE Persistent delusion/Capgras syndr...
parmarjuli1412
 
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
 
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
jutaydeonne
 
Code Profiling in Odoo 18 - Odoo 18 Slides
Code Profiling in Odoo 18 - Odoo 18 Slides
Celine George
 
English 3 Quarter 1_LEwithLAS_Week 1.pdf
English 3 Quarter 1_LEwithLAS_Week 1.pdf
DeAsisAlyanajaneH
 
GEOGRAPHY-Study Material [ Class 10th] .pdf
GEOGRAPHY-Study Material [ Class 10th] .pdf
SHERAZ AHMAD LONE
 
LDMMIA Yoga S10 Free Workshop Grad Level
LDMMIA Yoga S10 Free Workshop Grad Level
LDM & Mia eStudios
 
How payment terms are configured in Odoo 18
How payment terms are configured in Odoo 18
Celine George
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
Paper 107 | From Watchdog to Lapdog: Ishiguro’s Fiction and the Rise of “Godi...
Paper 107 | From Watchdog to Lapdog: Ishiguro’s Fiction and the Rise of “Godi...
Rajdeep Bavaliya
 
Nutrition Assessment and Nutrition Education – Unit 4 | B.Sc Nursing 5th Seme...
Nutrition Assessment and Nutrition Education – Unit 4 | B.Sc Nursing 5th Seme...
RAKESH SAJJAN
 
This is why students from these 44 institutions have not received National Se...
This is why students from these 44 institutions have not received National Se...
Kweku Zurek
 
Health Care Planning and Organization of Health Care at Various Levels – Unit...
Health Care Planning and Organization of Health Care at Various Levels – Unit...
RAKESH SAJJAN
 
VCE Literature Section A Exam Response Guide
VCE Literature Section A Exam Response Guide
jpinnuck
 
Ad

Data Visualizations with D3.js

  • 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?
  • 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
  • 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