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

Expert Data Visualization

Book Description

Breathe life into your data by learning how to use D3.js V4 to visualize information

About This Book

  • Create complex visualizations powered by D3.js and open data.
  • Provides an extensive set of visualizations that explore all the functionality provided by D3.js V4.
  • Shows how to set up an easy?to-use environment to create stunning visualizations.

Who This Book Is For

The typical target audience of this book is JavaScript developers, designers, and visual artists who have some basic JavaScript programming knowledge and who now want to master pro-level techniques to create interactive data visualizations using web standards which work on desktop as well as mobile devices.

What You Will Learn

  • Learn how D3.js works to declaratively define visualizations.
  • Create charts from scratch by using SVG and the D3.js APIs
  • See how to prepare data for easy visualization using D3.js.
  • Visualize hierarchical data using chart types provided by D3.js
  • Explore the different options provided by D3.js to visualize linked data such as graphs.
  • Spice up your visualizations by adding interactivity and animations.
  • Learn how to use D3.js to visualize and interact with Geo- and Gis-related information sources.
  • Create visualization by streaming data over WebSockets

In Detail

Do you want to make sense of your data? Do you want to create interactive charts, data trees, info-graphics, geospatial charts, and maps efficiently? This book is your ideal choice to master interactive data visualization with D3.js V4.

The book includes a number of extensive examples that to help you hone your skills with data visualization. Throughout nine chapters these examples will help you acquire a clear practical understanding of the various techniques, tools and functionality provided by D3.js. You will first setup your D3.JS development environment and learn the basic patterns needed to visualize your data. After that you will learn techniques to optimize different processes such as working with selections; animating data transitions; creating graps and charts, integrating external resources (static as well as streaming); visualizing information on maps; working with colors and scales; utilizing the different D3.js APIs; and much more. The book will also guide you through creating custom graphs and visualizations, and show you how to go from the raw data to beautiful visualizations. The extensive examples will include working with complex and realtime data streams, such as seismic data, geospatial data, scientific data, and more. Towards the end of the book, you will learn to add more functionality on top of D3.js by using it with other external libraries and integrating it with Ecmascript 6 and Typescript

Style and approach

This book will have a real?world, case-study approach, where you will be given data sets from different domains. These data sets will have different visualization goals; some might need 2D or 3D charts, some might need automated workflows, others might require interactive maps. While you fulfill these goals, you will learn different techniques and best practices, which will enable you to perform data visualization tasks on your own

Table of Contents

  1. 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
  2. Getting Started with D3
    1. What is D3?
    2. Setup of this book
      1. Installing an editor
      2. Getting the sources and setting up a web server
      3. Setting up the local web server
    3. Basic HTML template
    4. How does D3 work?
      1. Creating a group element
      2. Adding rectangles to the group element
      3. Creating dummy data
      4. Binding the data and updating existing rectangles
      5. Adding new rectangles if needed
      6. Removing elements which aren't needed anymore
    5. Visualizing our first data
      1. Sanitizing and getting the data
      2. Creating the visualization
        1. Loading CSV data with D3
        2. Grouping the loaded data so we only have the top 10 names for both sexes
        3. Adding group elements
        4. Adding the bar chart and baby name
        5. Adding some CSS classes to style the bars and text elements
        6. Adding the axis on the top and bottom
    6. Summary
  3. Basic Charts and Shapes
    1. How long have American firms been in business visualized with pies and donuts
      1. Get and cleanup the data
      2. Creating the donut
        1. Loading the data
        2. Adding the dropdown
        3. Standard setup, helper objects, and a gray donut
          1. Color interpolation and color schemes
          2. Create the background donut
        4. Individual donut segments
        5. Adding text legends
        6. Add the lines from the donut to the text
        7. Making the donut respond to mouse events
    2. Line charts that show income growth
      1. Loading the data and setting up D3 scales
      2. Adding the index line and area gradients
      3. Adding the income line
      4. Adding the axes
        1. Adding an x-axis with years
        2. Adding a y-axis with absolute income
        3. Adding the y-axis with the index values and the horizontal marker lines
      5. Tracking the mouse
    3. Population growth estimates using a stacked graph
      1. Getting and sanitizing the data
      2. Creating the stacked area chart
      3. Creating the stacked bar chart
    4. Summary
  4. Working with Hierarchical Data
    1. Tree-based visualizations
      1. Getting and sanitizing the data
      2. Normal tree
        1. Converting data into a hierarchical data structure
        2. Using D3 build-in functionality to create a tree
        3. Drawing the tree elements
        4. Adding panning and zooming to the visualization
      3. Radial tree
        1. Loading the data
        2. Setting up a color scale
        3. Rendering the lines, nodes, and text elements
        4. Adding the animations
          1. Animating the treemap on initial load
          2. Animating hiding a node
    2. Treemap and partition
      1. Loading the country data
      2. Setting up coloring and draw a legend
      3. Drawing and animating the rectangles
      4. Add the text elements
      5. Setting up the popup
      6. Adding the click event listener to switch the value shown
    3. Alternative visualizations using partition and pack layouts
    4. Data visualized using a partition layout
    5. Data visualized using a pack layout
    6. Summary
  5. Visualizing Graphs
    1. Force layout
      1. Getting the raw Simpsons data
        1. Getting the relevant information from the database
        2. Converting the data from the database
      2. Creating the force layout
        1. Loading the fonts, setting up the title, and loading the Simpsons logo
        2. Setting up the force simulation
        3. Loading the data and drawing the circles and the lines
        4. Running the simulation
        5. Adding images to the circles for the characters
        6. Adding a mouseover effect for selecting and dragging.
    2. Bubble chart
      1. Getting the data
      2. Create the bubble chart
        1. Loading and preparing the data
        2. Setting up the simulation
        3. Adding the nodes and running the simulation
        4. Adding the legend
        5. Adding interactivity
    3. Chord diagram
      1. Preparing the data
      2. Loading and converting the data in D3
      3. Create a chord diagram from the data
      4. Adding a mouseover effect
    4. Matrix diagram
      1. Setting up the data and the standard D3 components
      2. Filling the matrix with data
      3. Drawing the visualization
      4. Add mouse handlers
    5. Summary
  6. Working with Geo Data
    1. Elections 2016 choropleth
      1. Preparing data
        1. Getting the geometries from the US Census Bureau and exploring these in QGIS
        2. Converting the data to TopoJSON
        3. Getting the results per county
      2. Drawing the visualization
    2. Earthquake data on a flat map
      1. Getting the data
      2. Create the visualization
        1. Loading the data
        2. Rendering the map
        3. Rendering the earthquake circles
        4. Connect the html elements
        5. Fix clipping
    3. Rotating the world globe
      1. Getting and sanitize the data
      2. Render the visualization
        1. Render the globe on a HTML canvas
          1. Setting up the HTML page and the output elements
          2. Loading the data and drawing the map
          3. Handle the drag event
        2. Render the legend
    4. Summary
  7. Visualizing Streaming Data
    1. Simple streaming line
      1. Setting up scales
      2. Collecting mouse data
      3. Setting up the animations and the graphs
      4. Clip path and extra information
    2. Heart rate and respiratory monitoring
      1. Getting the sample data
      2. Setting up the WebSocket server
    3. Creating the visualization
      1. Scales, lines, and array initialization
      2. Loading the images and setting up the WebSocket connection
      3. Handling the update from the server
    4. Random data-driven streamgraph
      1. Random data WebSocket server
      2. Creating a streamgraph
        1. Setting up the scales and the generators
        2. Defining the data and the transition
    5. Visualizing Meetup.com RSVP data on a map
      1. Drawing the map
      2. Connecting to the Meetup WebSocket
      3. Showing the information on the map
    6. Summary
  8. Voronoi Diagrams and Heatmaps
    1. Simple Voronoi diagram
    2. Voronoi based on a list of airports
      1. Prepare the data
      2. Show the points on the map
      3. Create the geo Voronoi
    3. Generative art with nested Voronoi diagrams
      1. Set up the Voronoi
      2. Render the first layer
      3. Recursively creating Voronoi diagrams
    4. Heatmap showing swearword usage in movies
      1. Preparing the data
      2. Rendering the heatmap
        1. Create the heatmap
        2. Add the minutes information
        3. Provide the legend
    5. Summary
  9. Custom Shapes and Paths and Using a Brush Selection
    1. Symbols supported in D3
    2. Using d3.path to draw paths
      1. Drawing using the path API
      2. Animating along a line
    3. Exporting visualizations
      1. Exporting visualizations as PNG
        1. Custom export styles
        2. Converting the SVG element to a string
        3. Using the canvas to get a PNG file
        4. Saving the image
    4. Exporting visualizations as SVG and importing them in an external program
    5. Importing SVG from Inkscape and use in D3
    6. Using brushes to select elements
    7. Summary
  10. ES6, TypeScript, and External D3.js Libraries
    1. Using D3 with ES6 and TypeScript
      1. D3 and ES6
        1. Importing modules
        2. Arrow functions and method shorthand
        3. Block-scoped binding constructs (let + const)
        4. String interpolation
      2. D3 and TypeScript
        1. Using types in your editor
        2. Preventing errors with compile-time checking of types
        3. Handling complex type signatures
        4. Creating classes is easy
    2. External charting libraries
      1. Dimple.js
      2. MetricsGraphics.js
      3. C3
      4. nvd3
    3. Summary