Data Visualization: Representing Information on Modern Web

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