Building a real-time data visualization dashboard with Express.js and D3.js

17 Sep 2023

In this blog post, we will walk through the process of building a real-time data visualization dashboard using two powerful web technologies: Express.js and D3.js. Express.js is a fast, unopinionated web framework for Node.js, while D3.js is a JavaScript library for manipulating and visualizing data.

What You’ll Need

Node.js installed on your machine
Basic knowledge of JavaScript and web development

Setting up the Project

To get started, let’s create a new directory for our project and initialize a new Node.js project. Open your terminal and run the following commands:

mkdir data-visualization-dashboard
cd data-visualization-dashboard
npm init -y

Next, we need to install Express.js and D3.js as dependencies. Run the following commands:

npm install express
npm install d3

Creating the Express.js Server

Now let’s create the server file server.js in the root of our project and add the following code:

const express = require('express');
const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile('index.html');
});

const server = app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

In this code, we are creating a basic Express.js server that serves static files from the public directory. We are also defining a route for the homepage (/) that serves the index.html file.

Creating the Data Visualization

Next, let’s create the index.html file in the public directory and add the following code:

<!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>
  <h1>Data Visualization Dashboard</h1>

  <!-- Add your D3.js code here -->
  
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

In this code, we are creating a basic HTML file with a title and a placeholder for our data visualization. We are also including the D3.js library and a script.js file for our custom JavaScript code.

Building the Real-time Data Visualization

Finally, let’s create the script.js file in the public directory and add the following code:

document.addEventListener('DOMContentLoaded', () => {
  const data = [10, 20, 30, 40, 50];
  
  const svg = d3.select('body')
    .append('svg')
    .attr('width', 500)
    .attr('height', 300);

  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => i * 70)
    .attr('y', (d) => 300 - d * 5)
    .attr('width', 50)
    .attr('height', (d) => d * 5)
    .attr('fill', 'teal');
});

In this code, we are using D3.js to create a simple bar chart with the provided data. We select the <body> element, append an SVG element, and then use the data to create rectangles for each data point. We set the position, width, height, and fill color of each rectangle.

Running the Application

To start the server and see the real-time data visualization dashboard in action, run the following command in your terminal:

node server.js

Open your browser and navigate to http://localhost:3000 to see the dashboard.

Conclusion

In this blog post, we have explored how to build a real-time data visualization dashboard using Express.js and D3.js. We created a basic Express.js server, set up the HTML structure, and used D3.js to generate a simple bar chart. This is just the beginning - D3.js has many advanced features for creating interactive and dynamic visualizations. Feel free to experiment and enhance the dashboard according to your requirements.

#webdevelopment #datavisualization