Data Visualization: Representing Information on Modern Web电子书

Data Visualization: Representing Information on Modern Web

Table of Contents

Data Visualization: Representing Information on Modern Web

Data Visualization: Representing Information on Modern Web

Credits

Preface

What this learning path covers

What you need for this learning path

Who this learning path is for

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Module 1

1. The Context of Data Visualization

Exploiting the digital age

Visualization as a discovery tool

The bedrock of visualization knowledge

Defining data visualization

Visualization skills for the masses

The data visualization methodology

Visualization design objectives

Strive for form and function

Justifying the selection of everything we do

Creating accessibility through intuitive design

Never deceive the receiver

Summary

2. Setting the Purpose and Identifying Key Factors

Clarifying the purpose of your project

The reason for existing

The intended effect

Establishing intent – the visualization's function

When the function is to explain

When the function is to explore

When the function is to exhibit data

Establishing intent – the visualization's tone

Pragmatic and analytical

Emotive and abstract

Key factors surrounding a visualization project

The "eight hats" of data visualization design

The initiator

The data scientist

The journalist

The computer scientist

The designer

The cognitive scientist

The communicator

The project manager

Summary

3. Demonstrating Editorial Focus and Learning About Your Data

The importance of editorial focus

Preparing and familiarizing yourself with your data

Refining your editorial focus

Using visual analysis to find stories

An example of finding and telling stories

Summary

4. Conceiving and Reasoning Visualization Design Options

Data visualization design is all about choices

Some helpful tips

The visualization anatomy – data representation

Choosing the correct visualization method

Considering the physical properties of our data

Determining the degree of accuracy in interpretation

Creating an appropriate design metaphor

Choosing the final solution

The visualization anatomy – data presentation

The use of color

To represent data

To bring the data layer to the fore

To conform to design requirements

Creating interactivity

Annotation

Arrangement

Summary

5. Taxonomy of Data Visualization Methods

Data visualization methods

Choosing the appropriate chart type

Comparing categories

Dot plot

Bar chart (or column chart)

Floating bar (or Gantt chart)

Pixelated bar chart

Histogram

Slopegraph (or bumps chart or table chart)

Radial chart

Glyph chart

Sankey diagram

Area size chart

Small multiples (or trellis chart)

Word cloud

Assessing hierarchies and part-to-whole relationships

Pie chart

Stacked bar chart (or stacked column chart)

Square pie (or unit chart or waffle chart)

Tree map

Circle packing diagram

Bubble hierarchy

Tree hierarchy

Showing changes over time

Line chart

Sparklines

Area chart

Horizon chart

Stacked area chart

Stream graph

Candlestick chart (or box and whiskers plot, OHLC chart)

Barcode chart

Flow map

Plotting connections and relationships

Scatter plot

Bubble plot

Scatter plot matrix

Heatmap (or matrix chart)

Parallel sets (or parallel coordinates)

Radial network (or chord diagram)

Network diagram (or force-directed/node-link network)

Mapping geo-spatial data

Choropleth map

Dot plot map

Bubble plot map

Isarithmic map (or contour map or topological map)

Particle flow map

Cartogram

Dorling cartogram

Network connection map

Summary

6. Constructing and Evaluating Your Design Solution

For constructing visualizations, technology matters

Visualization software, applications, and programs

Charting and statistical analysis tools

Programming environments

Tools for mapping

Other specialist tools

The construction process

Approaching the finishing line

Post-launch evaluation

Developing your capabilities

Practice, practice, practice!

Evaluating the work of others

Publishing and sharing your output

Immerse yourself into learning about the field

Summary

2. Module 2

1. Visualizing Data

There's a lot of data out there

Getting excited about data

Data beyond Excel

Social media data

Why should I care?

HTML visualizations

Summary

2. JavaScript and HTML5 for Visualizations

Canvas

Scalable Vector Graphics

Which one to use?

Summary

3. OAuth

Authentication versus authorization

The OAuth protocol

OAuth versions

Summary

4. JavaScript for Visualization

Raphaël

d3.js

Custom color scales

Labels and axes

Summary

5. Twitter

Getting access to the APIs

Setting up a server

OAuth

Visualization

Server side

Client side

Summary

6. Stack Overflow

Authenticating

Creating a visualization

Filters

Summary

7. Facebook

Creating an app

Using the API

Retrieving data

Visualizing

Summary

8. Google+

Creating an app

Retrieving data

Visualization

Summary

3. Module 3

1. Getting Started with D3, ES2016, and Node.js

What is D3.js?

What's ES2016?

Getting started with Node and Git on the command line

A quick Chrome Developer Tools primer

The obligatory bar chart example

Summary

2. A Primer on DOM, SVG, and CSS

DOM

Manipulating the DOM with D3

Selections

Let's make a table!

What exactly did we do here?

Selections example

Manipulating content

Joining data to selections

An HTML visualization example

Scalable Vector Graphics

Drawing with SVG

Manually adding elements and shapes

Text

Shapes

Transformations

Using paths

Line

Area

Arc

Symbol

Chord

Diagonal

Axes

CSS

Colors

Summary

3. Making Data Useful

Thinking about data functionally

Built-in array functions

Data functions of D3

Loading data

The core

Convenience functions

Scales

Ordinal scales

Quantitative scales

Continuous range scales

Discrete range scales

Time

Formatting

Time arithmetic

Geography

Getting geodata

Drawing geographically

Using geography as a base

Summary

4. Defining the User Experience – Animation and Interaction

Animation

Animation with transitions

Interpolators

Easing

Timers

Animation with CSS transitions

Interacting with the user

Basic interaction

Behaviors

Drag

Zoom

Brushes

Summary

5. Layouts – D3's Black Magic

What are layouts and why should you care?

Built-in layouts

The dataset

Normal layouts

Using the histogram layout

Baking a fresh 'n' delicious pie chart

Labeling your pie chart

Showing popularity through time with stack

Adding tooltips to our streamgraph

Highlighting connections with chord

Drawing with force

Hierarchical layouts

Drawing a tree

Showing clusters

Partitioning a pie

Packing it in

Subdividing with treemap

Summary

6. D3 on the Server with Node.js

Readying the environment

All aboard the Express train to Server Town!

Proximity detection and the Voronoi geom

Rendering in Canvas on the server

Deploying to Heroku

Summary

7. Designing Good Data Visualizations

Clarity, honesty, and sense of purpose

Helping your audience understand scale

Using color effectively

Understanding your audience (or "trying not to forget about mobile")

Some principles for designing for mobile and desktop

Columns are for desktops, rows are for mobile

Be sparing with animations on mobile

Realize similar UI elements react differently between platforms

Avoid "mystery meat" navigation

Be wary of the scroll

Summary

8. Having Confidence in Your Visualizations

Linting all the things

Static type checking with TypeScript and Flow

The new kid on the block – Facebook Flow

TypeScript – the current heavyweight champion

Behavior-driven development with Karma and Mocha Chai

Setting up your project with Mocha and Karma

Testing behaviors first – BDD with Mocha

Summary

A. Bibliography

Index