How to create a chart?
A travel by Yan Holtz
Yan Holtz
A talk by
Paris, Dec 2024
Hi, I’m Yan !
And I data visualization
❤️
What should I do with my data ??
A universe of
graph types
Data-to-viz.com
The What
Lost in tech
The How
R
Data wrapper
Python
D3.js
Shiny
React
Html
Canvas
Lost in tech
❤
R
Data wrapper
Python
D3.js
Shiny
React
Html
Canvas
Gatsby
Tidyverse
ggplot2
VS code
Github
Bokeh
R Studio
Seaborn
Vega
Leaflet
Tailwind
Next.js
Illustrator
SVG
Plotly
React-spring
Lost in tech
😱😱😱😱
Quick
Easy
✅
✅
Quick
Easy
✅
✅
Graph defaults
Chart types
Interactivity
Data wrangling
Stats
Data size
Pipeline automation
Error prone
Collaboration
Versioning
❌
❌
❌
❌
❌
❌
❌
❌
❌ ❌
🔥 😳
1995
Base R
😃 😞
1995
but
52 chart types
~ 400 chart examples (and growing)�800k visits / months
✅
✅
✅
r-graph-gallery.com
ggplot2
A revolution
2007
Consistent Grammar
Documentation
Good default
Concise
Flexible
Themes
Community
Small Multiples
✅
✅
✅
✅
✅
✅
✅
✅
Customization
Cedric Scherer
Ggplot2 extensions
exts.ggplot2.tidyverse.org
Tania Shapiro
Best selling Authors
R Python
⚡️
Hover effect
Tooltip�Zoom�Button
Scroll
Click�
Dynamic data
browser
javascript
+
A very simple website made in HTML
HTML
Styled with CSS
HTML
CSS
HTML
CSS
JS
Alive with Javascript
HTML
CSS
JS
Alive with Javascript
Flexibility:
Complexity:
👍🏽 👍🏽 👍🏽 👍🏽 👍🏽
😩 😭 🙇🏼♀️ 📈
Flexibility:
Complexity:
👍🏽 👍🏽 👍🏽 👍🏽 👍🏽
😩 😭 🙇🏼♀️ 📈
Abstraction 1 : D3.js
Abstraction 2 : Other Chart libraries
D3 is limitless
d3-graph-gallery.com
d3js.org
1️⃣
D3.js
2️⃣
Other chart libraries
And many many many many more !
Bridge 1: R markdown. Describe the dream Pipeline
Bridge 2: HTML widgets
Bridge 3: Shiny
htmlwidgets.org
create R bindings to JavaScript libraries
😍
The R package !
😍
R Plotly > ggplot2 > Plotly.js > D3.js > Javascript
🔥
Make the right choice!
A travel by Yan Holtz
data-to-viz.com
dataviz-inspiration.com
R-graph-gallery.com
Python-graph-gallery.com
D3-graph-gallery.com
React-graph-gallery.com
Yan-Holtz.com
@r_graph_gallery