Interactive Data Visualizations in JavaScript

Last Updated : 28 Apr, 2025

In this article we will learn about Interactive Data visualization in JavaScript, Data visualizations serve as a powerful tool for visually representing information and allowing viewers to easily perceive trends, patterns, and relationships in large datasets. Static visuals often fall short when providing an immersive experience that encourages exploration and understanding.

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Vanilla JavaScript and SVG

Vanilla JavaScript combined with Scalable Vector Graphics can be used to create interactive data visualizations and SVG provides a flexible and scalable way to render graphics on the web.

Example: In this example, we are using SVG to create a bar chart with two bars of different heights. When hovering over a bar, its color changes from pink to green.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG Chart</title>
    <style>
        .bar {
            fill: Pink;
            transition: fill 0.2s;
        }

        .bar:hover {
            fill: green;
        }
    </style>
</head>

<body>
    <svg id="chart" width="250" height="500">
    </svg>
    <script>
        const data = [200, 80];
        const svg = document.getElementById('chart');
        const Width = svg.getAttribute('width') / data.length;
        const GFG = 10;
        for (let i = 0; i < data.length; i++) {
            const rect =
                document.createElementNS(
                    "...", 'rect');
            rect.setAttribute('class', 'bar');
            rect.setAttribute('x', i * (Width + GFG));
            rect.setAttribute('y', svg.getAttribute('height') - data[i]);
            rect.setAttribute('width', Width);
            rect.setAttribute('height', data[i]);
            svg.appendChild(rect);
        }
    </script>
</body>

</html>

Output:

mediaio_QwckwqgJ

Approach 2: Using D3.js Library

The D3.js is a powerful JavaScript library for the creating interactive data visualizations and provides a wide range of tools for the binding data to the DOM and manipulating the document based on data.

Example: In this example, This interactive D3.js chart displays bars with heights based on provided data. When hovering over a bar, its color changes from green to red.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>The Interactive D3.js Chart</title>
    <script src=
"https://d3js.org/d3.v7.min.js">

    </script>
    <style>
        .bar {
            fill: green;
            transition: fill 0.2s;
        }

        .bar:hover {
            fill: red;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script>
        const data = [18, 34, 22, 28];
        const Width = 250;
        const Height = 150;
        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", Width)
            .attr("height", Height);
        const barWidth1 = Width / data.length;
        const barSpacing1 = 10;
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => i * (barWidth1 + barSpacing1))
            .attr("y", d => Height - d * 5)
            .attr("width", barWidth1)
            .attr("height", d => d * 5);
    </script>
</body>

</html>

Output:

Approach 3: Using jQuery

In this approach, Using jQuery, create interactive data visualizations by attaching event listeners to DOM elements, enabling smooth animations and transitions for enhanced user experience.

Example: In this example, we create an interactive bar that expands and changes color on hover. The page also includes a green title.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery Interactive Bar Example</title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <style>
        .bar {
            width: 50px;
            height: 150px;
            background-color: green;
            transition: width 0.2s, background-color 0.2s;
        }

        h2 {
            color: green;
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <div class="bar"></div>
    <script>
        $(document).ready(function () {
            $('.bar').hover(function () {
                $(this).stop().animate(
                    {
                        width: '100px',
                        backgroundColor: 'red'
                    }, 'fast');
            }, function () {
                $(this).stop().animate(
                    {
                        width: '50px',
                        backgroundColor: 'blue'
                    },
                    'fast');
            });
        });
    </script>
</body>

</html>

Output:

interactive-data

Interactive Data Visualizations in JavaScript

subramanyasmgm

Improve

Article Tags :

Interactive Data Visualizations in JavaScript

Table of Content

Approach 1: Vanilla JavaScript and SVG

Approach 2: Using D3.js Library

Approach 3: Using jQuery

Similar Reads

Thank You!

What kind of Experience do you want to share?