Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@KubloPL
KubloPL committed Jan 7, 2024
1 parent 22561d9 commit 7653de0
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 93 deletions.
18 changes: 9 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./script/fetchv6.js"></script>
<script src="./script/pop-up.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</head>
<body class="bg-dark">
Expand Down Expand Up @@ -88,12 +87,13 @@ <h3>Contribution to Cybersecurity:</h3>
<div class="jumbotron text-center bg-dark text-white align-items-center" style="margin-bottom: 0; padding-bottom: 0;">
<div class="col-12 text-center">
<h1 class="mb-3 text-light">Table</h1>
<table id="dataTable" class="table table-dark">
<table id="dataTable" class="table-sm table-dark" >
<thead>
<tr>
<th>Breach ID</th>
<th>Breach Date</th>
<th>Company Name</th>
<th>Industry</th>
<th>Employee Count</th>
<th>Affected Customers</th>
<th>Data Type</th>
Expand Down Expand Up @@ -142,7 +142,7 @@ <h3 class="card-title"><a href="#" class="text-secondary">Breach types</a></h3>
<!-- 2 blok -->
<div class="col-md-3">
<div class="card my-3" style="height: 90%;">
<canvas id="stackedBarChart" width="320" height="160"></canvas>
<canvas id="stackedBarChart" width="300" height="200"></canvas>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Breaches across industry</a></h3>
<p class="card-text">This chart compares breaches across different industries. Each bar represents an industry, and segments within the bar represent different breach types within that industry. It helps visualize the composition of breaches within various industries.</p>
Expand All @@ -153,11 +153,11 @@ <h3 class="card-title"><a href="#" class="text-secondary">Breaches across indust
<!-- 3 blok -->
<div class="col-md-3">
<div class="card my-3" style="height: 90%;">
<div id="map" style="width: 100%; height: 400px;"></div>
<div id="map" style="height: 400px;"></div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Map</a></h3>
<p class="card-text">This map-based visualization shows the geographical locations where breaches occurred. It uses markers or other representations to indicate breach locations across different countries or regions, providing a spatial understanding of breach occurrences.</p>
<!-- zastanowic sie czy przycisk ma cos robic -->
<p class="card-text">This map-based visualization shows the geographical locations where breaches occurred. It uses markers to indicate breach locations across different countries or regions, providing a spatial understanding of breach occurrences.</p>

</div>
</div>
</div>
Expand All @@ -184,7 +184,7 @@ <h1>About us</h1>
</div>
<div style="width: 80%;">
<h3>Jakub Cieplak</h3>
<p>Team Leader, role in the project: distribution of tasks, creating charts using ChartJS</p>
<p>Team Leader, role in the project: distribution of tasks, creating charts using ChartJS and implementation of Leaflet. </p>
</div>
</div>
</span>
Expand Down
228 changes: 228 additions & 0 deletions script/fetchv6 copy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
// Function to fetch country codes from JSON file
const fetchCountryCodes = async () => {
try {
const response = await fetch('countries.json');
const countryCodes = await response.json();
return countryCodes;
} catch (error) {
console.error('Error fetching country codes:', error);
return {};
}
};

// Function to convert country name to country code
const getCountryCode = async (countryName) => {
const countryCodes = await fetchCountryCodes();

const countryCode = countryCodes[countryName];
if (!countryCode) {
console.error('Unknown country code for:', countryName);
}

return countryCode;
};

document.addEventListener('DOMContentLoaded', async () => {
let data = [];
let currentPage = 1;
const perPage = 10;

const fetchAndDisplayData = async () => {
try {
const response = await fetch('https://my.api.mockaroo.com/ewd.json?key=c528a930');
data = await response.json();
displayData(currentPage);
renderPieChart();
createStackedBarChart();
renderMap();
} catch (error) {
console.error('Error fetching data:', error);
}
};

const displayData = (page) => {
const startIndex = (page - 1) * perPage;
const endIndex = startIndex + perPage;
const currentPageData = data.slice(startIndex, endIndex);

const tableBody = document.getElementById('tableBody');
tableBody.innerHTML = '';

currentPageData.forEach(entry => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${entry.breach_id}</td>
<td>${entry.breach_data}</td>
<td>${entry.company_name}</td>
<td>${entry.industry}</td>
<td>${entry.employee_count}</td>
<td>${entry.affected_customers}</td>
<td>${entry.data_type}</td>
<td>${entry.data_stolen}</td>
<td>${entry.attack_type}</td>
<td>${entry.attack_vector}</td>
<td>${entry.response_time}</td>
<td>${entry.response_cost}</td>
<td>${entry.notification_method}</td>
<td>${entry.investigation_status}</td>
<td>${entry.breach_location}</td>
<td>${entry.breach_country}</td>
`;
tableBody.appendChild(row);
});

const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

prevBtn.disabled = page === 1;
nextBtn.disabled = endIndex >= data.length;
};

const createStackedBarChart = () => {
const breachesByIndustry = {};

data.forEach(entry => {
const industry = entry.industry;
const breachType = entry.breach_type;

if (!breachesByIndustry[industry]) {
breachesByIndustry[industry] = {};
}

if (!breachesByIndustry[industry][breachType]) {
breachesByIndustry[industry][breachType] = 1;
} else {
breachesByIndustry[industry][breachType]++;
}
});

const labels = Object.keys(breachesByIndustry);
const datasets = Object.keys(data.reduce((acc, entry) => ({ ...acc, [entry.breach_type]: true }), {})).map(breachType => ({
label: breachType,
data: labels.map(industry => breachesByIndustry[industry][breachType] || 0),
}));

const ctx = document.getElementById('stackedBarChart').getContext('2d');

new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets.map((dataset, index) => ({
label: dataset.label,
data: dataset.data,
backgroundColor: `hsla(${(index * 50) % 360}, 70%, 50%, 0.8)`, // Adjust color as needed
})),
},
options: {
scales: {
x: { stacked: true },
y: { stacked: true },
},
},
});
};

const renderPieChart = () => {
const breachTypeCounts = countBreachTypes(data);
const labels = Object.keys(breachTypeCounts);
const counts = Object.values(breachTypeCounts);

const ctx = document.getElementById('breachPieChart').getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: 'Breach Types',
data: counts,
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
],
}],
},
});
};

const countBreachTypes = (data) => {
const counts = {};
data.forEach(entry => {
const type = entry.attack_type;
if (counts[type]) {
counts[type]++;
} else {
counts[type] = 1;
}
});
return counts;
};

document.getElementById('prevBtn').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
displayData(currentPage);
}
});

document.getElementById('nextBtn').addEventListener('click', () => {
const totalPages = Math.ceil(data.length / perPage);
if (currentPage < totalPages) {
currentPage++;
displayData(currentPage);
}
});
const renderMap = async () => {
mapboxgl.accessToken = 'pk.eyJ1Ijoia3VibG8iLCJhIjoiY2xyMTdsNzB5MG1hbzJscG5iamd3ejBmaSJ9.0UcVFIoilWiDqg52khwJxQ'; // Replace with your Mapbox access token

const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11', // Choose a map style
center: [0, 0], // Initial map center coordinates [longitude, latitude]
zoom: 1, // Initial zoom level
});



map.on('load', async () => {
// Loop through data to plot breach locations
for (const entry of data) {
if (entry.breach_location && entry.breach_country) {
try {
// Log data before geocoding request
console.log('Geocoding:', entry.breach_location, entry.breach_country);
const countryCode = await getCountryCode(entry.breach_country);

if (!countryCode) {
console.error('Unknown country code for:', entry.breach_country);
continue; // Skip geocoding if country code is unknown
}

const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(entry.breach_location)}.json?country=${entry.breach_country}&access_token=${mapboxgl.accessToken}`);
const geoData = await response.json();

if (geoData.features && geoData.features.length > 0) {
const coordinates = geoData.features[0].center;
const popupText = `${entry.breach_location}, ${entry.breach_country}`;

// Add marker at the geocoded coordinates
new mapboxgl.Marker()
.setLngLat(coordinates)
.setPopup(new mapboxgl.Popup().setText(popupText))
.addTo(map);
} else {
console.error('No coordinates found for:', entry.breach_location);
}
} catch (error) {
console.error('Error geocoding:', error);
}
}
}
});
};

fetchAndDisplayData();
renderMap(); // Call the renderMap function after fetching the data
});
Loading

0 comments on commit 7653de0

Please sign in to comment.