Book Image

D3.js By Example

By : Michael Heydt
Book Image

D3.js By Example

By: Michael Heydt

Overview of this book

<p>This book will take you through all the concepts of D3.js starting with the most basic ones and progressively building on them in each chapter to expand your knowledge of D3.js.</p> <p>Starting with obtaining D3.js and creating simple data bindings to non-graphical HTML elements, you will then master the creation of graphical elements from data. You’ll discover how to combine those elements into simple visualizations such as bar, line, and scatter charts, as well as more elaborate visualizations such as network diagrams, Sankey diagrams, maps, and choreopleths.</p> <p>Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js.</p>

Related Content you might be interested in

Current Title:

Small book image
D3.js By Example
Michael Heydt
Dec, 2015 | 304 pages
No titles found
Table of Contents (20 chapters)
D3.js By Example
D3.js By Example
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with D3.js
Getting Started with D3.js
A brief overview of D3.js
Tools for creating and sharing D3.js visualizations
Google Chrome and Developer tools
Hello World – D3.js style
Examining the DOM generated by D3.js
Summary
2
Selections and Data Binding
Selections and Data Binding
D3.js selections
D3.js and data binding
Summary
3
Creating Visuals with SVG
Creating Visuals with SVG
Introducing SVG
The basic shapes provided by SVG
Applying CSS styles to SVG elements
Strokes, caps, and dashes
Applying SVG transforms
Groups
Transparency
Layers
Summary
4
Creating a Bar Graph
Creating a Bar Graph
The basic bar graph
Margins and axes
Summary
5
Using Data and Scales
Using Data and Scales
Data
Scales
Summary
6
Creating Scatter and Bubble Plots
Creating Scatter and Bubble Plots
Creating scatter plots
Creating a bubble plot
Summary
7
Creating Animated Visuals
Creating Animated Visuals
Introduction to animation
Adding a fifth dimension to a bubble plot – time
Summary
8
Adding User Interactivity
Adding User Interactivity
Handling mouse events
Using behaviors to drag, pan, and zoom
Enhancing a bar graph with interactivity
Highlighting selected items using brushes
Summary
9
Complex Shapes Using Paths
Complex Shapes Using Paths
An overview of path data generators
Drawing line graphs using interpolators
Summary
10
Using Layouts to Visualize Series and Hierarchical Data
Using Layouts to Visualize Series and Hierarchical Data
Using stacked layouts
Visualizing hierarchical data
Representing relationships with chord diagrams
Techniques to demonstrate the flow of information
Summary
11
Visualizing Information Networks
Visualizing Information Networks
An overview of force-directed graphs
A simple force-directed graph
Using link distance to spread out the nodes
Adding repulsion to nodes for preventing crossed links
Summary
12
Creating Maps with GeoJSON and TopoJSON
Creating Maps with GeoJSON and TopoJSON
Introducing TopoJSON and GeoJSON
Creating a map of the United States
Styling the map of the United States
Creating a flat map of the world
Spicing up a globe
Adding interactivity to maps
Annotating a map
Summary
13
Combining D3.js and AngularJS
Combining D3.js and AngularJS
An overview of composite visualization
Creating a bar graph using AngularJS
Adding a second directive for a donut
Adding a detail view and interactivity
Updating graphs upon the modification of details data
Summary
Index
Index

The basic shapes provided by SVG

Having some preliminaries out of the way, let's now examine the various SVG shapes that we will commonly use through the book. We have already seen how to create a circle; now let's look at some other shapes.

Ellipse

A circle is a special case of an ellipse that has an identical x and y radii. Ellipses can and often have different size radii. An ellipse is specified in SVG using the <ellipse> tag. We still use cx and cy attributes to position the ellipse, but instead of using r for radius, we use two attributes rx and ry to specify the radius in the x and y directions:

<ellipse cx="50" cy="30" rx="40" ry="20" />

Note

bl.ock (3.4): http://goo.gl/05QCnG

Rectangle

Rectangles are specified using the <rect> tag. The upper-left corner is specified using the x and y attributes. The width and height attributes specify those respective sizes for the rectangle:

<rect x="10" y="10" width="150" height="100"></rect>

Note

bl.ock (3.5): http://goo.gl...

Previous Section
End of Section 3
Next Section