Scribd
Upload
4 views3 pages

Copy Vis Case-Study 1

Uploaded by

sdawmexpert2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views3 pages

Copy Vis Case-Study 1

Uploaded by

sdawmexpert2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike Share Analysis</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.chart-container {
margin-bottom: 40px;
}
</style>
</head>
<body>
<h1>Bike Share Analysis: Casual vs Member Usage</h1>

<div class="chart-container">
<h2>1. Hourly Usage Patterns</h2>
<canvas id="hourlyUsageChart"></canvas>
</div>

<div class="chart-container">
<h2>2. Average Trip Length</h2>
<canvas id="tripLengthChart"></canvas>
</div>

<div class="chart-container">
<h2>3. Usage Distribution by User Type</h2>
<canvas id="userTypeChart"></canvas>
</div>

<script>
// Data
const hours = Array.from({length: 24}, (_, i) => i);
const casualData =
[117,60,33,26,27,69,193,289,374,298,309,342,446,448,488,614,796,1113,1083,804,619,4
88,396,183];
const memberData =
[74,43,16,15,35,180,590,1213,1363,710,476,564,667,615,675,910,1599,2144,1825,1249,8
92,723,466,220];

const casualTripLength = 29.89; // Average calculated from the data


const memberTripLength = 13.71; // Average calculated from the data

const totalCasual = casualData.reduce((a, b) => a + b, 0);


const totalMember = memberData.reduce((a, b) => a + b, 0);

// Chart 1: Hourly Usage Patterns


new Chart(document.getElementById('hourlyUsageChart'), {
type: 'line',
data: {
labels: hours,
datasets: [
{
label: 'Casual',
data: casualData,
borderColor: 'rgb(255, 99, 132)',
tension: 0.1
},
{
label: 'Member',
data: memberData,
borderColor: 'rgb(54, 162, 235)',
tension: 0.1
}
]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: 'Hour of Day'
}
},
y: {
title: {
display: true,
text: 'Number of Trips'
}
}
}
}
});

// Chart 2: Average Trip Length


new Chart(document.getElementById('tripLengthChart'), {
type: 'bar',
data: {
labels: ['Casual', 'Member'],
datasets: [{
label: 'Average Trip Length (minutes)',
data: [casualTripLength, memberTripLength],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Minutes'
}
}
}
}
});

// Chart 3: Usage Distribution by User Type


new Chart(document.getElementById('userTypeChart'), {
type: 'pie',
data: {
labels: ['Casual', 'Member'],
datasets: [{
data: [totalCasual, totalMember],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Total Trips Distribution'
}
}
}
});
</script>
</body>
</html>

You might also like