Interactive Data Visualization for the Web

Book description

Create and publish your own interactive data visualization projects on the Web—even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser. Along the way, you’ll expand your web programming skills, using tools such as HTML and JavaScript.

This step-by-step guide is ideal whether you’re a designer or visual artist with no programming experience, a reporter exploring the new frontier of data journalism, or anyone who wants to visualize and share data.

  • Learn HTML, CSS, JavaScript, and SVG basics
  • Dynamically generate web page elements from your data—and choose visual encoding rules to style them
  • Create bar charts, scatter plots, pie charts, stacked bar charts, and force-directed layouts
  • Use smooth, animated transitions to show changes in your data
  • Introduce interactivity to help users explore data through different views
  • Create customized geographic maps with data
  • Explore hands-on with downloadable code and over 100 examples

Publisher resources

View/Submit Errata

Table of contents

  1. A Note Regarding Supplemental Files
  2. Preface
    1. Conventions Used in This Book
    2. Using Code Examples
    3. Safari® Books Online
    4. How to Contact Us
    5. Acknowledgments
  3. 1. Introduction
    1. Why Data Visualization?
    2. Why Write Code?
    3. Why Interactive?
    4. Why on the Web?
    5. What This Book Is
    6. Who You Are
    7. What This Book Is Not
    8. Using Sample Code
    9. Thank You
  4. 2. Introducing D3
    1. What It Does
    2. What It Doesn’t Do
    3. Origins and Context
    4. Alternatives
      1. Easy Charts
      2. Graph Visualizations
      3. Geomapping
      4. Almost from Scratch
      5. Three-Dimensional
      6. Tools Built with D3
  5. 3. Technology Fundamentals
    1. The Web
    2. HTML
      1. Content Plus Structure
      2. Adding Structure with Elements
      3. Common Elements
      4. Attributes
      5. Classes and IDs
      6. Comments
    3. DOM
    4. Developer Tools
    5. Rendering and the Box Model
    6. CSS
      1. Selectors
      2. Properties and Values
      3. Comments
      4. Referencing Styles
        1. Embed the CSS in your HTML.
        2. Reference an external stylesheet from the HTML.
        3. Attach inline styles.
      5. Inheritance, Cascading, and Specificity
    7. JavaScript
      1. Hello, Console
      2. Variables
      3. Other Variable Types
      4. Arrays
      5. Objects
      6. Objects and Arrays
        1. JSON
        2. GeoJSON
      7. Mathematical Operators
      8. Comparison Operators
      9. Control Structures
        1. if() only
        2. for() now
        3. What arrays are made for()
      10. Functions
      11. Comments
      12. Referencing Scripts
      13. JavaScript Gotchas
        1. Dynamic typing
        2. Variable hoisting
        3. Function-level scope
        4. Global namespace
    8. SVG
      1. The SVG Element
      2. Simple Shapes
      3. Styling SVG Elements
      4. Layering and Drawing Order
      5. Transparency
    9. A Note on Compatibility
  6. 4. Setup
    1. Downloading D3
    2. Referencing D3
    3. Setting Up a Web Server
      1. Terminal with Python
      2. MAMP, WAMP, and LAMP
      3. Diving In
  7. 5. Data
    1. Generating Page Elements
      1. Chaining Methods
      2. One Link at a Time
      3. The Hand-off
      4. Going Chainless
    2. Binding Data
      1. In a Bind
      2. Data
        1. Loading CSV data
        2. Loading JSON data
      3. Please Make Your Selection
      4. Bound and Determined
      5. Using Your Data
      6. High-Functioning
      7. Data Wants to Be Held
      8. Beyond Text
  8. 6. Drawing with Data
    1. Drawing divs
      1. Setting Attributes
      2. A Note on Classes
      3. Back to the Bars
      4. Setting Styles
    2. The Power of data()
      1. Random Data
    3. Drawing SVGs
      1. Create the SVG
      2. Data-Driven Shapes
      3. Pretty Colors, Oooh!
    4. Making a Bar Chart
      1. The Old Chart
      2. The New Chart
      3. Color
      4. Labels
    5. Making a Scatterplot
      1. The Data
      2. The Scatterplot
      3. Size
      4. Labels
    6. Next Steps
  9. 7. Scales
    1. Apples and Pixels
    2. Domains and Ranges
    3. Normalization
    4. Creating a Scale
    5. Scaling the Scatterplot
      1. d3.min() and d3.max()
      2. Setting Up Dynamic Scales
      3. Incorporating Scaled Values
    6. Refining the Plot
    7. Other Methods
    8. Other Scales
  10. 8. Axes
    1. Introducing Axes
    2. Setting Up an Axis
    3. Cleaning It Up
    4. Check for Ticks
    5. Y Not?
    6. Final Touches
    7. Formatting Tick Labels
  11. 9. Updates, Transitions, and Motion
    1. Modernizing the Bar Chart
      1. Ordinal Scales, Explained
      2. Round Bands Are All the Range These Days
      3. Referencing the Ordinal Scale
      4. Other Updates
    2. Updating Data
      1. Interaction via Event Listeners
      2. Changing the Data
      3. Updating the Visuals
    3. Transitions
      1. duration(), or How Long Is This Going to Take?
      2. ease()-y Does It
      3. Please Do Not delay()
      4. Randomizing the Data
      5. Updating Scales
      6. Updating Axes
      7. each() Transition Starts and Ends
        1. Warning: Start carefully
        2. End gracefully
        3. Transitionless each()
        4. Containing visual elements with clipping paths
    4. Other Kinds of Data Updates
      1. Adding Values (and Elements)
        1. Select
        2. Enter
        3. Update
      2. Removing Values (and Elements)
        1. Exit
        2. Making a smooth exit
      3. Data Joins with Keys
        1. Preparing the data
        2. Updating all references
        3. Key functions
        4. Exit transition
      4. Add and Remove: Combo Platter
      5. Recap
  12. 10. Interactivity
    1. Binding Event Listeners
    2. Introducing Behaviors
      1. Hover to Highlight
    3. Grouping SVG Elements
      1. Click to Sort
    4. Tooltips
      1. Default Browser Tooltips
      2. SVG Element Tooltips
      3. HTML div Tooltips
    5. Consideration for Touch Devices
    6. Moving Forward
  13. 11. Layouts
    1. Pie Layout
    2. Stack Layout
    3. Force Layout
  14. 12. Geomapping
    1. JSON, Meet GeoJSON
    2. Paths
    3. Projections
    4. Choropleth
    5. Adding Points
    6. Acquiring and Parsing Geodata
      1. Find Shapefiles
      2. Choose a Resolution
      3. Simplify the Shapes
      4. Convert to GeoJSON
  15. 13. Exporting
    1. Bitmaps
    2. PDF
    3. SVG
  16. A. Appendix: Further Study
    1. Books
    2. Websites
    3. Twitterers
  17. Index
  18. About the Author
  19. Colophon
  20. Copyright

Product information

  • Title: Interactive Data Visualization for the Web
  • Author(s): Scott Murray
  • Release date: March 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449339739