You are previewing Data Visualization: Representing Information on Modern Web.
O'Reilly logo
Data Visualization: Representing Information on Modern Web

Book Description

Unleash the power of data by creating interactive, engaging, and compelling visualizations for the web

About This Book
  • Get a portable, versatile, and flexible data visualization design approach that will help you navigate the complex path towards success

  • Get thorough explanation of the many visual variables and visualization taxonomy to provide you with a menu of creative options

  • A comprehensive and contemporary introduction to data-driven visualization design and the most effective approaches to designing impact-maximizing and cognition-amplifying visualizations

  • Who This Book Is For

    This course is for developers who are excited about data and who want to share that excitement with others and it will be handy for the web developers or data scientists who want to create interactive visualizations for the web.

    Prior knowledge of developing web applications is required. You should have a working knowledge of both JavaScript and HTML.

    What You Will Learn
  • Harness the power of D3 by building interactive and real-time data-driven web visualizations

  • Find out how to use JavaScript to create compelling visualizations of social data

  • Identify the purpose of your visualization and your project's parameters to determine overriding design considerations across your project's execution

  • Apply critical thinking to visualization design and get intimate with your dataset to identify its potential visual characteristics

  • Explore the various features of HTML5 to design creative visualizations

  • Discover what data is available on Stack Overflow, Facebook, Twitter, and Google+

  • Gain a solid understanding of the common D3 development idioms

  • Find out how to write basic D3 code for server using Node.js

  • In Detail

    Do you want to create more attractive charts? Or do you have huge data sets and need to unearth the key insights in a visual manner? Data visualization is the representation and presentation of data, using proven design techniques to bring alive the patterns, stories, and key insights that are locked away.

    This learning path is divided into three modules. The first module will equip you with the key techniques required to overcome contemporary data visualization challenges.

    After getting familiar with key concepts of data visualization, it's time to incorporate it with various technologies. In the second module, Social Data Visualization with HTML5 and JavaScript, it teaches you how to leverage HTML5 techniques through JavaScript to build visualizations. It also clears up how the often complicated OAuth protocol works to help you unlock a universe of social media data from sites such as Twitter, Facebook, and Google+.

    Once you are familiar with the concepts of incorporating data visualization with HTML5 and JavaScript, third module, Learning d3.js Data Visualization, will lead you to D3, which has emerged as one of the leading platforms to develop beautiful, interactive visualizations over the web. This module provides a strong foundation in designing compelling web visualizations with D3.js.

    By the end of this course, you will have unlocked the mystery behind successful data visualizations.

    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:

  • Data Visualization: a successful design process by Andy Kirk

  • Social Data Visualization with HTML5 and JavaScript by Simon Timms

  • Learning d3.js Data Visualization, Second Edition by Ændrew Rininsland and Swizec Teller

  • Style and approach

    This course includes all the resources that will help you jump into creating interactive and engaging visualizations for the web. Through this comprehensive course, you’ll learn how to create engaging visualizations for the web to represent your data from start to finish!

    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 If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Data Visualization: Representing Information on Modern Web
      1. Table of Contents
      2. Data Visualization: Representing Information on Modern Web
      3. Data Visualization: Representing Information on Modern Web
      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. The Context of Data Visualization
          1. Exploiting the digital age
          2. Visualization as a discovery tool
          3. The bedrock of visualization knowledge
          4. Defining data visualization
          5. Visualization skills for the masses
          6. The data visualization methodology
          7. Visualization design objectives
            1. Strive for form and function
            2. Justifying the selection of everything we do
            3. Creating accessibility through intuitive design
            4. Never deceive the receiver
          8. Summary
        2. 2. Setting the Purpose and Identifying Key Factors
          1. Clarifying the purpose of your project
            1. The reason for existing
            2. The intended effect
          2. Establishing intent – the visualization's function
            1. When the function is to explain
            2. When the function is to explore
            3. When the function is to exhibit data
          3. Establishing intent – the visualization's tone
            1. Pragmatic and analytical
            2. Emotive and abstract
          4. Key factors surrounding a visualization project
          5. The "eight hats" of data visualization design
            1. The initiator
            2. The data scientist
            3. The journalist
            4. The computer scientist
            5. The designer
            6. The cognitive scientist
            7. The communicator
            8. The project manager
          6. Summary
        3. 3. Demonstrating Editorial Focus and Learning About Your Data
          1. The importance of editorial focus
          2. Preparing and familiarizing yourself with your data
          3. Refining your editorial focus
          4. Using visual analysis to find stories
          5. An example of finding and telling stories
          6. Summary
        4. 4. Conceiving and Reasoning Visualization Design Options
          1. Data visualization design is all about choices
          2. Some helpful tips
          3. The visualization anatomy – data representation
            1. Choosing the correct visualization method
            2. Considering the physical properties of our data
            3. Determining the degree of accuracy in interpretation
            4. Creating an appropriate design metaphor
            5. Choosing the final solution
          4. The visualization anatomy – data presentation
            1. The use of color
              1. To represent data
              2. To bring the data layer to the fore
              3. To conform to design requirements
          5. Creating interactivity
          6. Annotation
          7. Arrangement
          8. Summary
        5. 5. Taxonomy of Data Visualization Methods
          1. Data visualization methods
          2. Choosing the appropriate chart type
            1. Comparing categories
              1. Dot plot
              2. Bar chart (or column chart)
              3. Floating bar (or Gantt chart)
              4. Pixelated bar chart
              5. Histogram
              6. Slopegraph (or bumps chart or table chart)
              7. Radial chart
              8. Glyph chart
              9. Sankey diagram
              10. Area size chart
              11. Small multiples (or trellis chart)
              12. Word cloud
            2. Assessing hierarchies and part-to-whole relationships
              1. Pie chart
              2. Stacked bar chart (or stacked column chart)
              3. Square pie (or unit chart or waffle chart)
              4. Tree map
              5. Circle packing diagram
              6. Bubble hierarchy
              7. Tree hierarchy
            3. Showing changes over time
              1. Line chart
              2. Sparklines
              3. Area chart
              4. Horizon chart
              5. Stacked area chart
              6. Stream graph
              7. Candlestick chart (or box and whiskers plot, OHLC chart)
              8. Barcode chart
              9. Flow map
            4. Plotting connections and relationships
              1. Scatter plot
              2. Bubble plot
              3. Scatter plot matrix
              4. Heatmap (or matrix chart)
              5. Parallel sets (or parallel coordinates)
              6. Radial network (or chord diagram)
              7. Network diagram (or force-directed/node-link network)
            5. Mapping geo-spatial data
              1. Choropleth map
              2. Dot plot map
              3. Bubble plot map
              4. Isarithmic map (or contour map or topological map)
              5. Particle flow map
              6. Cartogram
              7. Dorling cartogram
              8. Network connection map
          3. Summary
        6. 6. Constructing and Evaluating Your Design Solution
          1. For constructing visualizations, technology matters
            1. Visualization software, applications, and programs
            2. Charting and statistical analysis tools
            3. Programming environments
            4. Tools for mapping
              1. Other specialist tools
          2. The construction process
          3. Approaching the finishing line
          4. Post-launch evaluation
          5. Developing your capabilities
            1. Practice, practice, practice!
            2. Evaluating the work of others
            3. Publishing and sharing your output
            4. Immerse yourself into learning about the field
          6. Summary
      7. 2. Module 2
        1. 1. Visualizing Data
          1. There's a lot of data out there
          2. Getting excited about data
            1. Data beyond Excel
            2. Social media data
              1. Why should I care?
          3. HTML visualizations
          4. Summary
        2. 2. JavaScript and HTML5 for Visualizations
          1. Canvas
          2. Scalable Vector Graphics
            1. Which one to use?
          3. Summary
        3. 3. OAuth
          1. Authentication versus authorization
          2. The OAuth protocol
            1. OAuth versions
          3. Summary
        4. 4. JavaScript for Visualization
          1. Raphaël
          2. d3.js
            1. Custom color scales
            2. Labels and axes
          3. Summary
        5. 5. Twitter
          1. Getting access to the APIs
          2. Setting up a server
          3. OAuth
          4. Visualization
            1. Server side
            2. Client side
          5. Summary
        6. 6. Stack Overflow
          1. Authenticating
          2. Creating a visualization
          3. Filters
          4. Summary
        7. 7. Facebook
          1. Creating an app
          2. Using the API
          3. Retrieving data
          4. Visualizing
          5. Summary
        8. 8. Google+
          1. Creating an app
          2. Retrieving data
          3. Visualization
          4. Summary
      8. 3. Module 3
        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
      9. A. Bibliography
      10. Index