UNHCR Dataviz Platform

Bar chart

A bar chart is a chart in which each category is represented by a horizontal rectangle, with the length of the rectangle proportional to the values being plotted. The horizontal axis shows data value, and the vertical axis displays the categories being compared.

More about: Bar chart - Other tutorials: R Matplotlib D3

Basic bar chart

import pandas as pd
import plotly.graph_objects as go
import unhcrplotlystyle

# Load dataset
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar.csv')

# Sort values in descending order
df.sort_values('displaced_number', ascending=True, inplace=True)

# Create the bar chart using go.Figure
fig = go.Figure(
    data=[go.Bar(
        x=df['displaced_number'],  
        y=df['country_origin'],    
        orientation='h',
        hovertemplate="<b>Country:</b> %{y}<br><b>Number of people:</b> %{x:,.0f}<extra></extra>"      
    )]
)

# Update layout
fig.update_layout(
    title='People displaced across borders by country of origin | 2020',
    template="unhcr_style",  # Use the custom template
    xaxis_title='Number of people',  # X-axis title
    yaxis_title='',                
    showlegend=False
                  
)

# Show the figure
fig.show()

Bar chart with data label


import pandas as pd
import plotly.graph_objects as go
import unhcrplotlystyle

# Load dataset
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar.csv')

# Sort values in descending order
df.sort_values('displaced_number', ascending=True, inplace=True)

# Create the bar chart using go.Figure
fig = go.Figure(
    data=[go.Bar(
        x=df['displaced_number'],  
        y=df['country_origin'], 
        texttemplate='%{x:.2s}',
        textposition="outside",  
        orientation='h',
        hovertemplate="<b>Country:</b> %{y}<br><b>Number of people:</b> %{x:,.0f}<extra></extra>"     
    )]
)

# Update layout
fig.update_layout(
    title='People displaced across borders by country of origin | 2020',
    template="unhcr_style",  # Use the custom template
    yaxis_title='',                
    showlegend=False,
    xaxis_showticklabels=False, 
    xaxis_showgrid=False,
                  
)

# Show the figure
fig.show()

Column chart chart

In a column chart, each category is represented by a vertical rectangle, with the height of the rectangle being proportional to the values being plotted.

More about: Column chart - Other tutorials: R Matplotlib D3

Basic column chart


import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle  # Import your template here

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column.csv')

# Create figure using go.Figure
fig = go.Figure()

# Add a bar trace
fig.add_trace(go.Bar(
    x=df['year'],
    y=df['displaced_number'],
    hovertemplate="<b>Year:</b> %{x}<br><b>Number of IDP:</b> %{y:,.0f}<extra></extra>"
))

# Update layout
fig.update_layout(
    title='Global IDP displacement | 2010 - 2020',
    template='unhcr_style',
    xaxis_title='',
    showlegend=False,
    yaxis_title='Displaced number',
    xaxis=dict(
        tickmode='linear'    
    )
)

# Show the figure
fig.show()

Column chart with data label

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column.csv')

# Create figure using go.Figure
fig = go.Figure()

# Add a bar trace
fig.add_trace(go.Bar(
    x=df['year'],
    y=df['displaced_number'],
    hovertemplate="<b>Year:</b> %{x}<br><b>Number of IDP:</b> %{y:,.0f}<extra></extra>"
))

# Update layout
fig.update_layout(
    title='Global IDP displacement | 2010 - 2020',
    template='unhcr_style',
    xaxis_title='',
    showlegend=False,
    yaxis_title='Displaced number',
    xaxis=dict(
        tickmode='linear'    
    )
)

# Show the figure
fig.show()

Grouped bar chart

Grouped bar charts are a type of colour-coded bar chart that is used to represent and compare different categories of two or more groups.

More about: Grouped bar chart - Other tutorials: R Matplotlib D3

Basic grouped bar chart

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle
from textwrap import wrap

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar_grouped.csv')

# Convert year data to string
df['year'] = df['year'].astype(str)

# Wrap long y-axis tick labels
labels = df['region']
max_label_length = 20
region_wrapped = [label if len(label) <= max_label_length else '<br>'.join(wrap(label, max_label_length)) for label in labels]

# Create figure using go.Figure
fig = go.Figure()

# Add a bar trace for each unique year
for year in df['year'].unique():
    year_data = df[df['year'] == year]
    fig.add_trace(go.Bar(
        x=year_data['asylum_application'],
        y=year_data['region'],
        name=year,
        orientation='h',
        text=year_data['asylum_application'],
        texttemplate='%{x:.2s}',
        hovertemplate="<b>Region:</b> %{y}<br><b>Asylum Applications:</b> %{x:,.0f}<br><b>Year:</b> " + year + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='Individual asylum applications registered by region | 2019-2020',
    template='unhcr_style',
    barmode='group',
    legend_title_text='',
    xaxis_title='',
    yaxis_title='',
    yaxis_ticklen=5,
    yaxis_ticktext=region_wrapped,
    yaxis_tickvals=df['region'],
)

fig.show()

Grouped bar chart with data label

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle
from textwrap import wrap

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar_grouped.csv')

# Convert year data to string
df['year'] = df['year'].astype(str)

# Wrap long y-axis tick labels
labels = df['region']
max_label_length = 20
region_wrapped = [label if len(label) <= max_label_length else '<br>'.join(wrap(label, max_label_length)) for label in labels]

# Create figure using go.Figure
fig = go.Figure()

# Add a bar trace for each unique year
for year in df['year'].unique():
    year_data = df[df['year'] == year]
    fig.add_trace(go.Bar(
        x=year_data['asylum_application'],
        y=year_data['region'],
        name=year,
        orientation='h',
        text=year_data['asylum_application'],
        textposition="outside", 
        texttemplate='%{x:.2s}',
        hovertemplate="<b>Region:</b> %{y}<br><b>Asylum Applications:</b> %{x:,.0f}<br><b>Year:</b> " + year + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='Individual asylum applications registered by region | 2019-2020',
    template='unhcr_style',
    barmode='group',
    legend_title_text='',
    xaxis_title='',
    yaxis_title='',
    xaxis_showticklabels=False, 
    xaxis_showgrid=False,   
    yaxis_ticklen=5,
    yaxis_ticktext=region_wrapped,
    yaxis_tickvals=df['region'],
)

fig.show()

Grouped column chart

Grouped column charts are a type of colour-coded column chart used to represent and compare different categories of two or more groups.

More about: Grouped column chart - Other tutorials: R Matplotlib D3

Basic grouped column chart

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column_grouped.csv')

# Define the order of the categories in the legend
category_order = ['East and Horn of Africa and Great Lakes', 'Southern Africa', 'West and Central Africa']

# Create figure
fig = go.Figure()

# Add a bar trace for each region
for region in category_order:
    region_data = df[df['main_office'] == region]
    fig.add_trace(go.Bar(
        name=region,
        x=region_data['year'],
        y=region_data['refugee_number'],
        hovertemplate="<b>Year:</b> %{x}<br><b>Refugees:</b> %{y:,.0f}<br><b>Region:</b> " + region + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='Refugee numbers by main office and year',
    barmode='group',
    template='unhcr_style',
    legend_title_text='',
    xaxis_title='',
)

fig.show()

Grouped column chart with data label

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

# Load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column_grouped.csv')

# Define the order of the categories in the legend
category_order = ['East and Horn of Africa and Great Lakes', 'Southern Africa', 'West and Central Africa']

# Create figure
fig = go.Figure()

# Add a bar trace for each region
for region in category_order:
    region_data = df[df['main_office'] == region]
    fig.add_trace(go.Bar(
        name=region,
        x=region_data['year'],
        y=region_data['refugee_number'],
        text=region_data['refugee_number'],
        textposition="outside", 
        hovertemplate="<b>Year:</b> %{x}<br><b>Refugees:</b> %{y:,.0f}<br><b>Region:</b> " + region + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='Refugee numbers by main office and year',
    barmode='group',
    template='unhcr_style',
    legend_title_text='',
    xaxis_title='',
    yaxis_showticklabels=False,
    yaxis_showgrid=False
)

fig.show()

Stacked bar chart

Stacked bar charts stack horizontal bars that represent different groups one after another. The length of the stacked bar shows the combined value of the groups. They show the cumulative values of data items and compare parts to the whole.

More about: Stacked bar chart - Other tutorials: R Matplotlib D3

Basic stacked bar chart

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

# Load the dataset
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar_stacked.csv')

# Calculate the total population for each country
df['total_population'] = df.groupby('country_origin')['population_number'].transform('sum')

# Sort the DataFrame by total population in ascending order
df = df.sort_values(by='total_population', ascending=True)

# Update the legend names and groups in the DataFrame
legend_mapping = {"REF": "Refugee", "ASY": "Asylum-seekers", "VDA": "Venezuelans displaced abroad"}
df['population_type'] = df['population_type'].replace(legend_mapping)

# Create figure using go.Figure()
fig = go.Figure()

# Loop through each population type and add a trace
for pop_type in df['population_type'].unique():
    pop_data = df[df['population_type'] == pop_type]
    fig.add_trace(go.Bar(
        y=pop_data['country_origin'],
        x=pop_data['population_number'],
        name=pop_type,
        orientation='h',
        hovertemplate="<b>Country:</b> %{y}<br><b>Number of people:</b> %{x:,.0f}<br><b>Population type:</b> " + pop_type + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='People displaced across borders by country of origin | 2021',
    xaxis_title='Number of people',
    yaxis_title='',
    legend_title_text='',
    template="unhcr_style",
    barmode='stack'
)

fig.show()

Stacked bar chart with data label

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

# Load the dataset
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/bar_stacked.csv')

# Calculate the total population for each country
df['total_population'] = df.groupby('country_origin')['population_number'].transform('sum')

# Sort the DataFrame by total population in ascending order
df = df.sort_values(by='total_population', ascending=True)

# Update the legend names and groups in the DataFrame
legend_mapping = {"REF": "Refugee", "ASY": "Asylum-seekers", "VDA": "Venezuelans displaced abroad"}
df['population_type'] = df['population_type'].replace(legend_mapping)

# Create figure using go.Figure()
fig = go.Figure()

# Loop through each population type and add a trace
for pop_type in df['population_type'].unique():
    pop_data = df[df['population_type'] == pop_type]
    fig.add_trace(go.Bar(
        y=pop_data['country_origin'],
        x=pop_data['population_number'],
        name=pop_type,
        orientation='h',
        textposition="inside",
        insidetextanchor="middle",
        texttemplate='%{x:.2s}',
        hovertemplate="<b>Country:</b> %{y}<br><b>Number of people:</b> %{x:,.0f}<br><b>Population type:</b> " + pop_type + "<extra></extra>"
    ))

# Update layout
fig.update_layout(
    title='People displaced across borders by country of origin | 2021',
    yaxis_title='',
    legend_title_text='',
    template="unhcr_style",
    barmode='stack',
    xaxis_showticklabels=False, 
    xaxis_showgrid=False
)

fig.show()

Stacked column chart

The stacked column chart stacks vertical bars that represent different groups on top of each other. The height of the stacked bar shows the combined value of the groups. They show the cumulative values of a data item and compare parts to the whole.

More about: Stacked column chart - Other tutorials: R Matplotlib D3

Basic stacked column chart

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

#load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column_stacked.csv')

fig = go.Figure()

for resettlement in df['rst_type'].unique():
    rst_data = df[df['rst_type'] == resettlement]
    fig.add_trace(go.Bar(
        x=rst_data['year'], 
        y=rst_data['rst_in_thousand'],
        name=resettlement,
        hovertemplate="<b>Year:</b> %{x}<br><b>Number of resettlement:</b> %{y:,.0f}<br><b>" + resettlement + "</b><extra></extra>"
    ))            

# Update axis titles and tick labels
fig.update_layout(
    title='Resettlement by UNHCR and others | 2010-2020', 
    xaxis_title='', 
    yaxis_title='Number of people (thousands)',
    legend_title_text='',
    xaxis=dict(tickmode='linear'),
    template='unhcr_style',
    barmode='stack',
)

fig.show()

Stacked column chart with data label

import plotly.graph_objects as go
import pandas as pd
import unhcrplotlystyle

#load data set
df = pd.read_csv('https://raw.githubusercontent.com/GDS-ODSSS/unhcr-dataviz-platform/master/data/comparison/column_stacked.csv')

fig = go.Figure()

for resettlement in df['rst_type'].unique():
    rst_data = df[df['rst_type'] == resettlement]
    fig.add_trace(go.Bar(
        x=rst_data['year'], 
        y=rst_data['rst_in_thousand'],
        name=resettlement,
        textposition="inside",
        insidetextanchor="middle",
        hovertemplate="<b>Year:</b> %{x}<br><b>Number of resettlement:</b> %{y:,.0f}<br><b>" + resettlement + "</b><extra></extra>"
    ))            

# Update axis titles and tick labels
fig.update_layout(
    title='Resettlement by UNHCR and others | 2010-2020', 
    xaxis_title='', 
    legend_title_text='',
    template='unhcr_style',
    barmode='stack',
    xaxis=dict(tickmode='linear'),
    yaxis_showticklabels=False,
    yaxis_showgrid=False
)

fig.show()