DATA

  DRIVEN

  DOCUMENTS

    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   

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