{{< partial "learn_x_header" >}}

## The Basics

Learn Data Visualization for fun and profit! Data is only helpful with a way to visualize it. We're dealing with an assault on our senses with the sheer amount of data coming our way. In the Information Age, your ability to present compelling data is an asset.

Data Visualization is often an art form, but we'll review standard options.

### Primary Use Cases

Why would you want to visualize data?

- To show your pointy-haired boss the quarterly results
- To be data-driven
- Sell an idea

## Know Your Audience

A succinct Venn diagram will quickly convey meaning but won't tell a lengthy story.

_Ask yourself these questions before building your visualizations._

1. Do I _need_ to visualize my data?
2. What value does my visualization add?

_If you're not sure, ask your audience. If you can't answer the previous questions after a chat, drop the task!_

_Otherwise, carry on and ask your audience more questions._

3. What's the simplest way to tell my story?
4. Who's my audience?
5. What does my audience need to know?
6. How far does my audience want to go down the rabbit hole?
7. Do I understand the source data?

Before creating data visualizations, interview your audience to learn which stories they want to hear.

## Know Your Goals

Are you convincing your stakeholders to invest in performance improvements? Are you trying to visualize sales information?

Mindfulness of your goal is essential.

Define key performance indicators to increase visualization impact. If you're convincing investors, one of your KPIs may be a signed check.

## Choose Your Weapon

Many visualization widgets exist, but we can tell most stories with basic charts.

Here are five of the most common widgets.

### Bar Chart

A [bar chart] or bar graph presents categorical data with adjustable rectangular bars proportional to numeric values.

Plot bars vertically or horizontally.

A vertical bar chart is sometimes called a column chart.

**Example**

{{< figure src="images/total-sales-barchart.png" alt="Bar Chart" >}}

```html
<div id="chart_bar_div"></div>
<script type="text/javascript">
  google.charts.load("current", { packages: ["corechart", "bar"] });
  google.charts.setOnLoadCallback(drawBasic);
  function drawBasic() {
    var data = google.visualization.arrayToDataTable([
      ["Office", "Sales"],
      ["Office 2", 8175000],
      ["Office 3", 3792000],
      ["Office 1", 2695000],
    ]);
    var options = {
      title: "Total Sales by Office",
      vAxis: {
        title: "2020",
      },
      hAxis: {
        format: "$#,###,###",
      },
    };
    var chart = new google.visualization.BarChart(
      document.getElementById("chart_bar_div"),
    );
    chart.draw(data, options);
  }
</script>
```

### Line Chart

A [line chart], line plot, line graph, or curve chart displays information as a series of data points called 'markers' connected by straight line segments.

{{< figure src="images/line-chart.png" alt="Line Chart" >}}

### Flow Chart

A flowchart is the superset of an org chart, a standard flowchart. A flowchart represents a workflow or process. A flowchart can be a diagrammatic representation of an algorithm, a step-by-step approach to solving a task.

{{< figure src="images/flow-chart.png" alt="Flow Chart" >}}

### Pie Chart

A [pie chart] — or a circle chart, is a circular statistical graphic divided into slices to illustrate numerical proportions.

{{< figure src="images/pie-chart.png" alt="Pie Chart" >}}

### Area Chart

An [area chart] or area graph displays quantitative data. It's derived from the line chart. The colors, textures, and hatchings between the axis and line provide emphasis.

Compare two or more quantities with an area chart.

{{< figure src="images/area-chart.png" alt="Area Chart" >}}

## Color Your Theory

Use [color theory]({{< ref "learn-color-theory" >}} "Color Theory") to pick an appropriate color scheme.

Try using [a color palette generator] to explore color theory.

{{< youtube "_2LLXnUdUIc" >}}

## Learn Data Visualization - Beyond the Basics

**Videos**

- [Data Visualization: Best Practices - LinkedIn]
- [Data Visualization: Best Practices - Pluralsight]
- [Communicating With Data - Udemy]
- [Telling Stories with Data - Udemy]
- [Color Theory Fundamentals - Pluralsight]

**Books**

- [Stories That Stick - Amazon]
- [Effective Data Storytelling - Amazon]
- [Killer Visual Strategies - Amazon]
- [Effective Data Visualization - Amazon]
- [Design Elements, Color Fundamentals - Amazon]

## References

- [The Data Visualization Catalogue - Inspiration]

{{< partial "category_footer" >}}

[bar chart]: https://en.wikipedia.org/wiki/Bar_chart
[line chart]: https://en.wikipedia.org/wiki/Line_chart
[pie chart]: https://en.wikipedia.org/wiki/Pie_chart
[area chart]: https://en.wikipedia.org/wiki/Area_chart
[a color palette generator]: https://learnui.design/tools/data-color-picker.html
[data visualization: best practices - linkedin]: https://www.linkedin.com/learning/data-visualization-best-practices
[data visualization: best practices - pluralsight]: https://www.pluralsight.com/courses/data-visualization-best-practices
[communicating with data - udemy]: https://www.udemy.com/course/communicating-with-data/
[telling stories with data - udemy]: https://www.linkedin.com/learning/telling-stories-with-data/introduction-data-tells-a-great-story
[color theory fundamentals - pluralsight]: https://www.pluralsight.com/courses/color-theory-fundamentals
[stories that stick - amazon]: https://www.amazon.com/Stories-That-Stick-Storytelling-Captivate-ebook/dp/B07KF2328Z/ref=sr_1_1
[effective data storytelling - amazon]: https://www.amazon.com/Effective-Data-Storytelling-Narrative-Visuals-ebook/dp/B082MV8MZ3/ref=sr_1_2
[killer visual strategies - amazon]: https://www.amazon.com/Killer-Visual-Strategies-Comprehension-Communication-ebook/dp/B089Y8JSTT/ref=sr_1_4
[effective data visualization - amazon]: https://www.amazon.com/Effective-Data-Visualization-Right-Chart/dp/1544350880/ref=sr_1_5?dchild=1&keywords=charts+and+graphs&qid=1602927406&sr=8-5
[design elements, color fundamentals - amazon]: https://www.amazon.com/Design-Elements-Color-Fundamentals-Understanding/dp/1592537197/ref=sr_1_2?dchild=1&keywords=color+fundamentals&qid=1602927826&sr=8-2
[the data visualization catalogue - inspiration]: https://datavizcatalogue.com/about.html