Your challenge is to create a web application that will fetch a database of shark attack data. Using the data you will graph.js to tally up the data and make the following graphs:
Pie Chart counting the number of attacks per state in Australia
Column chart showing the count of attacks male vs female.
A full solution can be found on our class github or you can see how it works on our demo site.
Getting Started
Create a new folder for the project
create an index.html and script.js
Copy and paste the html template below to get started. It includes:
Scripts and CSS
A basic template including two canvas areas to plot the two charts
<!DOCTYPE html>
<html>
<head>
<title>Australian Shark Attacks</title>
<!-- Bulma CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<style>
.chart{
width:400px;
}
</style>
<body>
<!-- Your content goes here -->
<div class="container">
<h1 class="title">Australian Shark Attacks</h1>
<div class="columns">
<div class="column">
<h2 class="subtitle">Shark Attack Count By State</h2>
<div class="chart">
<canvas id="stateChartArea"></canvas>
</div>
</div>
<!-- second col -->
<div class="column">
<h2 class="subtitle">Shark Attack Count By Gender</h2>
<div class="chart">
<canvas id="genderChartArea"></canvas>
</div>
</div>
</div>
</div>
<!-- Bulma JS -->
<script
src="https://cdn.jsdelivr.net/npm/bulma@0.9.3/js/bulma.min.js"></script>
<script src="script.js"></script>
</body>
</html>
4. Create a script file and insert the following template
I have included references to the chart areas and global variables for states, data and each of the charts
const stateChartArea = document.getElementById("stateChartArea");
const genderChartArea = document.getElementById("genderChartArea");
var data = []; //store all data locally
var stateLabels = ["South Australia", 'Western Australia', "Northen Territry", "Queensland", "New South Wales", "Vicotria", "Tasmania"];
var counts = [0, 0, 0, 0, 0, 0, 0];
var genderLabels = ["M", "F"];
var genderCounts = [0, 0];
var pieChart; //set up global var
var colchart; //set up global var
fetchAllData(); //start the program
//loop over data and count the number of attacks by state and update in array above
function getStateCounts() {
}
//loop over data and count the number of attacks by gender and update in array above
function getGenderCounts() {
}
async function fetchAllData() {
try {
const response = await fetch('https://public.opendatasoft.com/api/explore/v2.1/catalog/datasets/global-shark-attack/records?where=country%3D%22Australia%22%20OR%20country%20%3D%20%22AUSTRALIA%22&limit=100');
data = await response.json();
//run the commands to tally and print graphs
} catch (error) {
console.error(error);
}
}
//create the pie chart
function createPieChart() {
pieChart = new Chart(stateChartArea, {
type: 'pie',
data: {
labels: stateLabels,
datasets: [{
data: counts,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
]
}]
},
options: {
title: {
display: true,
text: 'Shark Attack in Australia by State'
}
}
});
}
//create the pie chart
function createColChart() {
colChart = new Chart(genderChartArea, {
type: 'bar',
data: {
labels: genderLabels,
datasets: [{
data: genderCounts,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
]
}]
},
options: {
title: {
display: true,
text: 'Shark Attack in Australia by Sex'
}
}
});
}
You Task:
Loop over the array of data and tally up the attacks in each state.
Loop over the array of data and tally up the attacks by each sex.