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

D3.js: Cutting-edge Data Visualization

Book Description

Turn your raw data into real knowledge by creating and deploying complex data visualizations with D3.js

About This Book

  • Understand how to best represent your data by developing the right kind of visualization
  • Explore the concepts of D3.js through examples that enable you to quickly create visualizations including charts, network diagrams, and maps
  • Get practical examples of visualizations using real-world data sets that show you how to use D3.js to visualize and interact with information to glean its underlying meaning

Who This Book Is For

Whether you are new to data and data visualization, a seasoned data scientist, or a computer graphics specialist, this Learning Path will provide you with the skills you need to create web-based and interactive data visualizations. Some basic JavaScript knowledge is expected, but no prior experience with data visualization or D3 is required

What You Will Learn

  • Gain a solid understanding of the common D3 development idioms
  • Find out how to write basic D3 code for servers using Node.js
  • Install and use D3.js to create HTML elements within a document
  • Create and style graphical elements such as circles, ellipses, rectangles, lines, paths, and text using SVG
  • Turn your data into bar and scatter charts, and add margins, axes, labels, and legends
  • Use D3.js generators to perform the magic of creating complex visualizations from data
  • Add interactivity to your visualizations, including tool-tips, sorting, hover-to-highlight, and grouping and dragging of visuals
  • Write, test, and distribute a D3-based charting package
  • Make a real-time application with Node and D3

In Detail

D3 has emerged as one of the leading platforms to develop beautiful, interactive visualizations over the web. We begin the course by setting up a strong foundation, then build on this foundation as we take you through the entire world of reimagining data using interactive, animated visualizations created in D3.js.

In the first module, we cover the various features of D3.js to build a wide range of visualizations. We also focus on the entire process of representing data through visualizations. By the end of this module, you will be ready to use D3 to transform any data into a more engaging and sophisticated visualization.

In the next module, you will learn to master the creation of graphical elements from data. Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js.

Over the last leg of this course, you will get acquainted with how to integrate D3 with mapping libraries to provide reverse geocoding and interactive maps among many other advanced features of D3. This module culminates by showing you how to create enterprise-level dashboards to display real-time data.

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • Learning D3.js Data Visualization, Second Edition by Andrew H. Rininsland
  • D3.js By Example by Michael Heydt
  • Mastering D3.js by Pablo Navarro Castillo

Style and approach

This course provides a comprehensive explanation of how to leverage the power of D3.js to create powerful and creative visualizations through step-by-step instructions in the form of modules. Each module help you skill up a level in creating meaningful visualizations.

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 code file.

Table of Contents

  1. D3.js: Cutting-edge Data Visualization
    1. Table of Contents
    2. D3.js: Cutting-edge Data Visualization
    3. D3.js: Cutting-edge Data Visualization
    4. Credits
    5. Preface
      1. What this learning path covers
      2. What you need for this learning path
      3. Who this learning path is for
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    6. 1. Module 1
      1. 1. Getting Started with D3, ES2016, and Node.js
        1. What is D3.js?
        2. What's ES2016?
          1. Getting started with Node and Git on the command line
          2. A quick Chrome Developer Tools primer
          3. The obligatory bar chart example
        3. Summary
      2. 2. A Primer on DOM, SVG, and CSS
        1. DOM
          1. Manipulating the DOM with D3
          2. Selections
          3. Let's make a table!
        2. What exactly did we do here?
          1. Selections example
          2. Manipulating content
          3. Joining data to selections
          4. An HTML visualization example
        3. Scalable Vector Graphics
          1. Drawing with SVG
          2. Manually adding elements and shapes
            1. Text
            2. Shapes
            3. Transformations
          3. Using paths
            1. Line
            2. Area
            3. Arc
            4. Symbol
            5. Chord
            6. Diagonal
          4. Axes
          5. CSS
          6. Colors
        4. Summary
      3. 3. Making Data Useful
        1. Thinking about data functionally
          1. Built-in array functions
          2. Data functions of D3
        2. Loading data
          1. The core
          2. Convenience functions
        3. Scales
          1. Ordinal scales
          2. Quantitative scales
          3. Continuous range scales
          4. Discrete range scales
          5. Time
            1. Formatting
            2. Time arithmetic
        4. Geography
          1. Getting geodata
          2. Drawing geographically
          3. Using geography as a base
        5. Summary
      4. 4. Defining the User Experience – Animation and Interaction
        1. Animation
        2. Animation with transitions
          1. Interpolators
          2. Easing
          3. Timers
          4. Animation with CSS transitions
        3. Interacting with the user
          1. Basic interaction
        4. Behaviors
          1. Drag
          2. Zoom
          3. Brushes
        5. Summary
      5. 5. Layouts – D3's Black Magic
        1. What are layouts and why should you care?
          1. Built-in layouts
          2. The dataset
        2. Normal layouts
        3. Using the histogram layout
        4. Baking a fresh 'n' delicious pie chart
          1. Labeling your pie chart
        5. Showing popularity through time with stack
          1. Adding tooltips to our streamgraph
        6. Highlighting connections with chord
          1. Drawing with force
        7. Hierarchical layouts
        8. Drawing a tree
        9. Showing clusters
          1. Partitioning a pie
          2. Packing it in
          3. Subdividing with treemap
        10. Summary
      6. 6. D3 on the Server with Node.js
        1. Readying the environment
        2. All aboard the Express train to Server Town!
        3. Proximity detection and the Voronoi geom
        4. Rendering in Canvas on the server
        5. Deploying to Heroku
        6. Summary
      7. 7. Designing Good Data Visualizations
        1. Clarity, honesty, and sense of purpose
        2. Helping your audience understand scale
        3. Using color effectively
        4. Understanding your audience (or "trying not to forget about mobile")
          1. Some principles for designing for mobile and desktop
            1. Columns are for desktops, rows are for mobile
            2. Be sparing with animations on mobile
            3. Realize similar UI elements react differently between platforms
            4. Avoid "mystery meat" navigation
            5. Be wary of the scroll
        5. Summary
      8. 8. Having Confidence in Your Visualizations
        1. Linting all the things
        2. Static type checking with TypeScript and Flow
          1. The new kid on the block – Facebook Flow
          2. TypeScript – the current heavyweight champion
        3. Behavior-driven development with Karma and Mocha Chai
          1. Setting up your project with Mocha and Karma
          2. Testing behaviors first – BDD with Mocha
        4. Summary
    7. 2. Module 2
      1. 1. Getting Started with D3.js
        1. A brief overview of D3.js
          1. Selections
          2. Data and data binding
          3. Interaction and animation
          4. Modules
        2. Tools for creating and sharing D3.js visualizations
          1. Js Bin
          2. bl.ocks.org
        3. Google Chrome and Developer tools
        4. Hello World – D3.js style
        5. Examining the DOM generated by D3.js
        6. Summary
      2. 2. Selections and Data Binding
        1. D3.js selections
          1. Changing the style of a DOM element
            1. Changing the style of multiple items
        2. D3.js and data binding
          1. Data binding
            1. Specifying the entering elements with .enter()
          2. Adding new items using .enter()
            1. Updating values
            2. Removing items with .exit()
          3. A few notes for the wise about the general update pattern
        3. Summary
      3. 3. Creating Visuals with SVG
        1. Introducing SVG
          1. The SVG coordinate system
          2. SVG attributes
          3. Drawing circles with SVG
        2. The basic shapes provided by SVG
          1. Ellipse
          2. Rectangle
          3. Lines
          4. Paths
          5. Text
        3. Applying CSS styles to SVG elements
        4. Strokes, caps, and dashes
        5. Applying SVG transforms
          1. Rotate
          2. Translate
          3. Scale
        6. Groups
        7. Transparency
        8. Layers
        9. Summary
      4. 4. Creating a Bar Graph
        1. The basic bar graph
          1. Adding labels to the bars
        2. Margins and axes
          1. Creating margins in the bar graph
          2. Creating an axis
            1. Changing the axis orientation
          3. Inverting the labels on an axis
          4. Adding the axis to the graph
        3. Summary
      5. 5. Using Data and Scales
        1. Data
          1. Loading data with D3.js
            1. Loading JSON data
            2. Loading TSV data
            3. Loading CSV data
          2. Mapping fields and converting strings to numbers
        2. Scales
          1. Linear scales
          2. Ordinal scales
            1. Mapping color strings to codes
            2. Mapping integers to color scales
            3. The ordinal scale using rangeBands
          3. Visualizing The Walking Dead viewership
        3. Summary
      6. 6. Creating Scatter and Bubble Plots
        1. Creating scatter plots
          1. Plotting points
          2. Sprucing up the scatter plot
            1. Adding gridlines
        2. Creating a bubble plot
        3. Summary
      7. 7. Creating Animated Visuals
        1. Introduction to animation
          1. Animating using transitions
            1. Animating the fill color of a rectangle
            2. Animating multiple properties simultaneously
            3. Delaying a transition
            4. Creating chained transitions
            5. Handling the start and end events of transitions
          2. Changing the content and size of text using tweening
          3. Timers
        2. Adding a fifth dimension to a bubble plot – time
        3. Summary
      8. 8. Adding User Interactivity
        1. Handling mouse events
          1. Tracking the mouse position using mousemove
          2. Capturing the mouse entering and exiting an SVG element
          3. Letting the user know they have clicked the mouse
        2. Using behaviors to drag, pan, and zoom
          1. Drag
          2. Pan and zoom
        3. Enhancing a bar graph with interactivity
        4. Highlighting selected items using brushes
          1. Online examples of brushes
          2. Implementing focus + context
        5. Summary
      9. 9. Complex Shapes Using Paths
        1. An overview of path data generators
          1. Creating a sequence of lines
          2. Areas
          3. Creating arcs, donuts, wedges, and segments
          4. Creating a pie chart
            1. Exploding the pie
            2. Creating a ring graph
          5. Creating symbols
          6. Using diagonals to create curved lines
        2. Drawing line graphs using interpolators
          1. Linear and linear-closed interpolators
          2. Step-before and step-after interpolations
          3. Creating curved lines using the basis interpolation
          4. Creating curved lines using the bundle interpolation
          5. Creating curved lines using the cardinal interpolation
        3. Summary
      10. 10. Using Layouts to Visualize Series and Hierarchical Data
        1. Using stacked layouts
          1. Creating a stacked bar graph
          2. Modifying the stacked bar into a stacked area graph
          3. Converting the area graph to an expanded area graph
        2. Visualizing hierarchical data
          1. Tree diagrams
          2. Creating a cluster dendrogram
          3. Representing hierarchy with an enclosure diagram
        3. Representing relationships with chord diagrams
        4. Techniques to demonstrate the flow of information
          1. Using streamgraphs to show changes in values
          2. Representing flows through multiple nodes
        5. Summary
      11. 11. Visualizing Information Networks
        1. An overview of force-directed graphs
        2. A simple force-directed graph
        3. Using link distance to spread out the nodes
        4. Adding repulsion to nodes for preventing crossed links
          1. Labelling the nodes
          2. Making nodes stick in place
          3. Adding directionality markers and style to the links
        5. Summary
      12. 12. Creating Maps with GeoJSON and TopoJSON
        1. Introducing TopoJSON and GeoJSON
        2. Creating a map of the United States
          1. Creating our first map of the United States with GeoJSON
        3. Styling the map of the United States
          1. Using the albersUsa projection
        4. Creating a flat map of the world
          1. Loading and rendering with TopoJSON
          2. Creating a map of the world using a Mercator projection
          3. Creating spherical maps with orthographic projection
        5. Spicing up a globe
          1. Coloring the countries on a globe
        6. Adding interactivity to maps
          1. Panning and zooming a world map
          2. Highlighting country borders on mouse hover
          3. Rotating a globe using the mouse
        7. Annotating a map
          1. Labelling states using centroids
          2. Placing symbols at specific geographic locations
          3. Creating a choropleth
        8. Summary
      13. 13. Combining D3.js and AngularJS
        1. An overview of composite visualization
        2. Creating a bar graph using AngularJS
          1. The web page and application
          2. The controller
          3. The directive for a bar graph
        3. Adding a second directive for a donut
          1. The web page
          2. The directive for the donut graph
        4. Adding a detail view and interactivity
          1. The web page
          2. Specifying an initial selectedItem in the controller
          3. The modified bars view directive
          4. Implementing the details view directive
          5. The resulting interactive page
        5. Updating graphs upon the modification of details data
          1. The web page
          2. The revised bar-view directive
          3. The revised donut-view directive
          4. The detail-view directive
          5. The results
        6. Summary
    8. 3. Module 3
      1. 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
      2. 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
      3. 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
      4. 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
      5. 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
      6. 6. Interaction between Charts
        1. Learning the basics of Backbone
          1. Events
          2. Models
          3. Collections
          4. Views
          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
      7. 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
      8. 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
      9. 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
      10. 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
      11. 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
      12. 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
    9. A. Bibliography
    10. Index