12. Guided Project 2: Building an Interactive Data Visualization Element

Data visualization is a prime use case for SVG due to its scalability and manipulability. In this project, we’ll build a simple interactive bar chart using SVG, HTML, and CSS. This will solidify your understanding of basic shapes, grouping, transformations, and CSS interactions.

Project Objective

To create a responsive and interactive bar chart SVG that visually represents data, includes labels, and provides feedback on hover.

Project 2.1: Simple Interactive Bar Chart

We’ll create a chart showing fictional “Monthly Progress”.

Step 1: HTML Setup and Basic SVG Canvas

Create an index.html file and a style.css file. Set up your basic HTML structure and include the <svg> element.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Interactive Bar Chart</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Monthly Progress Report</h1>

        <div class="chart-container">
            <svg class="bar-chart" viewBox="0 0 500 300" role="img" aria-labelledby="chartTitle chartDesc">
                <title id="chartTitle">Monthly Progress Chart</title>
                <desc id="chartDesc">A bar chart showing progress percentages for Q1, Q2, Q3, and Q4.</desc>

                <!-- Chart elements will go here -->
            </svg>
        </div>
    </body>
</html>

style.css (Initial setup)

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f7f6;
    margin: 0;
}

h1 {
    color: #333;
    margin-bottom: 30px;
}

.chart-container {
    width: 80%; /* Make the container responsive */
    max-width: 800px;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Include padding in width */
}

.bar-chart {
    display: block; /* Important for SVG to take up correct space */
    width: 100%;
    height: auto;
    border-bottom: 2px solid #ccc; /* X-axis line */
    border-left: 2px solid #ccc; /* Y-axis line */
    box-sizing: border-box; /* To make borders inside the viewBox */
}

/* Base styles for chart elements will go here */

Explanation:

We’ve added role="img" and aria-labelledby for accessibility, linking to descriptive text.
The chart-container and bar-chart CSS classes set up a responsive container for our SVG. The viewBox="0 0 500 300" means our internal drawing space is 500x300 units.

Step 2: Drawing the Bars and Labels

Let’s define our data and then use <g>, <rect>, and <text> elements to draw the bars and their labels. We’ll simulate some data here.

Data: [85, 60, 95, 70] (representing percentages for Q1, Q2, Q3, Q4)

Since our viewBox is 500x300, the bars should fit within this. Let’s decide on:

Bar width: 80 units
Spacing between bars: 40 units
Max bar height: 200 units (representing 100%)
Y-axis base: 250 units (to leave space for labels below)

index.html (inside <svg> for Bar Chart)

<g class="chart-bars">
    <!-- Base line for bars -->
    <line x1="50" y1="250" x2="450" y2="250" stroke="#bbb" stroke-width="2" />
    <line x1="50" y1="250" x2="50" y2="50" stroke="#bbb" stroke-width="2" />

    <!-- Bar 1: Q1 (85%) -->
    <g class="bar-group" transform="translate(70, 0)">
        <rect
            x="0"
            y="70" /* 250 - (200 * 0.85) = 250 - 170 = 80 */
            width="80"
            height="170"
            fill="#4CAF50"
            class="bar"
            data-value="85%"
        />
        <text x="40" y="60" text-anchor="middle" fill="#333" font-size="20" class="bar-value">
            85%
        </text>
        <text x="40" y="275" text-anchor="middle" fill="#666" font-size="18" class="bar-label">
            Q1
        </text>
    </g>

    <!-- Bar 2: Q2 (60%) -->
    <g class="bar-group" transform="translate(190, 0)">
        <rect
            x="0"
            y="130" /* 250 - (200 * 0.60) = 250 - 120 = 130 */
            width="80"
            height="120"
            fill="#FFC107"
            class="bar"
            data-value="60%"
        />
        <text x="40" y="120" text-anchor="middle" fill="#333" font-size="20" class="bar-value">
            60%
        </text>
        <text x="40" y="275" text-anchor="middle" fill="#666" font-size="18" class="bar-label">
            Q2
        </text>
    </g>

    <!-- Bar 3: Q3 (95%) -->
    <g class="bar-group" transform="translate(310, 0)">
        <rect
            x="0"
            y="50" /* 250 - (200 * 0.95) = 250 - 190 = 60 */
            width="80"
            height="190"
            fill="#2196F3"
            class="bar"
            data-value="95%"
        />
        <text x="40" y="40" text-anchor="middle" fill="#333" font-size="20" class="bar-value">
            95%
        </text>
        <text x="40" y="275" text-anchor="middle" fill="#666" font-size="18" class="bar-label">
            Q3
        </text>
    </g>

    <!-- Bar 4: Q4 (70%) -->
    <g class="bar-group" transform="translate(430, 0)">
        <rect
            x="0"
            y="110" /* 250 - (200 * 0.70) = 250 - 140 = 110 */
            width="80"
            height="140"
            fill="#E91E63"
            class="bar"
            data-value="70%"
        />
        <text x="40" y="100" text-anchor="middle" fill="#333" font-size="20" class="bar-value">
            70%
        </text>
        <text x="40" y="275" text-anchor="middle" fill="#666" font-size="18" class="bar-label">
            Q4
        </text>
    </g>
</g>

Explanation:

Each bar and its associated value/label are wrapped in a <g class="bar-group">.
transform="translate(x, 0)" on each bar-group is used to position the entire bar stack horizontally, making it easier to manage coordinates inside the group.
y attribute for <rect> is base_y - bar_height. base_y is 250. Max height is 200 units.
Value text is positioned above the bar, and label text below the base line. text-anchor="middle" centers the text visually.

Step 3: Adding Interactivity (CSS Transitions and Hover Effects)

Let’s make the bars interactive on hover.

style.css (add these styles)

/* ... existing styles ... */

.bar-group {
    cursor: pointer;
}

.bar {
    transition:
        transform 0.3s ease-out,
        fill 0.3s ease-out;
    transform-origin: bottom; /* Crucial for scaling from the base */
}

.bar-group:hover .bar {
    transform: scaleY(1.05) translateY(-5px); /* Scale up and lift slightly */
    filter: brightness(1.2); /* Make it brighter on hover */
}

.bar-value,
.bar-label {
    transition: fill 0.3s ease-out;
}

.bar-group:hover .bar-value {
    fill: #007bff; /* Highlight value text on hover */
    font-weight: bold;
}

Result: You should now have an interactive bar chart where bars lift and brighten on hover, and their value text changes color.

Step 4: Challenge - Enhance with Tooltips or More Complex Data

You’ve built a basic interactive bar chart! Now, let’s take it a step further.

Your Goal:

Add a simple tooltip: When hovering over a bar, display more detailed information (e.g., “Quarter 1 Progress: 85%”). This can be done with a hidden <text> element inside each bar-group that becomes visible on hover, or by using HTML-based tooltips positioned relative to the SVG using JavaScript. For an SVG-only solution:
- Inside each bar-group, add another <text> element with display: none; by default.
- On hover, change its display to block or opacity to 1. Position it intelligently (e.g., just above the bar).
Add Y-axis Labels: Add some horizontal lines and <text> labels for the Y-axis (e.g., 0%, 50%, 100%).
Animate Bar Growth (Optional, Advanced): Instead of the bars being full height initially, make them grow from 0 height on page load. This would require CSS @keyframes animations on the height and y attributes, or more robust JavaScript animation.

Hints for tooltip with SVG text:

<g class="bar-group" transform="translate(70, 0)">
    <!-- ... rect and existing text ... -->
    <text
        x="40"
        y="50"
        text-anchor="middle"
        fill="#000"
        font-size="14"
        class="bar-tooltip"
        display="none"
    >
        Q1: 85% Achieved
    </text>
</g>

/* ... existing styles ... */
.bar-tooltip {
    /* Style the tooltip text */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    /* More complex styling and positioning often requires feForeignObject or JS */
    /* For simple SVG text, you might need to manually align/adjust */
    pointer-events: none; /* So it doesn't block hover on the bar */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.bar-group:hover .bar-tooltip {
    display: block; /* Can also use opacity: 1; with display initial for smoother transition */
    opacity: 1;
}

This project demonstrates how SVG can be a powerful tool for creating interactive and informative data visualizations directly in the browser, without heavy external libraries for basic functionality.

Guided Project 2: Building an Interactive Data Visualization Element

// table of contents