Register your product to gain access to bonus material or receive a coupon.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript
- By Ritchie S. King
- Published Aug 27, 2014 by Addison-Wesley Professional.
Book
- Sorry, this book is no longer in print.
About
Features
- The perfect resource for technical, design, and media professionals who want to build the world-class infographics that are in incredibly hot demand
- Brings together expert coverage of both infographic design and D3 JavaScript programming
- Illuminates D3's remarkably broad capabilities, from shape drawing and manipulation to transitions, animations, and mapping
- No other resource covers D3 in this much practical detail!
Description
- Copyright 2015
- Dimensions: 7" x 9-1/8"
- Pages: 288
- Edition: 1st
- Book
- ISBN-10: 0-321-93317-6
- ISBN-13: 978-0-321-93317-1
Master D3, Today’s Most Powerful Tool for Visualizing Data on the Web
Data-driven graphics are everywhere these days, from websites and mobile apps to interactive journalism and high-end presentations. Using D3, you can create graphics that are visually stunning and powerfully effective. Visual Storytelling with D3 is a hands-on, full-color tutorial that teaches you to design charts and data visualizations to tell your story quickly and intuitively, and that shows you how to wield the powerful D3 JavaScript library.
Drawing on his extensive experience as a professional graphic artist, writer, and programmer, Ritchie S. King walks you through a complete sample project—from conception through data selection and design. Step by step, you’ll build your skills, mastering increasingly sophisticated graphical forms and techniques. If you know a little HTML and CSS, you have all the technical background you’ll need to master D3.
This tutorial is for web designers creating graphics-driven sites, services, tools, or dashboards; online journalists who want to visualize their content; researchers seeking to communicate their results more intuitively; marketers aiming to deepen their connections with customers; and for any data visualization enthusiast.
Coverage includes
- Identifying a data-driven story and telling it visually
- Creating and manipulating beautiful graphical elements with SVG
- Shaping web pages with D3
- Structuring data so D3 can easily visualize it
- Using D3’s data joins to connect your data to the graphical elements on a web page
- Sizing and scaling charts, and adding axes to them
- Loading and filtering data from external standalone datasets
- Animating your charts with D3’s transitions
- Adding interactivity to visualizations, including a play button that cycles through different views of your data
- Finding D3 resources and getting involved in the thriving online D3 community
About the Website
All of this book’s examples are available at ritchiesking.com/book, along with video tutorials, updates, supporting material, and even more examples, as they become available.
Sample Content
Online Sample Chapter
An Introduction to Data Visualization in JavaScript: How to Use Data-Joins in D3
Table of Contents
Foreword xi
Preface xiii
Acknowledgments xvii
About the Author xix
Chapter 1: Visual Storytelling and D3 1
Visualization, Visualized 1
Charts Give Data a Form–That Form Tells a Story 2
Quality: It Is All about Content 5
Design: It Is All about Form 6
Visual Storytelling 7
Enter D3 7
Things You Designers Will Love about D3 8
Things You Coders Will Love about D3 8
Things for Which You Should Not Use D3 9
Notes on Using D3 9
Tools You Will Need 10
Summary 10
Chapter 2: Finding a Data-Driven Story and Telling It Visually 11
Getting Started 11
Is the World Getting Older? 12
Finding and Inspecting Data 13
Honing the Concept 15
Choosing a Form 17
The Example We Will Build in This Book 27
Summary 29
Chapter 3: Scalable Vector Graphics 31
Peeking under the Hood 31
What Is SVG, Exactly? 31
Playing with Circles in SVG 32
Inspecting SVG in the Web Inspector 34
Styling SVG Elements with CSS 35
Other Shapes 37
SVG Text 41
SVG Style Properties 44
Drawing Order and Groups 47
Transformations 49
Building a Bar Chart in SVG 51
Summary 64
Chapter 4: Shaping Web Pages with D3 Selections 65
Getting Set Up with D3 65
Making Selections 66
Changing a Selection’s Attributes 70
D3 Strives to be Declarative 74
Chaining Methods 74
Appending New Elements 77
Putting It All Together 79
Selecting Multiple Elements with d3.selectAll() 80
Building a Bar Chart with Selections 81
Summary 103
Chapter 5: Data-Joins: Enter 105
What Are Data-Joins? 105
A Conceptual Overview of Data-Joins: Enter 106
Enter and Binding Data 107
Using a Data-Join to Make a Bar Chart 111
Using Anonymous Functions to Access Bound Data 115
Finishing the Rest of the Chart 119
Storing Data in Objects 120
Summary 125
Chapter 6: Sizing Charts and Adding Axes 127
Linear Scales 127
Using Smart Margin Conventions 132
Adding Axes 135
Ordinal Scales and Axes 144
Summary 156
Chapter 7: Loading and Filtering External Data 157
Building a Graphic that Uses All of the Population Distribution Data 157
Data Formats You Can Use with D3 158
Creating a Server to Upload Your Data 159
D3’s Functions for Loading Data 160
Dealing with Asynchronous Requests 165
Loading and Filtering a Large(r) Data Set 171
Putting It All Together 173
Summary 175
Chapter 8: Making Charts Interactive and Animated 177
Data-Joins: Update and Exit 177
Interactive Buttons 181
Updating Charts 190
Adding Transitions 193
Using Keys 196
Summary 197
Chapter 9: Adding a Play Button 199
Wrapping the Update Phase in a Function 199
Adding a Play Button to the Page 203
Making the Play Button Go 204
Allowing the User to Interrupt the Play Sequence 207
Summary 213
Chapter 10: Striking Out on Your Own 215
This Book is a Foundation for Learning D3 215
How to Get Unstuck 215
Always Be Coding 217
Summary 218
Appendix A: JavaScript for Beginners 219
JavaScript in Brief 219
Your Browser’s JavaScript Console 219
Basic Math, Variables, and Data Types 220
Writing JavaScript in Markup and .js Files 223
Arrays and Objects 224
Methods and Functions 227
If Statements and for Loops 228
Debugging 232
Appendix B: Cleaning the Population Distribution Data 235
Index 255