Bamtop / D3Academy

Contents for the D3 Academy Path

D3Academy

Contents for the D3 Academy Path

Introduction

1.0 A Good Dataviz: Faces of Fracking

1.1 Set up a simple website

1.1.1 Install a local server

1.1.2 Create an HTML framework

1.1.3 CSS styles

1.1.4 D3 javascript visualization library

1.2 SVG

1.2.1 Scalable Vector Graphics (SVG)

1.2.2 Groups of SVGs

1.3 Basic Shapes

1.3.1 The Circle

1.3.1.1 Drawing a basic circle

1.3.1.2 Drawing several circles on a loop

1.3.1.3 Drawing several circles based on an array

1.3.1.4 Mathematical operations inside the attributes

1.3.1.5 Functions built inside the attributes

1.3.1.6 Conditional statements inside the functions

1.3.1.7 Color RGB function as an example

1.3.2 Line

1.3.3 Rectangle

1.3.4 Text

2 JSON format

2.1 JSON file format

2.2 Plugging JSON data into D3

3 Advanced Features

3.1 Shapes

3.1.1 Drawing polygons and interpolating curves

3.1.2 Creating arcs

3.1.3 Drawing lines on a cartesian axis

3.1.4 Drawing areas on a cartesian axis

3.2 Transformation

3.2.1 Horizontal and vertical shifting

3.2.2 Rotation

3.3 Interactivity

3.3.1 Dropdown Menu

3.3.2 Slider

3.3.3 Information on Tooltips

3.3.4 Transitions

3.3.5 Interpolation on transitions

4 Cartography

4.1 Map Projections

4.2 Shapes on a map

4.2.1 Drawing circles and lines on a map

4.2.2 Drawing trajectories on a map

4.3 Filled areas on a map

4.3.1 Filling country contours

4.3.2 Tiles on the whole map

4.3.3 Hexagonal binning

4.4 Background maps

4.4.1 Mapbox

4.4.2 Leaflet

5 Building a Project

5.1 Layout

5.1.1 The axis

5.1.2 Layers of information

5.1.3 Background color

5.2 Precision

5.2.1 Legends

5.2.2 Explore more data

5.2.3 Credits