Data Visualization: Representing Information on Modern Web

Andy Kirk, Simon Timms, ndrew Rininsland, Swizec Teller

• Publisher: Packt Publishing
• Year: 2016
• ISBN:
  9781787129764
• Edition: 1
• Topic: Computer Science
• Subtopic: Computer Graphics
• Index: Computer Science

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 ?drew 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!

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 differ...