TypeScript Tutorial: Creating a Basic Data Visualization Dashboard

Written by

learnmodernjavascript

in

In today’s data-driven world, the ability to visualize information is more crucial than ever. Dashboards provide an intuitive way to understand complex datasets, identify trends, and make informed decisions. This tutorial will guide you through creating a basic data visualization dashboard using TypeScript, providing a solid foundation for building more complex and interactive dashboards in the future. We’ll focus on simplicity, clarity, and practical application, ensuring that even beginners can follow along and learn the fundamentals of data visualization with TypeScript.

Why TypeScript for Data Visualization?

TypeScript offers several advantages for building data visualization dashboards:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process, reducing debugging time and improving code quality.
  • Code Maintainability: Typescript’s clear syntax and organization make your code easier to read, understand, and maintain, especially as the dashboard grows in complexity.
  • Developer Experience: Features like autocompletion and refactoring tools enhance the developer experience, making coding more efficient and enjoyable.
  • Scalability: TypeScript supports object-oriented programming (OOP) principles, allowing for scalable and modular code structures.

Setting Up Your Development Environment

Before we start, ensure you have the following installed:

  • Node.js and npm: You’ll need Node.js and npm (Node Package Manager) to manage project dependencies. You can download them from nodejs.org.
  • A Code Editor: A code editor like Visual Studio Code (VS Code) is highly recommended. VS Code offers excellent TypeScript support, including features like IntelliSense and debugging.

Let’s create a new project and install the necessary dependencies:

  1. Open your terminal or command prompt.
  2. Create a new project directory: mkdir data-viz-dashboard and navigate into it: cd data-viz-dashboard.
  3. Initialize a new npm project: npm init -y. This creates a package.json file.
  4. Install TypeScript: npm install typescript --save-dev. The --save-dev flag indicates that this is a development dependency.
  5. Create a tsconfig.json file: npx tsc --init. This command generates a default TypeScript configuration file. You might need to customize this file later based on your project requirements. For now, the default settings will suffice.

Project Structure

Let’s set up a basic project structure:

data-viz-dashboard/
├── src/
│   ├── index.ts
├── tsconfig.json
├── package.json
└── README.md

In the src/ directory, we’ll keep our TypeScript source files. index.ts will be our main entry point.

Building the Dashboard: Core Concepts

Our dashboard will consist of a simple bar chart. We will use plain JavaScript (and TypeScript) to create the visualization, without relying on any external libraries. This approach will help us understand the fundamental concepts of data visualization.

1. Data Preparation

First, let’s define some sample data. This data will represent sales figures for different months. Create a file named src/data.ts:

// src/data.ts
export interface SalesData {
  month: string;
  sales: number;
}

export const salesData: SalesData[] = [
  { month: 'Jan', sales: 1000 },
  { month: 'Feb', sales: 1200 },
  { month: 'Mar', sales: 1500 },
  { month: 'Apr', sales: 1300 },
  { month: 'May', sales: 1800 },
];

Here, we define an interface SalesData to represent the structure of our data. We then create an array salesData that contains the sample data.

2. Creating the Bar Chart

Now, let’s create the bar chart in src/index.ts:

// src/index.ts
import { salesData, SalesData } from './data';

function createBarChart(data: SalesData[], containerId: string) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container with id '${containerId}' not found.`);
    return;
  }

  // Calculate maximum sales value
  const maxSales = Math.max(...data.map(item => item.sales));

  // Chart dimensions and padding
  const chartWidth = 600;
  const chartHeight = 300;
  const barWidth = chartWidth / data.length;
  const padding = 20;

  // Create SVG element
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', chartWidth.toString());
  svg.setAttribute('height', chartHeight.toString());
  container.appendChild(svg);

  // Create bars
  data.forEach((item, index) => {
    const barHeight = (item.sales / maxSales) * (chartHeight - padding * 2);
    const x = index * barWidth;
    const y = chartHeight - barHeight - padding;

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x.toString());
    rect.setAttribute('y', y.toString());
    rect.setAttribute('width', barWidth.toString());
    rect.setAttribute('height', barHeight.toString());
    rect.setAttribute('fill', 'steelblue');
    svg.appendChild(rect);

    // Add labels
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', (x + barWidth / 2).toString());
    text.setAttribute('y', (chartHeight - padding / 2).toString());
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('fill', 'black');
    text.textContent = item.month;
    svg.appendChild(text);
  });
}

// Call the function to create the chart
document.addEventListener('DOMContentLoaded', () => {
  createBarChart(salesData, 'chart-container');
});

Let’s break down this code:

  • Import Data: We import the salesData from ./data.
  • createBarChart Function:
    • Takes the data and the ID of the container element as arguments.
    • Gets the container element from the DOM.
    • Calculates the maximum sales value to scale the chart.
    • Sets chart dimensions and padding.
    • Creates an SVG element to hold the chart.
    • Iterates through the data and creates a bar for each data point:
    • Calculates the bar’s height, x, and y positions.
    • Creates a rect element for each bar.
    • Sets the bar’s attributes (x, y, width, height, fill).
    • Creates a text element for each month label.
    • Appends the bar and label to the SVG element.
  • Event Listener: We use an event listener to call the createBarChart function after the DOM is fully loaded. This ensures that the HTML container element is available.

3. HTML Setup

Create an index.html file in the root directory:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Visualization Dashboard</title>
</head>
<body>
  <div id="chart-container"></div>
  <script src="./dist/index.js"></script>
</body>
</html>

This HTML file includes a div element with the ID chart-container, which will hold our bar chart. It also includes the compiled JavaScript file (dist/index.js). We will compile the TypeScript code and generate the JavaScript file in the next step.

4. Compiling and Running

Now, let’s compile the TypeScript code and run the dashboard:

  1. Compile the TypeScript code: Open your terminal and run npx tsc. This command compiles all TypeScript files in the project and outputs the JavaScript files to the dist/ directory (or the directory specified in your tsconfig.json).
  2. Open index.html in your browser: You can open the index.html file directly in your web browser. You should see a bar chart displaying the sales data.

Adding More Features

Now that we have a basic bar chart, let’s enhance our dashboard by adding more features:

1. Adding a Title and Axis Labels

Let’s add a title to the chart and labels for the x and y axes. Modify the createBarChart function:

// src/index.ts
import { salesData, SalesData } from './data';

function createBarChart(data: SalesData[], containerId: string) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container with id '${containerId}' not found.`);
    return;
  }

  // Calculate maximum sales value
  const maxSales = Math.max(...data.map(item => item.sales));

  // Chart dimensions and padding
  const chartWidth = 600;
  const chartHeight = 300;
  const barWidth = chartWidth / data.length;
  const padding = 40;

  // Create SVG element
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', chartWidth.toString());
  svg.setAttribute('height', chartHeight.toString());
  container.appendChild(svg);

  // Add title
  const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  title.setAttribute('x', (chartWidth / 2).toString());
  title.setAttribute('y', padding.toString());
  title.setAttribute('text-anchor', 'middle');
  title.setAttribute('font-size', '1.5em');
  title.setAttribute('font-weight', 'bold');
  title.textContent = 'Monthly Sales';
  svg.appendChild(title);

  // Create bars
  data.forEach((item, index) => {
    const barHeight = (item.sales / maxSales) * (chartHeight - padding * 2);
    const x = index * barWidth;
    const y = chartHeight - barHeight - padding;

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x.toString());
    rect.setAttribute('y', y.toString());
    rect.setAttribute('width', barWidth.toString());
    rect.setAttribute('height', barHeight.toString());
    rect.setAttribute('fill', 'steelblue');
    svg.appendChild(rect);

    // Add labels
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', (x + barWidth / 2).toString());
    text.setAttribute('y', (chartHeight - padding / 2).toString());
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('fill', 'black');
    text.textContent = item.month;
    svg.appendChild(text);
  });

  // Add y-axis label
  const yAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  yAxisLabel.setAttribute('x', (padding / 2).toString());
  yAxisLabel.setAttribute('y', (chartHeight / 2).toString());
  yAxisLabel.setAttribute('text-anchor', 'middle');
  yAxisLabel.setAttribute('transform', 'rotate(-90 ' + (padding / 2) + ' ' + (chartHeight / 2) + ')');
  yAxisLabel.textContent = 'Sales ($)';
  svg.appendChild(yAxisLabel);
}

// Call the function to create the chart
document.addEventListener('DOMContentLoaded', () => {
  createBarChart(salesData, 'chart-container');
});

We’ve added the following:

  • Title: We create a text element for the title and position it at the top of the chart.
  • Y-axis label: We create a text element for the y-axis label and rotate it using the transform attribute.
  • Padding: Increased the padding value to accommodate the title and axis labels.

Recompile the code (npx tsc) and refresh your browser to see the updated chart with the title and y-axis label.

2. Adding Tooltips

Tooltips enhance user experience by providing additional information when the user hovers over a data point. Let’s add tooltips to our bar chart. Modify the createBarChart function:

// src/index.ts
import { salesData, SalesData } from './data';

function createBarChart(data: SalesData[], containerId: string) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container with id '${containerId}' not found.`);
    return;
  }

  // Calculate maximum sales value
  const maxSales = Math.max(...data.map(item => item.sales));

  // Chart dimensions and padding
  const chartWidth = 600;
  const chartHeight = 300;
  const barWidth = chartWidth / data.length;
  const padding = 40;

  // Create SVG element
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', chartWidth.toString());
  svg.setAttribute('height', chartHeight.toString());
  container.appendChild(svg);

  // Add title
  const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  title.setAttribute('x', (chartWidth / 2).toString());
  title.setAttribute('y', padding.toString());
  title.setAttribute('text-anchor', 'middle');
  title.setAttribute('font-size', '1.5em');
  title.setAttribute('font-weight', 'bold');
  title.textContent = 'Monthly Sales';
  svg.appendChild(title);

  // Create bars
  data.forEach((item, index) => {
    const barHeight = (item.sales / maxSales) * (chartHeight - padding * 2);
    const x = index * barWidth;
    const y = chartHeight - barHeight - padding;

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x.toString());
    rect.setAttribute('y', y.toString());
    rect.setAttribute('width', barWidth.toString());
    rect.setAttribute('height', barHeight.toString());
    rect.setAttribute('fill', 'steelblue');
    svg.appendChild(rect);

    // Add tooltip
    const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    tooltip.setAttribute('x', (x + barWidth / 2).toString());
    tooltip.setAttribute('y', (y - 5).toString());
    tooltip.setAttribute('text-anchor', 'middle');
    tooltip.setAttribute('fill', 'black');
    tooltip.setAttribute('font-size', '0.8em');
    tooltip.setAttribute('visibility', 'hidden'); // Initially hidden
    tooltip.textContent = `$${item.sales.toLocaleString()}`; // Format as currency
    svg.appendChild(tooltip);

    // Add event listeners for hover
    rect.addEventListener('mouseover', () => {
      tooltip.setAttribute('visibility', 'visible');
    });
    rect.addEventListener('mouseout', () => {
      tooltip.setAttribute('visibility', 'hidden');
    });

    // Add labels
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', (x + barWidth / 2).toString());
    text.setAttribute('y', (chartHeight - padding / 2).toString());
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('fill', 'black');
    text.textContent = item.month;
    svg.appendChild(text);
  });

  // Add y-axis label
  const yAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  yAxisLabel.setAttribute('x', (padding / 2).toString());
  yAxisLabel.setAttribute('y', (chartHeight / 2).toString());
  yAxisLabel.setAttribute('text-anchor', 'middle');
  yAxisLabel.setAttribute('transform', 'rotate(-90 ' + (padding / 2) + ' ' + (chartHeight / 2) + ')');
  yAxisLabel.textContent = 'Sales ($)';
  svg.appendChild(yAxisLabel);
}

// Call the function to create the chart
document.addEventListener('DOMContentLoaded', () => {
  createBarChart(salesData, 'chart-container');
});

Here’s what we’ve added:

  • Tooltip element: We create a text element to display the tooltip.
  • Initial visibility: The tooltip’s visibility is set to hidden initially.
  • Tooltip content: We set the text content of the tooltip to the sales value, formatted as currency using toLocaleString().
  • Event listeners: We attach mouseover and mouseout event listeners to each bar.
  • Show/Hide on hover: When the mouse hovers over a bar, the tooltip’s visibility is set to visible. When the mouse moves out, it’s set back to hidden.

Recompile and refresh your browser. Now, when you hover over a bar, you should see a tooltip displaying the sales value.

3. Adding Responsiveness

To make the dashboard responsive, we’ll adjust the chart’s width dynamically based on the container’s width. Modify the createBarChart function:

// src/index.ts
import { salesData, SalesData } from './data';

function createBarChart(data: SalesData[], containerId: string) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container with id '${containerId}' not found.`);
    return;
  }

  // Calculate maximum sales value
  const maxSales = Math.max(...data.map(item => item.sales));

  // Chart dimensions and padding
  const padding = 40;

  // Dynamically calculate chart width based on container width
  const chartWidth = container.offsetWidth;
  const chartHeight = 300;
  const barWidth = chartWidth / data.length;

  // Create SVG element
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', chartWidth.toString());
  svg.setAttribute('height', chartHeight.toString());
  container.appendChild(svg);

  // Add title
  const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  title.setAttribute('x', (chartWidth / 2).toString());
  title.setAttribute('y', padding.toString());
  title.setAttribute('text-anchor', 'middle');
  title.setAttribute('font-size', '1.5em');
  title.setAttribute('font-weight', 'bold');
  title.textContent = 'Monthly Sales';
  svg.appendChild(title);

  // Create bars
  data.forEach((item, index) => {
    const barHeight = (item.sales / maxSales) * (chartHeight - padding * 2);
    const x = index * barWidth;
    const y = chartHeight - barHeight - padding;

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x.toString());
    rect.setAttribute('y', y.toString());
    rect.setAttribute('width', barWidth.toString());
    rect.setAttribute('height', barHeight.toString());
    rect.setAttribute('fill', 'steelblue');
    svg.appendChild(rect);

    // Add tooltip
    const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    tooltip.setAttribute('x', (x + barWidth / 2).toString());
    tooltip.setAttribute('y', (y - 5).toString());
    tooltip.setAttribute('text-anchor', 'middle');
    tooltip.setAttribute('fill', 'black');
    tooltip.setAttribute('font-size', '0.8em');
    tooltip.setAttribute('visibility', 'hidden'); // Initially hidden
    tooltip.textContent = `$${item.sales.toLocaleString()}`; // Format as currency
    svg.appendChild(tooltip);

    // Add event listeners for hover
    rect.addEventListener('mouseover', () => {
      tooltip.setAttribute('visibility', 'visible');
    });
    rect.addEventListener('mouseout', () => {
      tooltip.setAttribute('visibility', 'hidden');
    });

    // Add labels
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', (x + barWidth / 2).toString());
    text.setAttribute('y', (chartHeight - padding / 2).toString());
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('fill', 'black');
    text.textContent = item.month;
    svg.appendChild(text);
  });

  // Add y-axis label
  const yAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  yAxisLabel.setAttribute('x', (padding / 2).toString());
  yAxisLabel.setAttribute('y', (chartHeight / 2).toString());
  yAxisLabel.setAttribute('text-anchor', 'middle');
  yAxisLabel.setAttribute('transform', 'rotate(-90 ' + (padding / 2) + ' ' + (chartHeight / 2) + ')');
  yAxisLabel.textContent = 'Sales ($)';
  svg.appendChild(yAxisLabel);
}

// Call the function to create the chart
document.addEventListener('DOMContentLoaded', () => {
  createBarChart(salesData, 'chart-container');
  // Optional: Add a resize event listener for more dynamic responsiveness
  // window.addEventListener('resize', () => {
  //  createBarChart(salesData, 'chart-container');
  // });
});

Here’s what we changed:

  • Container Width: We now use container.offsetWidth to get the width of the container element dynamically. This ensures that the chart adapts to the available space.
  • Dynamic Chart Width: The chart’s width is now calculated based on the container’s width.
  • Optional Resize Listener: Commented out, but you can uncomment the window.addEventListener('resize', ...) code to redraw the chart whenever the window is resized, providing even more dynamic responsiveness.

Recompile and refresh your browser. Resize your browser window, and the chart should now adjust its width accordingly.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when working with data visualization in TypeScript, along with tips on how to fix them:

  • Incorrect Data Formatting:
    • Mistake: Providing data in an unexpected format, leading to errors or incorrect chart rendering.
    • Fix: Carefully review your data and ensure it matches the expected format defined by your data interfaces (e.g., SalesData). Use the browser’s developer console (F12) to check for errors and inspect the data being passed to your chart functions.
  • Incorrect Element Selection:
    • Mistake: Trying to manipulate an element that doesn’t exist or is not correctly selected from the DOM.
    • Fix: Double-check the ID of the container element in your HTML and ensure it matches the ID you’re using in your TypeScript code (e.g., 'chart-container'). Use console.log(document.getElementById('chart-container')) to verify that the element is being selected.
  • Incorrect SVG Attributes:
    • Mistake: Using incorrect attribute names or values for SVG elements.
    • Fix: Consult the SVG specification for correct attribute names and values. Use the browser’s developer tools to inspect the generated SVG code and identify any issues. Make sure your values are strings, as required by the setAttribute method.
  • Missing or Incorrect Dependencies:
    • Mistake: Not installing necessary packages or importing them correctly.
    • Fix: Make sure you have installed all required dependencies using npm (e.g., TypeScript itself). Check your import statements to ensure you are importing modules correctly. Review the console for error messages.
  • Type Errors:
    • Mistake: Ignoring or misunderstanding TypeScript type errors.
    • Fix: Pay close attention to the TypeScript compiler’s error messages. They often provide valuable clues about what’s wrong. Fix the type errors by ensuring your variables and function parameters have the correct types. Use type annotations and interfaces to improve code clarity and reduce errors.

Summary/Key Takeaways

In this tutorial, we’ve covered the fundamentals of creating a basic data visualization dashboard using TypeScript. We’ve explored the benefits of using TypeScript for this purpose, set up a development environment, and built a simple bar chart. We’ve also added features like titles, axis labels, tooltips, and responsiveness to improve the user experience. You’ve learned how to:

  • Set up a TypeScript project.
  • Define data interfaces.
  • Create SVG elements and manipulate their attributes.
  • Use event listeners for interactivity.
  • Make your dashboard responsive.

FAQ

Here are some frequently asked questions about creating data visualization dashboards with TypeScript:

  1. Can I use external libraries for data visualization?

    Yes, absolutely! Libraries like Chart.js, D3.js, and Recharts offer powerful features and pre-built components that can significantly speed up your development process. However, understanding the fundamentals, as we’ve done in this tutorial, is crucial for customizing and troubleshooting these libraries.

  2. How can I handle larger datasets?

    For larger datasets, consider techniques like data pagination, data aggregation, and data filtering to improve performance. Libraries like D3.js are particularly well-suited for handling large datasets efficiently.

  3. How do I add interactivity to my dashboard?

    You can add interactivity using event listeners (as we did with the tooltips), creating interactive controls (like dropdowns and sliders), and by dynamically updating the chart based on user input. Consider using a state management library (like Redux or Zustand) for managing complex interactions.

  4. How can I deploy my dashboard?

    You can deploy your dashboard as a static website (e.g., using GitHub Pages, Netlify, or Vercel). For more complex dashboards, you might consider using a web server (like Node.js with Express) to serve your application. Make sure to build your TypeScript code (npx tsc) before deployment.

This tutorial provides a starting point for your data visualization journey. As you become more comfortable, you can explore more advanced charting techniques, integrate with different data sources, and create richer interactive experiences. Remember to practice, experiment, and don’t be afraid to consult the documentation of the libraries you choose to use. The world of data visualization is vast and exciting; embrace the challenge and enjoy the process of bringing data to life!

More posts