# Data Visualization Workshop

## Sections:

- What is Data Visualization
- Types of Visual Diagrams
- D3 API Docs
- List of D3 Modules
- Selections, Data, and Demo
- Enter and Append
- SVG
- Scales and Axis
- First Challenge
- Shapes
- Second Challenge
- Enter and Update
- Exit and Merge
- Transitions
- Third Challenge
- Force Layout
- D3 and Vuejs
- Data Visualization Best Practices
- General Data Visualization Resources
- Data Visualization Experts and Companies
- GitBook Link

## What is Data Visualization

- Data visualization is the presentation of data in a pictorial or graphical format.
- It enables decision makers to see analytics presented visually
- Decision makers can then grasp difficult concepts or identify new patterns.
- With interactive visualization, you can take concepts further and teach concepts better.
- You can drill down into charts and graphs for more detail,
- and interactively change what data you see and how it’s processed.

## Types of Visual Diagrams

A diagram is a symbolic representation of information according to some visualization technique.

### Bar Charts

- A bar chart or bar graph is a chart or graph that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
- The bars can be plotted vertically or horizontally.
- A vertical bar chart is sometimes called a line graph.

### Line Charts

- A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.
- It is a basic type of chart common in many fields.
- It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments.
- A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically.

## Scatter Plots

- A scatter plot (also called a scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data.
- If the points are color-coded, one additional variable can be displayed.
- The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis

## D3 API Docs

D3 4.0 is a collection of modules that are designed to work together

- You can use the modules independently, or you can use them together as part of the default build.
- The source and documentation for each module is available in its repository.

Follow the links below to learn more:

- Introduction
- API Reference
- Release Notes
- Gallery
- Examples
- Tutorials
- Plugins
- d3.js on Stack Overflow
- d3-js Google Group
- d3-js Slack Channel (Invite)
- d3-js Gitter Channel
- d3-js IRC Channel => #d3.js on irc.freenode.net

## List of D3 Modules

#### Data space

query

- d3-request
- d3-queue

generation

- d3-random

parsing

- d3-dsv
- d3-time

formatting

- d3-time-format
- d3-format

manipulation

- d3-array
- d3-collection

#### Graphic space

data transform

- d3-scale
- d3-geo-projection

geometry computation

- d3-voronoi
- d3-hull
- d3-quadtree
- d3-interpolate
- d3-geo

dynamic geometry computation

- d3-transition
- d3-timer
- d3-ease

visual variables mapping

- d3-hierarchy
- d3-sankey
- d3-chord
- d3-hexbin
- d3-force

generation

- d3-shape
- d3-path
- d3-polygon

converter

- d3-color

#### View space

visual variables mapping (selection, data-binding, attributes)

- d3-selection
- d3-selection-multi

high level set of visual variables mapping (component)

- d3-axis

#### Interaction space

internal events

- d3-dispatch

user events and geometry computation

- d3-zoom
- d3-brush
- d3-drag

## Data Visualization Best Practices

There is a wonderful illustration in this Tableau White Paper on Data Visualization Best Practices

## General Data Visualization Resources

**Dashing D3js****Visualizing Data**- a fantastic blog about data visualization.**Flowing Data**- another data visualization blog.**Information Aesthetics**- Another good blog.**Shirley Wu**- Excellent blog on Data Visualization.

### Data Visualization Experts and Companies

**Jer Thorp**- Data artist.**Nicolas Feltron**- Data artist.**Stamen**- Data visualization company, excellent blog, heavy focus on maps.**Fathom**- Another interesting data visualization company.