O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mastering D3.js

Book Description

Bring your data to life by creating and deploying complex data visualizations with D3.js

In Detail

This is a practical guide with real-world examples that will help you to create custom charts, and integrate them with third-party libraries to create rich, engaging data-driven applications. Starting with the reusable chart pattern, we will take you through designing and creating complex, real-time data visualizations.

You will learn how to create reusable D3-based charts and integrate them into data visualization projects. You will get to know how to create and distribute a custom charting package. You will get acquainted with how to integrate D3 with mapping libraries to provide reverse geocoding and interactive maps.

This book culminates by showing you how to create enterprise-level dashboards to display real-time data.

What You Will Learn

  • Create reusable chart components that can be used in other projects
  • Build charts for browsers without SVG support by using polyfills
  • Integrate D3 and Backbone to create interactive single-page applications
  • Write, test, and distribute a D3-based charting package
  • Create custom maps and integrate D3 with third-party mapping libraries
  • Make a real-time application with Node and D3

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Mastering D3.js
    1. Table of Contents
    2. Mastering D3.js
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Data Visualization
      1. Defining data visualization
        1. Some kinds of data visualizations
          1. Infographics
          2. Exploratory visualizations
          3. Dashboards
          4. Learning about data visualization
      2. Introducing the D3 library
      3. Summary
    9. 2. Reusable Charts
      1. Creating reusable charts
        1. Creating elements with D3
          1. Binding data
          2. Encapsulating the creation of elements
          3. Creating the svg element
        2. The barcode chart
          1. Accessor methods
          2. Chart initialization
          3. Adding data
          4. Adding the date accessor function
          5. Updating the dataset
          6. Fixing the enter and exit transitions
      2. Using the barcode chart
      3. Creating a layout algorithm
        1. The radial layout
          1. Computing the angles
        2. Using the layout
      4. Summary
    10. 3. Creating Visualizations without SVG
      1. SVG support in the browser market
      2. Visualizations without SVG
        1. Loading and sorting the data
        2. The force layout method
        3. Setting the color and size
        4. Creating a legend
      3. Polyfilling
        1. Feature detection
        2. The canvg example
      4. Using canvas and D3
        1. Creating figures with canvas
          1. Creating shapes
          2. Integrating canvas and D3
      5. Summary
    11. 4. Creating a Color Picker with D3
      1. Creating a slider control
        1. The drag behavior
        2. Creating the slider
        3. Using the slider
      2. Creating a color picker
        1. The color picker selector
          1. Adding the color picker window
        2. The color picker window
      3. Summary
    12. 5. Creating User Interface Elements
      1. Highlighting chart elements
      2. Creating tooltips
        1. Using the tooltip
      3. Selecting a range with brushing
        1. Creating the area chart
        2. Adding brushing
        3. The brush listener
      4. Summary
    13. 6. Interaction between Charts
      1. Learning the basics of Backbone
        1. Events
        2. Models
        3. Collections
        5. Routers
      2. The stock explorer application
        1. Creating the stock charts
          1. The stock title chart
          2. The stock area chart
        2. Preparing the application structure
          1. The index page
        3. Creating the models and collections
          1. The stock model
          2. The stock collection
          3. The application model
        4. Implementing the views
          1. The title view
          2. The stock selector view
          3. The stock context view
          4. The stock detail view
          5. The application view
        5. Defining the routes
        6. Initializing the application
      3. Summary
    14. 7. Creating a Charting Package
      1. The development workflow
        1. Writing the code
        2. Creating a release
          1. Semantic Versioning
      2. Creating the package contents
        1. The heat map chart
        2. The matrix layout
      3. The project setup
        1. Installing the Node modules
        2. Building with Grunt
          1. Concatenating our source files
          2. Minifying the library
          3. Checking our code with JSHint
          4. Testing our package
            1. Writing a simple test
            2. Testing the heat map chart
            3. Testing the matrix layout
            4. Running the tests with Grunt
          5. Registering the sequences of tasks
        3. Managing the frontend dependencies
      4. Using the package in other projects
      5. Summary
    15. 8. Data-driven Applications
      1. Creating the application
        1. The project setup
        2. Generating a static site with Jekyll
        3. Creating the application components
          1. Creating the models and collections
          2. Creating the views
          3. The application setup
      2. Hosting the visualization with GitHub Pages
      3. Hosting the visualization in Amazon S3
        1. Configuring Jekyll to deploy files to S3
        2. Uploading the site to the S3 bucket
      4. Summary
    16. 9. Creating a Dashboard
      1. Defining a dashboard
      2. Good practices in dashboard design
      3. Making a dashboard
        1. Defining the purpose of the dashboard
        2. Obtaining the data
        3. Organizing the information
        4. Creating the dashboard sections
          1. The students section
          2. The courses section
          3. The class section
        5. Gathering the dashboard sections
      4. Summary
    17. 10. Creating Maps
      1. Obtaining geographic data
        1. Understanding the GeoJSON and TopoJSON formats
        2. Transforming and manipulating the files
      2. Creating maps with D3
        1. Creating a choropleth map
        2. Mapping topology
        3. Using Mapbox and D3
        4. Creating a Mapbox project
        5. Integrating Mapbox and D3
      3. Summary
    18. 11. Creating Advanced Maps
      1. Using cartographic projections
        1. Using the Equirectangular projection
        2. The Conic Equidistant projection
        3. The Orthographic projection
      2. Creating a rotating globe
      3. Creating an interactive star map
        1. Choosing our star catalog
        2. Drawing the stars
        3. Changing the projection and adding rotation
        4. Adding colors and labels to the stars
      4. Projecting raster images with D3
        1. Rendering the raster image with canvas
        2. Computing the geographic coordinates of each pixel
        3. Reprojecting the image using the Orthographic projection
      5. Summary
    19. 12. Creating a Real-time Application
      1. Collaborating in real time with Firebase
        1. Configuring Firebase
        2. Integrating the application with Firebase
      2. Creating a Twitter explorer application
      3. Creating the streaming server
        1. Using the Twitter-streaming API
          1. Using Twit to access the Twitter-streaming API
        2. Using Socket.IO
        3. Implementing the streaming server
      4. Creating the client application
        1. The application structure
          1. Models and collections
          2. Implementing the topics views
            1. The input view
            2. The bar chart view
            3. The topics map view
          3. Creating the application view
          4. The application setup
      5. Summary
    20. Index