Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript™

Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript™

by Ritchie S. King
Released August 2014
Publisher(s): Addison-Wesley Professional
ISBN: 9780133439649

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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. About This eBook
    2. Title Page
    3. Copyright Page
    4. Dedication Page
    5. Contents
    6. Foreword
    7. Preface
      1. Goals and Audience
      2. How This Book Is Structured
      3. Conventions
      4. A Final Word
    8. Acknowledgments
    9. About the Author
    10. 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 You Will Need
      12. Summary
    11. 2. Finding a Data-Driven Story and Telling It Visually
      1. Getting Started
      2. Is the World Getting Older?
      3. Finding and Inspecting Data
      4. Honing the Concept
      5. Choosing a Form
        1. Showing the Data as a Column Chart
        2. Showing the Data as a Stacked Column Chart
        3. Showing the Data as a Line Chart
        4. Showing the Data as a Pie Chart
        5. Showing the Data as a Bar Chart
        6. Showing the Data as a Small Multiple Bar Chart
        7. Chart Suggestions—A Thought Starter
      6. The Example We Will Build in This Book
      7. Summary
    12. 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
        1. Rectangles
        2. Rounded Rectangles
        3. Circles
        4. Ellipses
        5. Polygons
        6. Lines
        7. Paths
      7. SVG Text
      8. SVG Style Properties
        1. Color and Transparency
        2. Stroke Properties
      9. Drawing Order and Groups
      10. Transformations
      11. Building a Bar Chart in SVG
      12. Summary
    13. 4. Shaping Web Pages with D3 Selections
      1. Getting Set Up with D3
      2. Making Selections
        1. Using CSS Selectors to Create Selections
        2. Creating Selections from Other Selections
        3. Assigning Selections to Variables
      3. Changing a Selection’s Attributes
        1. How attr() Works
        2. Using attr() to Apply Classes and Style Rules
      4. D3 Strives to be Declarative
      5. Chaining Methods
        1. Creating New Selections in the Middle of a Chain
        2. Chains and Variable Assignment
      6. Appending New Elements
      7. Putting It All Together
      8. Selecting Multiple Elements with d3.selectAll()
      9. Building a Bar Chart with Selections
        1. Use Variables
        2. Do Math
        3. Use Better Variables
        4. Use a Variable for Your Data
        5. Make Your Constraints Explicit
        6. Use Loops
      10. Summary
    14. 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. Using Anonymous Functions to Access Bound Data
      6. Finishing the Rest of the Chart
      7. Storing Data in Objects
      8. Summary
    15. 6. Sizing Charts and Adding Axes
      1. Linear Scales
      2. Using Smart Margin Conventions
      3. Adding Axes
      4. Ordinal Scales and Axes
      5. Summary
    16. 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
        1. Initiating a Server on the Command Line
        2. Creating an Index File
      4. D3’s Functions for Loading Data
        1. Callback Functions
        2. How D3 Interprets CSV Tables
      5. Dealing with Asynchronous Requests
        1. Creating a Bar Chart with External Data
      6. Loading and Filtering a Large(r) Data Set
      7. Putting It All Together
      8. Summary
    17. 8. Making Charts Interactive and Animated
      1. Data-Joins: Update and Exit
      2. Interactive Buttons
        1. Making Buttons Using a Data Join
        2. Making the Buttons Clickable
      3. Updating Charts
      4. Adding Transitions
      5. Using Keys
      6. Summary
    18. 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
    19. 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
    20. 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
    21. B. Cleaning the Population Distribution Data
    22. Index

    Product information

    • Title: Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript™
    • Author(s): Ritchie S. King
    • Release date: August 2014
    • Publisher(s): Addison-Wesley Professional
    • ISBN: 9780133439649