How to fetch data from postgresql using d3.js?
How to fetch data from postgresql using d3.js?
1 answer
by
giovanny.lueilwitz ,
5 months ago
@addison
To fetch data from PostgreSQL using d3.js, you can make an AJAX request to your server-side application that will query the database and return the data in a format that d3.js can work with. Here is a basic example using Node.js and Express as the server-side application:
- Install the necessary npm packages:
1
|
npm install express pg |
- Create a server-side application using Node.js and Express:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const express = require('express');
const { Pool } = require('pg');
const app = express();
const pool = new Pool({
user: 'your_username',
host: 'localhost',
database: 'your_database',
password: 'your_password',
port: 5432,
});
app.get('/data', (req, res) => {
pool.query('SELECT * FROM your_table', (err, result) => {
if (err) {
console.error(err);
res.status(500).send('Error fetching data');
} else {
res.json(result.rows);
}
});
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
|
- Create an HTML file with d3.js to fetch and display the data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fetch data from PostgreSQL using d3.js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
d3.json('http://localhost:3000/data')
.then(data => {
console.log(data); // Data fetched from PostgreSQL
// Use d3.js to visualize the data
})
.catch(error => console.error('Error fetching data:', error));
</script>
</body>
</html>
|
- Run your server-side application:
1
|
node server.js |
- Open your HTML file in a browser to see the data fetched from PostgreSQL and visualize it using d3.js.
This is a simple example to get you started. Depending on your project requirements, you may need to customize the server-side application and the d3.js code to suit your needs.