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   

 

<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  

 

DATA DRIVEN DOCUMENTS | D3.JS

By Sandra Becker

DATA DRIVEN DOCUMENTS | D3.JS

How it all started :) https://www.youtube.com/watch?v=hxDJq5uFdcY

  • 5,139