D3

d3.js

#d3.js

Table of Contents

About

1

Chapter 1: Getting started with d3.js

2

Remarks

2

Versions

2

Examples

2

Installation

2

Direct Script Download

3

NPM

3

CDN

3

GITHUB

3

Simple Bar Chart

3

index.html

3

chart.js

4

Hello, world!

5

What is D3? Data-Driven Documents.

5

Simple D3 Chart: Hello World!

7

Chapter 2: Approaches to create responsive d3.js charts

10

Syntax

10

Examples

10

Using bootstrap

10

index.html

10

chart.js

10

Chapter 3: Core SVG concepts used in D3.js visualization

12

Examples

12

Coordinate System

12

The Element

12

The Element

13

The Element

13

Correctly appending an SVG element

14

SVG: the drawing order

16

Chapter 4: D3 Projections

18

Examples

18

Mercator Projections

18

Albers Projections

23

General Properties

23

Choosing Parallels

26

Centering and Rotating

26

Default Parameters

30

Summary

30

Azimuthal Equidistant Projections

30

General Properties:

30

Centering and Rotating:

32

Chapter 5: Dispatching Events with d3.dispatch

35

Syntax

35

Remarks

35

Examples

35

simple usage

35

Chapter 6: Making Robust, Responsive and Reusable (r3) for d3

36

Introduction

36

Examples

36

Scatter Plot

36

What makes a chart?

36

Set up

37

Configuration

37

Helper functions

37

index.html

37

Making our scatter plot

38

make_margins (in make_margins.js)

38

make_buttons (in make_buttons.js)

39

make_title (in make_title.js)

39

make_axes (in make_axes.js)

39

Finally our scatter plot

39

Box and Whisker Chart

39

Bar Chart

40

Chapter 7: On Events

41

Syntax

41

Remarks

41

Examples

41

Attaching basic events on selections

41

Remove event listener

42

Chapter 8: Selections

43

Syntax

43

Remarks

43

Examples

43

Basic selection and modifications

43

Different selectors

44

Simple data bounded selection

44

The role of placeholders in "enter" selections

44

Using "this" with an arrow function

47

The arrow function

48

The second and third arguments combined

48

Chapter 9: SVG charts using D3 js

50

Examples

50

Using D3 js for creating SVG elements

50

Chapter 10: update pattern

51

Syntax

51

Examples

51

Updating the data: a basic example of enter, update and exit selections

51

Merging selections

53

Chapter 11: Using D3 with JSON and CSV

55

Syntax

55

Examples

55

Loading data from CSV files

55

One or two parameters in callback--error handling in d3.request()

56

Chapter 12: Using D3 with other frameworks

59

Examples

59

D3.js component with ReactJS

59

d3_react.html

59

d3_react.js

59

D3js with Angular

61

D3.js chart with Angular v1

63

Credits

65

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download