How to use HTML for Data Visualization ?

Last Updated : 27 Sep, 2023

In this article, we are going to discuss Data Visualization techniques that can be employed to make the communication of data easier and more effective. Data Visualization in HTML involves presenting data in graphical or visual formats using HTML, CSS, and SVG. It enhances data comprehension and insights through charts, graphs, and other visual representations.

There are several methods that can be used to visualization of data in HTML.

Simple Data Visualization using <table>
Data Visualization using SVGs

Approach 1: Simple Data Visualization using <table>

HTML tables are a basic data visualization approach where data is presented in tabular form, using rows and columns to organize and display information.

Syntax:

<table>
    <tr>
        <th>Header cell 1</th>
        <th>Header cell 2</th>
    </tr>
    <tr>
        <td>Data cell 1</td>
        <td>Data cell 2</td>
    </tr>
</table>

Example: Here is an example of the above syntax-

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Simple Table</title>
</head>

<body>
    <table border="black">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th> Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Approach 2: Data Visualization using SVGs

The process of employing Scalable Vector Graphics (SVGs) for data visualization entails building unique, interactive visualizations that can be manipulated with JavaScript to produce dynamic charts, graphs, and shapes.

Syntax:

<svg width="width" height="height">
    <!-- Bar 1 -->
    <rect x="val1" y="val2" width="val3" height="val4" fill="val5" />
    <!-- Bar 2 -->
    <rect x="val5" y="val7" width="val8" height="val9" fill="val10" />
    <!-- Bar 3 -->
    <rect x="val11" y="val12" width="val13" height="val14" fill="val15" />
</svg>

Example: In this example, we create a basic SVG bar chart with three data points represented by green bars, along with axis lines and labels.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG Data Visualization - Bar Chart</title>
</head>

<body>
    <svg width="400" height="300">
        <!-- Data points for the bar chart -->
        <rect x="70" y="100" width="50" 
              height="120" fill="green" />
        <rect x="170" y="100" width="50" 
              height="120" fill="green" />
        <rect x="270" y="100" width="50" 
              height="120" fill="green" />

        <!-- Axis lines and labels -->
        <line x1="30" y1="10" x2="30" 
              y2="220" stroke="black" />
        <line x1="30" y1="220" x2="380" 
              y2="220" stroke="black" />
        <text x="10" y="15" font-size="12" 
              fill="black">
            200
        </text>
        <text x="10" y="85" 
              font-size="12" 
              fill="black">
            150
        </text>
        <text x="10" y="155" 
              font-size="12" 
              fill="black">
            100
        </text>
        <text x="10" y="225" 
              font-size="12" 
              fill="black">
            50
        </text>
        <text x="80" y="240" 
              font-size="12" 
              fill="black">
            Data 1
        </text>
        <text x="180" y="240" 
              font-size="12" 
              fill="black">
            Data 2
        </text>
        <text x="280" y="240" 
              font-size="12" 
              fill="black">
            Data 3
        </text>
    </svg>
</body>

</html>