Sandra Becker
Data visualization implies an enormous power of democratizing relevant information.
SANDRAVIZ.COM | 2023
01 | Code examples
MIKE BOSTOCK
01 | DEFINITION
TOOL
SOURCE
DEVELOPMENT
PHILOSOPHY
IDEA
GITHUB
CHARTING
OPEN
COMMUNITY
VISUAL
BRILLIANT
TOP10
01 | PROPERTIES
HTML
CSS
SVG
D3.JS
JAVASCRIPT
01 | ENVIORMENT
01 | WEBPAGE
TIME
LET'S GO
AFTER SO MUCH TIME ALL I CAN DO IS A BAR CHART
COMBINING EVERYTHING THE VIZ WORLD IS MINE
01 | D3 LEARNING CURVE
EXAMPLES
TUTORIALS
01 | LEARNING PROCESS
01 | BASICS & CODE EXAMPLES
01 | ONLINE COURSE
D3.JS
COMMUNITY
01
01 | ADD-ONS
01 | D3 SLACK
01 | OBSERVABLE
ENVIRONMENT
02
HTML
<!-- -->
CSS
/**/
SCRIPT
// or /**/
02 | COMMENTS
HTML
02
02 | BASIC
02 | ID
SVG
02 | DEFINITION
02 | SVG RECT
02 | SVG CIRCLE
CSS
02
02 | BASICS
02 | TEXT STYLE
JAVA
SCRIPT
02
02 | VARIABLE
02 | ARRAY
02 | OBJECT
02 | SIMPLE FUNCTION
02 | FUNCTION TO TRANSFORM DATA
02 | IF STATEMENT
COMPONENTS
03
SETUP
ON & OFFLINE
03
<script src = "https://d3js.org/d3.v7.min.js" ></script>
03 | ONLINE
WORKING OFFLINE
03 | OFFLINE
D3.V5
D3.V6
D3.V7
03 | VERSIONS
D3
SELECTION
03
03
03
MARGIN
CONVENTION
03
DEFINE THE MARGIN OBJECT
WIDTH AND HEIGHT
SVG CONTAINER
GROUP ELEMENT BASED ON THE MARGIN
MARGIN CONVENTION
03
03
D3
DATA
03
03
D3
SCALE
03
03
03
D3
AXIS
03
03
03
BASIC CHARTS
04
BAR
CHARTS
04
04
SVG.APPEND
('RECT')
04
04
04
04 | AVOIDING CHARTJUNK
04
04
04
04
SCATTER
PLOT
04
04
SVG.APPEND
('CIRCLE')
04
04
04
04
INTERACTION
05
WHY
INTERACT
05
NAVIGATE
IDENTIFY
COMPARE
REDUCE
ZOOM IN & OUT
DETAIL ON DEMAND
HIGHLIGHTING
FILTERING
05
05 | HOVER TO OPEN A NEW VISUALIZATION
05 | USER CAN CHANGE THE VISUAL ENCODING OF COLOR
05 | USER DECIDES ON THE VIEW BY FILTER
D3.ON
MOUSE
05
05
05
05
05
D3.ON
CLICK
05
05
05
GENERATORS
06
LINE
CHARTS
06
06
.Y( )
.X( )
.CURVE( )
.DEFINED( )
06
06
06
D3
AREA
06
06
.Y0( )
.X( )
.CURVE( )
.DEFINED( )
.Y1( )
06
06
06
06
ANIMATION
07
WHY
ANIMATE
07
07
07
07
07
07
07
D3
07
.DURATION( )
.DELAY( )
07
07
07
ANIMATED
BAR CHART
07
07
07
07
SCATTER PLOT
07
07
By Sandra Becker
How it all started :) https://www.youtube.com/watch?v=hxDJq5uFdcY
Data visualization implies an enormous power of democratizing relevant information.