DATA

  DRIVEN

  DOCUMENTS

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 | OBSERVABLE

ENVIRONMENT

02  

HTML

<!-- -->

CSS

/**/

SCRIPT

// or /**/

02 | COMMENTS

HTML

02   

02 | BASIC

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 | SELECTIONS

03  | VENN DIAGRAM

MARGIN

CONVENTION

03   

DEFINE THE MARGIN OBJECT

WIDTH AND HEIGHT

SVG CONTAINER

GROUP ELEMENT BASED ON THE MARGIN

MARGIN CONVENTION

03   

03 | MARGIN CONVENTION

D3

DATA

03   

03 | DATA BINDING

D3

SCALE

03   

03 | SCALING  

03 | SCALED CIRCLES

D3

AXIS

03   

03 | AXES

03 | CUSTOM AXES

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