Visualize Global Water Access Disparities with Blazor Bubble Charts

Welcome to our Weekly Data Visualization blog series!

Ever wondered why some countries have safe, reliable water access while others face ongoing crises? Understanding these disparities is crucial; visualizing the data can make all the difference. With Syncfusion’s Blazor Bubble Chart, you can create powerful, interactive visualizations that reveal global water access patterns at a glance.

In this blog, I’ll show you how to gather data from the SDG 6 data portal, define a WaterAccessData class, and configure the SfChart component to build a bubble chart that maps population size and water access levels for impactful insights.

Globally, water resources are often managed safely through dams, reservoirs, and other methods. However, some water sources remain unmanaged, contributing to ongoing water crises. Documenting and visualizing this data is crucial to better understanding global water usage. Syncfusion^® Blazor Charts offer an effective way to visualize these insights.

We’ll explore how to visualize global water access using the Bubble Chart in Syncfusion^® Blazor Charts. Each country is represented as a bubble, sized according to its population and positioned based on its access level. This visualization helps uncover global trends, identify regions at risk, and highlight stark disparities in water accessibility.

Let’s dive into building a powerful, interactive data visualization that brings global water access inequality to the forefront using the Syncfusion^® Blazor Chart component.

Why this Bubble Chart matters

• Quickly spot countries with poor water access and large populations.
• Identify regions requiring urgent attention and resources.
• Communicate complex data simply to stakeholders and decision-makers.

Getting started with Syncfusion^® Blazor Chart

The Syncfusion^® Blazor Chart is a powerful data visualization component built for modern Blazor applications. It supports over 30 chart types, including line, bar, pie, area, and more, with rich interactivity and extensive customization options. To include the Blazor Chart component in your Blazor Web App, refer to the documentation.

Implementing the water access Bubble Chart in Blazor

In this section, we’ll walk through how to visualize access to water services across countries using a Bubble Chart in Blazor with the Syncfusion^® Charts component.

Follow these steps to implement the visualization:

Step 1: Gather water access data

Before visualizing data in a bubble chart, gathering accurate and meaningful statistics is crucial. For this use case, the data is sourced from the SDG 6 data portal, which monitors global progress in access to safe drinking water. The dataset includes the percentage of people with safely managed water services and those with limited access, defined as reliance on limited, unimproved, or surface water sources.

Step 2: Define and populate the data in the chart

To enable water access visualization, define a class named WaterAccessData with the following properties:

• Country: The name of the country, such as India or Brazil.
• LimitedService: The combined percentage of the population using limited, unimproved, or surface water sources.
• SafelyManagedService: The percentage of the population using safely managed water services.
• PopulationInMillions: The estimated population of the country in millions.

After defining the class, populate the data into a list that will serve as the data source for the chart, as shown in the code example below.

public class WaterAccessData
{
    public string Country { get; set; }
    public double LimitedService { get; set; }  // Limited + Unimproved + Surface water
    public double SafelyManagedService { get; set; }
    public double PopulationInMillions { get; set; }
}

List<WaterAccessData> ChartPoints = new List<WaterAccessData>
{
    new WaterAccessData { Country = "Afghanistan", LimitedService = 1.17 + 10.48 + 6.18, SafelyManagedService = 30.03, PopulationInMillions = 40.1 },
    new WaterAccessData { Country = "Albania", LimitedService = 1.87 + 3.03 + 0, SafelyManagedService = 70.74, PopulationInMillions = 2.8 },
    new WaterAccessData { Country = "Angola", LimitedService = 8.3 + 18.2 + 12.5, SafelyManagedService = 25.6,  PopulationInMillions = 35.5 },
    ...
};

This structured data is then assigned to the Syncfusion^® Blazor Chart by setting the DataSource property of the ChartSeries component.

Step 3: Configure the Blazor Bubble Chart

Use the SfChart component to create a bubble chart to display the relationship between water access and population across various countries. To render a bubble chart series, set the Type property of the ChartSeries to Bubble. The chart uses a single ChartSeries, with its DataSource property bound to the WaterAccessData list.

When using the DataSource property, defining field mappings is essential so the chart can interpret the data correctly. In this case:

• XName is set to LimitedService, which represents the percentage of the population with limited water services.
• YName is set to SafelyManagedService, representing the percentage of the population with access to safely managed water services.

These two properties are required when binding a list to the DataSource, as they determine how the chart plots the X and Y values.

To further enhance the chart’s visual representation, we configure the following properties:

• Size is bound to PopulationInMillions, making each bubble’s size proportional to the country’s population.
• TooltipMappingName is set to Country, enabling country names to appear in tooltips and data labels.

Additionally, tooltips are enabled for better interactivity, and data labels are configured to display country names directly on the chart. Event handlers like OnPointRender are attached via the ChartEvents to dynamically customize the appearance of each data point, as shown in the code example below.

<SfChart Title="World Countries Water Access Details" Width="@Width" Theme="@Theme">
    ...

    <ChartTooltipSettings Header="<b>${point.tooltip}</b>" EnableMarker="false" Enable="true"
                          Format="Limited Access to Water: <b>${point.x}%</b><br/>Access to Safely Managed Water: <b>${point.y}%</b><br/>Population: <b>${point.size} Million</b>">
    </ChartTooltipSettings>

    <ChartSeriesCollection>
        <ChartSeries TooltipMappingName="Country" DataSource="@ChartPoints" Name="Water Access"
                     XName="LimitedService" YName="SafelyManagedService" Size="PopulationInMillions"
                     Type="ChartSeriesType.Bubble" MinRadius="3" MaxRadius="8">

            <ChartMarker>
                <ChartDataLabel Visible="true" Name="Country" Position="LabelPosition.Middle">
                    <ChartDataLabelFont Size="12px" FontWeight="500"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>

            <ChartSeriesBorder Width="2"></ChartSeriesBorder>

        </ChartSeries>
    </ChartSeriesCollection>

    ...

    <ChartEvents OnPointRender="PointRender"></ChartEvents>
</SfChart>

Refer to the following image.

Sample reference

For more details, refer to the live demo.

Syncfusion Blazor components can be transformed into stunning and efficient web apps.

Try It Free

Conclusion

Thank you for reading! Now that you know how to visualize global water access disparities with Syncfusion^® Blazor Bubble Charts, it’s time to try it yourself! Whether you’re a developer, analyst, or policymaker, these interactive charts help you tell compelling data stories. Explore our ⁠Blazor Chart examples to learn more about the supported chart types and how easy it is to configure them for stunning visual effects.

If you’re an existing Syncfusion^® user, you can download the latest version of Essential Studio^® from the license and downloads page. For those new to Syncfusion^®, we offer a 30-day free trial so you can experience these exciting features firsthand.

Need help? Feel free to reach out via our support forum, support portal, or feedback portal. We are always happy to assist you!