import { MixBarChartChart } from './MixBarChart.js';
import { PieChartExample } from './PieChart.js';
import { Canvas, Meta, Story, Preview } from '@storybook/addon-docs/blocks';
//import Button from '../../components/Button';

<Meta
  title="Documentation/Guidelines/Data visualisation"
  subTitle="How to use the UI Kit"
  id="core-layout-mdx"
  parameters={{
    componentSubtitle: 'Guidelines',
    status: 'experimental',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

> Recommended library
>
> [Recharts](https://recharts.org/) is the recommended library for creating charts with react.js.

<br />
<br />

## Bar charts

<Canvas>
  <Story name="Bar chart" parameters={{ layout: 'centered' }}>
    <MixBarChartChart />
  </Story>
</Canvas>

A bar chart is used when you want to show a distribution of data points or perform a comparison of metric values across different subgroups of your data.
The primary variable of a bar chart is often a categorical variable.

In addition, some non-categorical variables can be converted into groups, like aggregating temporal data based on date (eg. dividing by quarter into `20XX-Q1`, `20XX-Q2`, `20XX-Q3`, `20XX-Q4`, etc.) The important point for this primary variable is that the groups are distinct.

In contrast, the secondary variable will be numeric in nature and determine the length of each bar.

- ✓ Use a common zero-valued baseline
- ✓ Maintain rectangular forms for your
- ✓ Use distinctive colours

Source: [bar chart guide on chartio.com](https://chartio.com/learn/charts/bar-chart-complete-guide)

## Pie charts

<Canvas>
  <Story name="Pie chart" parameters={{ layout: 'centered' }}>
    <PieChartExample />
  </Story>
</Canvas>

- ✓ The sections of the pie must contain the whole 100%
- ✓ Donut plots are prefered over regular pie charts

- ✗ Avoid using pie charts for charts with more then 5 sections

Source: [pie chart guide on chartio.com](https://chartio.com/learn/charts/pie-chart-complete-guide/)

## Nine questions to help you visualize your data

### 1. What questions does my visualization need to answer?

Before starting to work on a new data visualization, make sure you know why you’re doing it and remember: this is a process guided by data findings. Avoid cherry picking data to force a particular story.

#### Hints:

Use your questions to guide the analysis and once you have the answers, plan the narrative. You will be surprised by the number of patterns you had never expected to see.

### 2. What’s the hook? Why should people care about it?

Make your visualization impactful. Prioritize the main findings of your analysis and organize it as a story, making clear why those figures are important and their impact.

### 3. Who is your audience?

Think about your audience needs and level of knowledge. Someone in the field will need to access data in a totally different way to someone in an executive position. Always keep in mind who will be consuming your visualization and in which context.

#### Hints:

As general advice, avoid technical jargon and abbreviations. Also, include a test as a step in the development process and be open to feedback. Your audience may see something you didn’t or have useful insights on how to improve the visualization.

### 4. Where is your audience? Which medium are they using to consume the visualization?

Are they using a phone? A computer? A tablet? Printed media? A banner? Can they interact with the visualization (for instance, can they click to filter charts or see more info)?

#### Hints:

Your chart may be printed. If it is a possibility, remember that all actions (like the values that appear when hovering over or filters) won't be available, so make important values visible. Also, keep in mind that it will probably be printed in black and white, so test the colors to check if there is the necessary contrast when printed.

### 5. What are the best charts to use?

The type of data and the question to be answered should be used to define the best chart types. Line charts, for instance, are used to illustrate changes over time. Pie charts and bar charts, are great to compare categorical data. Scatter plots are good to display relationships between variables. For a more detailed guide on selecting chart types, click here.

#### Hints:

Beware of pie charts! They can be useful to show part-to-whole comparisons but sometimes proportions can be difficult to distinguish. Never use more than five “slices”, preferably limiting it to a maximum of three.
When using maps, check if there aren’t contested territories in the region. Avoid automatically generated maps when dealing with countries with contested borders and be sure to follow the latest WFP territorial guidelines. For further guidance on correct usage of maps please contact the GIS team at hq.gis@wfp.org

### 6. How to bring several charts together?

Avoid cluttering your visualizations with unnecessary metrics (or non-data ink) and superfluous elements such as grid lines or ornamentation. Create a visual hierarchy to make important data stand out and be easy to read. Choose wisely which charts should be used together and don’t try to use all at the same time. Most importantly: Keep it simple.

#### Hints:

Avoid 3D charts. They make it difficult for the eye to see comparisons or proportions, distorting the perception of the data.

### 7. Which fonts should I use?

Stick to the WFP corporate Open Sans font . It is a clean, contemporary font that makes it easier for the reader to scan the annotation. Be careful to not make the font too small (less than 8pt) and take advantage of sizes and bold to give hierarchy to the page.

#### Hints:

Pay attention to the colour contrast of the text against the background. A good rule of thumb is black text on a white background
Label your axes and put titles in your charts so they are easy to read.

### 8. Which colours should I use?

WFP has a [standard colour palette](?path=/docs/documentation-core-colours--page) that should be used. Limit the use of colour and ensure there is good contrast between the selected shades.

#### Hints:

Use different colours only when they correspond to different meanings, when highlighting or to represent variations in quantitative data.
Use a neutral or, preferably, white background.
Avoid a traffic light style colour palette. They can be difficult to read for people with color vision deficiency (CVD) - it is estimated that 8% of men and 0.5% of women have CVD.
Always use a legend when using colour.

### 9. When should I add text?

Despite being forgotten by many, text is also an important part of a good visualization. Pay attention to titles and legends and check if they help to understand the chart. Annotations can also be used to direct attention to key points. Make sure the text is clear and easy to read and is not truncated or overlapping.

### Related

[Visualization guideline](https://brand.manuals.wfp.org/en/data-visualization-guidance/)
