Data Visualization Dashboard
Introduction:
This project is a weather data dashboard that shows temperature
trends for different cities using interactive charts. It fetches real-time weather
data from the OpenWeather API and displays it using Chart.js.Users can select
a city from the dropdown menu, and the chart updates automatically with the
latest forecast. The dashboard is responsive, easy to use, and visually
appealing—making it a great way to learn about data visualization, API
integration, and building interactive web applications.
Project Description:
This project is a simple and interactive weather dashboard. It uses data
from the OpenWeather API to show the temperature forecast for different cities.
When a user selects a city from the dropdown, the chart updates to show the
temperature trend for the next few hours.The data is displayed using Chart.js,
which makes the graph look clean and easy to understand. The design is
responsive, so it works well on both computers and mobile devices. This
project is great for learning how to work with APIs, display data with charts,
and build a simple, real-time web application.
Code:
#index.html
<!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>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard">
<header>
<h1>Weather Data Dashboard</h1>
<select id="citySelect">
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Tokyo">Tokyo</option>
<option value="Chennai">Chennai</option>
</select>
</header>
<section class="charts">
<canvas id="weatherChart"></canvas>
</section>
</div>
<script src="config.js"></script>
<script src="script.js"></script>
</body>
</html>
#style.css
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f7f9;
color: #333;
}
.dashboard {
max-width: 960px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border-radius: 10px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
}
h1 {
font-size: 24px;
}
select {
padding: 8px;
font-size: 16px;
}
.charts {
margin-top: 20px;
}
canvas {
width: 100% !important;
height: auto !important;
}
#config.js
const API_KEY = "285b81f897886bec6d392d8fef23ffc0";
#script.js
const ctx = document.getElementById('weatherChart').getContext('2d');
let weatherChart;
document.getElementById('citySelect').addEventListener('change', () => {
const city = document.getElementById('citySelect').value;
fetchWeather(city);
});
async function fetchWeather(city) {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API
_KEY}&units=metric`
);
const data = await response.json();
const labels = data.list.slice(0, 10).map(item => item.dt_txt);
const temps = data.list.slice(0, 10).map(item => item.main.temp);
updateChart(labels, temps, city);
}
function updateChart(labels, temps, city) {
if (weatherChart) weatherChart.destroy();
weatherChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: `Temperature (°C) in ${city}`,
data: temps,
borderColor: '#36a2eb',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Hourly Forecast (Next 10 Slots)'
},
tooltip: {
mode: 'index',
intersect: false
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
scales: {
y: {
beginAtZero: false
}
}
}
});
}
// Initial load
fetchWeather('London');
Output Screenshot:
Conclusion:
This project shows how real-time data can be turned into useful and
interactive visual information. By combining API data with charts, the weather
dashboard helps users easily understand temperature trends in different cities. It
also demonstrates key web development skills like working with APIs, using
Chart.js, and building responsive user interfaces.
