You are previewing Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript™.
O'Reilly logo
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript™

Book Description

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.

    Table of Contents

    1. Title Page
    2. Copyright Page
    3. Contents
    4. Preface
      1. Goals and Audience
      2. How This Book Is Structured
      3. Conventions
      4. A Final Word
    5. Acknowledgments
    6. About the Author
    7. 1. Visual Storytelling and D3
      1. Visualization, Visualized
      2. Charts Give Data a Form—That Form Tells a Story
      3. Quality: It Is All about Content
      4. Design: It Is All about Form
      5. Visual Storytelling
      6. Enter D3
      7. Things You Designers Will Love about D3
      8. Things You Coders Will Love about D3
      9. Things For Which You Should Not Use D3
      10. Notes on Using D3
      11. Tools that You Will Need
      12. Summary
    8. 2. Finding a Data-Driven Story and Telling It Visually
      1. Getting Started
      2. Finding and Inspecting Data
      3. Honing the Concept
      4. Choosing a Form
      5. The Example We Will Build in This Book
      6. Summary
    9. 3. Scalable Vector Graphics
      1. Peeking Under the Hood
      2. What Is SVG, Exactly?
      3. Playing with Circles in SVG
      4. Inspecting SVG in the Web Inspector
      5. Styling SVG Elements with CSS
      6. Other Shapes
      7. SVG Text
      8. SVG Style Properties
      9. Drawing Order and Groups
      10. Transformations
      11. Building a Bar Chart in SVG
      12. Summary
    10. 4. Shaping Web Pages with D3 Selections
      1. Getting Set Up with D3
      2. Making Selections
      3. Changing a Selection’s Attributes
      4. D3 Strives to be Declarative
      5. Chaining Methods
      6. Appending New Elements
      7. Putting It All Together
      8. Selecting Multiple Elements with d3.selectAll()
      9. Building a Bar Chart with Selections
      10. Summary
    11. 5. Data-Joins: Enter
      1. What Are Data-Joins?
      2. A Conceptual Overview of Data-Joins: Enter
      3. Enter and Binding Data
      4. Using a Data-Join to Make a Bar Chart
      5. Summary
    12. 6. Sizing Charts and Adding Axes
      1. Linear Scales
      2. Using Smart Margin Conventions
      3. Adding Axes
      4. Ordinal Scales and Axes
      5. Summary
    13. 7. Loading and Filtering External Data
      1. Building a Graphic that Uses all of the Population Distribution Data
      2. Data Formats You Can Use with D3
      3. Creating a Server to Upload Your Data
      4. D3’s Functions for Loading Data
      5. Dealing with Asynchronous Requests
      6. Loading and Filtering a Large(r) Data Set
      7. Putting It All Together
      8. Summary
    14. 8. Making Charts Interactive and Animated
      1. Data-Joins: Update and Exit
      2. Interactive Buttons
      3. Updating Charts
      4. Adding Transitions
      5. Using Keys
      6. Summary
    15. 9. Adding a Play Button
      1. Wrapping the Update Phase in a Function
      2. Adding a Play Button to the Page
      3. Making the Play Button Go
      4. Allowing the User to Interrupt the Play Sequence
      5. Summary
    16. 10. Striking Out on Your Own
      1. This Book Is a Foundation for Learning D3
      2. How to Get Unstuck
      3. Always Be Coding
      4. Summary
    17. A. JavaScript for Beginners
      1. JavaScript In Brief
      2. Your Browser’s JavaScript Console
      3. Basic Math, Variables, and Data Types
      4. Writing JavaScript in Markup and .js Files
      5. Arrays and Objects
      6. Methods and Functions
      7. If Statements and for Loops
      8. Debugging
    18. B. Cleaning the Population Distribution Data