Resultatet efter undersökningen av visualisering av heatmaps med olika JavaScript-bibliotek har öppnat upp flera olika dörrar till olika undersökningar och experiment. När flera undersökningsmetoder sker leder det till en ökad förståelse om visualisering och alla involverade tekniker i denna undersökning.
I denna undersökning har geospatialdata från FIRMS använts för ger mer förståelse om hur det är möjligt att visualisera geospatialdata i from av heatmaps. Däremot har endast D3.js och Heatmap.js använts för att skapa heatmaps och det finns förmodligen mer metoder att visualisera geospatialdata. Därför är det värt att utföra en undersökning som jämför flera olika metoder för att se ifall det finns en mer effektiv metod än de som har testats i denna undersökning. En liknande undersökning skulle därför bli längre då flera metoder och verktyg kommer att användas vilket leder till flera mätningar mellan visualiseringsmetoderna. Användningen av FIRMS var bara ett exempel på användningen av geospatialdata och i framtiden är det även intressant att använda en annan typ av dataset som innehåller mer information vilket leder till en större möjlighet att visualisera mer data i form av en heatmap.
46
Exempelvis användes endast latitud, longitud och brightness i denna undersökning men det är även möjligt att använda andra alternativa värden istället för brightness. Alternativa värden kan exempelvis vara folkmängd vilket leder till möjligheten av att använda interaktivitet. Undersökningen är baserad på en specifik lösning av heatmaps och det finns flera lösningar till att visualisera geospatialdata i form av heatmaps. Det vill säga att D3.js ger en stor frihet till utvecklare vilket leder till att det finns flera olika visualiseringstekniker för att skapa en heatmap. I framtiden är det därför viktigt att testa en annorlunda lösning jämfört med den som används i denna undersökning för att skapa mer förståelse om hur D3.js fungerar och hur det går att optimera visualiseringsverktyget.
Jämförelse mellan olika JavaScript-bibliotek som hanterar kartor var en faktor som var planerad men senare borttagen på grund av tidsbrist. Denna faktor kan ge ytterligare förståelse om hur utritningstider påverkas med ytterligare faktorer. I detta arbete har endast Leaflet.js använts men det finns flera bibliotek att använda sig av, exempelvis Google Maps och Open Layers. Det finns kanske flera metoder att konstruera en karta som går att använda vid visualisering av heatmaps? Genom att gå in djupt i detalj blir det möjligt att dra mer säkra och precisa slutsatser vilket inte är möjligt att göra i detta arbete.
På grund av tidsbrist har hela datamängden varit synlig i alla mätningar men ifall mer tid fanns tillgänglig skulle ytterligare mätningar ske där bara delar av datamängden finns synlig på kartan. På grund av att zoomning och förflyttning är vanliga funktioner på heatmaps är detta ett område som är intressant att inkludera i studien.
En ytterligare faktor som skulle vara intressant att inkludera i studien är användningen av olika webbläsare. I detta arbete har Google Chrome används som webbläsare för att utföra alla mätserier men i framtiden är det värt att undersöka ifall Mozilla FireFox, Windows Edge och Brave ger ett annorlunda resultat eller inte. Resultatet från en liknande undersökning kan ge mer förståelse om hur olika webbläsare presterar mot varandra och kan underlätta för privatpersoner och företag att välja den webbläsare som bäst passar deras behov.
Att skapa nya visualiseringstekniker och vidareutveckla redan befintliga bibliotek för visualisering är väldigt viktigt för att optimera och effektivisera visualisering av all typ av data. Därför är forskning inom detta område väldigt viktigt för att underlätta visualisering vilket senare kan hjälpa oss människor att förstå och dra samband mellan olika typer av data. Exempel på samhällsnyttan som visualisering ger är förståelsen om hur Covid-19 har sprits under år 2020. Att visualisera heatmaps som förändras med tiden är därför ett viktigt verktyg att använda sig utav vid hanteringen av geospatialdata och är även ett intressant område att undersöka.
47
Referenser
Agafonkin, V., n.d. Leaflet — an open-source JavaScript library for interactive maps [WWW Document]. URL https://leafletjs.com/ (accessed 1.28.20).
Ali, S.M., Gupta, N., Nayak, G.K., Lenka, R.K., 2016. Big data visualization: Tools and challenges, in: 2016 2nd International Conference on Contemporary Computing and Informatics (IC3I). Presented at the 2016 2nd International Conference on Contemporary Computing and Informatics (IC3I), pp. 656–660.
Berndtsson, M., Hansson, J., Olsson, B., Lundell, B., 2008. Thesis Projects: A Guide for Students in Computer Science and Information Systems, Second Edition. ed. London: Springer-verlag.
Bostock, M., n.d. D3.js - Data-Driven Documents [WWW Document]. URL https://d3js.org/ (accessed 2.21.20).
Bostock, M., Ogievetsky, V., Heer, J., 2011. D3 Data-Driven Documents. IEEE Trans. Vis.
Comput. Graph. 17, 2301–2309.
Bourhis, P., Reutter, J.L., Suárez, F., Vrgoč, D., 2017. JSON: Data model, Query languages and Schema specification, in: Proceedings of the 36th ACM SIGMOD-SIGACT-SIGAI Symposium on Principles of Database Systems, PODS ’17. Association for Computing Machinery, Chicago, Illinois, USA, pp. 123–135.
Butkiewicz, M., Madhyastha, H.V., Sekar, V., 2014. Characterizing Web Page Complexity and Its Impact. IEEEACM Trans. Netw. 22, 943–956.
Chasseur, C., Li, Y., Patel, J.M., 2013. Enabling JSON Document Stores in Relational Systems, in: WebDB.
Chen, L., Zhou, H., 2016. Research and application of dynamic and interactive data visualization based on D3, in: 2016 International Conference on Audio, Language and Image Processing (ICALIP). Presented at the 2016 International Conference on Audio, Language and Image Processing (ICALIP), pp. 150–155.
Davies, D.K., Ilavajhala, S., Wong, M.M., Justice, C.O., 2009. Fire Information for Resource Management System: Archiving and Distributing MODIS Active Fire Data. IEEE Trans. Geosci. Remote Sens. 47, 72–79.
Driscoll, W.C., 1996. Robustness of the ANOVA and Tukey-Kramer statistical tests. Comput. Ind. Eng., Proceedings of the 19th International Conference on Computers and Industrial Engineering 31, 265–268.
Eichinski, P., Roe, P., 2014. Heat Maps for Aggregating Bioacoustic Annotations, in: 2014 18th International Conference on Information Visualisation. Presented at the 2014 18th International Conference on Information Visualisation, pp. 88–93.
FIRMS [WWW Document], 2020. URL https://firms.modaps.eosdis.nasa.gov/map (accessed 1.23.20).
Godfrey, P., Gryz, J., Lasek, P., 2016. Interactive Visualization of Large Data Sets. IEEE Trans. Knowl. Data Eng. 28, 2142–2157.
48
Haara, A., Pykäläinen, J., Tolvanen, A., Kurttila, M., 2018. Use of interactive data visualization in multi-objective forest planning. J. Environ. Manage. 210, 71–86.
Heatmap.js [WWW Document], n.d. . Heatmapjs Dyn. Heatmaps Web. URL https://www.patrick-wied.at/static/heatmapjs/ (accessed 1.27.20).
Hennig, P., Berger, P., Meinel, C., Pirl, L., Schulze, L., 2014. Exploring emotions over time within the blogosphere, in: 2014 International Conference on Data Science and Advanced Analytics (DSAA). Presented at the 2014 International Conference on Data Science and Advanced Analytics (DSAA), pp. 587–592.
Heydt, M., 2015. D3.js By Example. Packt Publishing, Birmingham, UK.
Ito, E., Ozono, T., Shintani, T., 2017. Adaptable Web Presentation System with Layered Canvas Synchronization Mechanism for Scalability, in: 2017 6th IIAI International Congress on Advanced Applied Informatics (IIAI-AAI). Presented at the 2017 6th IIAI International Congress on Advanced Applied Informatics (IIAI-AAI), pp. 453–458. James, J.A., Moh, T.-S., Edwards, C.A., 2016. Web-Based Visualization of Marine
Environmental Data: Performance Analysis of a MatPlotLib Implementation, in: 2016 International Conference on Collaboration Technologies and Systems (CTS). Presented at the 2016 International Conference on Collaboration Technologies and Systems (CTS), pp. 288–293.
Jin-Yi Cai, Nerurkar, A., Min-You Wu, 1998. Making benchmarks uncheatable, in: Proceedings. IEEE International Computer Performance and Dependability Symposium. IPDS’98 (Cat. No.98TB100248). Presented at the Proceedings. IEEE International Computer Performance and Dependability Symposium. IPDS’98 (Cat. No.98TB100248), pp. 216–226.
Kadadi, A., Agrawal, R., Nyamful, C., Atiq, R., 2014. Challenges of data integration and interoperability in big data, in: 2014 IEEE International Conference on Big Data (Big Data). Presented at the 2014 IEEE International Conference on Big Data (Big Data), pp. 38–40.
Krasner, G.E., Pope, S.T., Systems, P., 1988. A Description of the Model-View-Controller User Interface Paradigm in the Smalltalk-80 System 35.
Lancor, L., Katha, S., 2013. Analyzing PHP frameworks for use in a project-based software engineering course, in: Proceeding of the 44th ACM Technical Symposium on Computer Science Education, SIGCSE ’13. Association for Computing Machinery, Denver, Colorado, USA, pp. 519–524.
Leff, A., Rayfield, J.T., 2001. Web-application development using the Model/View/Controller design pattern, in: Proceedings Fifth IEEE International Enterprise Distributed Object Computing Conference. Presented at the Proceedings Fifth IEEE International Enterprise Distributed Object Computing Conference, pp. 118–127.
Lekies, S., Kotowicz, K., Groß, S., Vela Nava, E.A., Johns, M., 2017. Code-Reuse Attacks for the Web: Breaking Cross-Site Scripting Mitigations via Script Gadgets, in: Proceedings of the 2017 ACM SIGSAC Conference on Computer and Communications Security, CCS ’17. Association for Computing Machinery, Dallas, Texas, USA, pp. 1709–1723. Liere, R., Adriaansen, T., Zudilova-Seinstra, E., 2009. Trends in Interactive Visualization:
49
Lin, B., Chen, Y., Chen, X., Yu, Y., 2012. Comparison between JSON and XML in Applications Based on AJAX, in: 2012 International Conference on Computer Science and Service System. Presented at the 2012 International Conference on Computer Science and Service System, pp. 1174–1177.
Liu, Z.H., Hammerschmidt, B., McMahon, D., 2014. JSON data management: supporting schema-less development in RDBMS, in: Proceedings of the 2014 ACM SIGMOD International Conference on Management of Data, SIGMOD ’14. Association for Computing Machinery, Snowbird, Utah, USA, pp. 1247–1258.
Lu, W., Ai, T., Zhang, X., He, Y., 2017. An Interactive Web Mapping Visualization of Urban Air Quality Monitoring Data of China. Atmosphere 8, 148.
Lumley, J.W., 2013. Functional, extensible, svg-based variable documents, in: Proceedings of the 2013 ACM Symposium on Document Engineering, DocEng ’13. Association for Computing Machinery, Florence, Italy, pp. 131–140.
Maurus, M., Hammer, J.H., Beyerer, J., 2014. Realistic heatmap visualization for interactive analysis of 3D gaze data, in: Proceedings of the Symposium on Eye Tracking Research and Applications, ETRA ’14. Association for Computing Machinery, Safety Harbor, Florida, pp. 295–298.
Ocariza, F.S., Pattabiraman, K., Mesbah, A., 2015. Detecting Inconsistencies in JavaScript MVC Applications, in: 2015 IEEE/ACM 37th IEEE International Conference on Software Engineering. Presented at the 2015 IEEE/ACM 37th IEEE International Conference on Software Engineering, pp. 325–335.
Pano, A., Graziotin, D., Abrahamsson, P., 2018. Factors and actors leading to the adoption of a JavaScript framework. Empir. Softw. Eng. 23, 3503–3534.
Pryke, A., Mostaghim, S., Nazemi, A., 2007. Heatmap Visualization of Population Based Multi Objective Algorithms, in: Evolutionary Multi-Criterion Optimization. Presented at the International Conference on Evolutionary Multi-Criterion Optimization, Springer, Berlin, Heidelberg, pp. 361–375.
Saxena, P., Akhawe, D., Hanna, S., Mao, F., McCamant, S., Song, D., 2010. A Symbolic Execution Framework for JavaScript, in: 2010 IEEE Symposium on Security and Privacy. Presented at the 2010 IEEE Symposium on Security and Privacy, pp. 513–528. Shen, Z., Wei, J., Sundaresan, N., Ma, K.-L., 2012. Visual analysis of massive web session data,
in: IEEE Symposium on Large Data Analysis and Visualization (LDAV). Presented at the IEEE Symposium on Large Data Analysis and Visualization (LDAV), pp. 65–72. Song, Y.-F., Li, C., Xuan, K., Liu, G.-F., 2018. Automatic data archiving and visualization at
HLS-II. Nucl. Sci. Tech. 29, 129.
Spence, R., 2001. Information visualization: an introduction. Springer, Cham, New York: Addison-Wesley.
Srinivasan, S.S., Anderson, R., Ponnavolu, K., 2002. Customer loyalty in e-commerce: an exploration of its antecedents and consequences. J. Retail. 78, 41–50.
Stack Overflow [WWW Document], 2013. . Read Extern. Local JSON File JavaScript. URL https://stackoverflow.com/questions/19706046/how-to-read-an-external-local- json-file-in-javascript (accessed 4.7.20).
50 Tukey, J.W., 1977. Exploratory data analysis.
Vuejs.org [WWW Document], 2019. URL https://vuejs.org/ (accessed 1.27.20).
Wang, R., Perez‐Riverol, Y., Hermjakob, H., Vizcaíno, J.A., 2015. Open source libraries and frameworks for biological data visualisation: A guide for developers. PROTEOMICS 15, 1356–1374.
Wohlin, C., Runeson, P., Höst, M., Ohlsson, M.C., Regnell, B., Wesslén, A., 2012. Experimentation in Software Engineering. Springer-Verlag, Berlin Heidelberg. Xia, X.-K., Zhang, J., Xiang, W., 2017. Realization of Cross - platform Minority Language
Translation System Based on H5. Presented at the 3rd Annual International Conference on Electronics, Electrical Engineering and Information Science (EEEIS 2017), Atlantis Press.
I
Appendix A - index.html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<title>D3.js with Leaflet.js</title>
<!-- Stylescheet link -->
<link rel="stylesheet" href="d3-style.css" />
<!-- Load Leaflet.js --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512- xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw 2yuvEpDL9wQ==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512- gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1A JPuV0CPthew==" crossorigin="" ></script>
<!-- Load D3.js and Geo Projection plugin -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
</head>
<body>
<!-- Element where the map will be placed -->
<div id="map"></div>
<!-- Link to app.js -->
<script src="/D3/scripts/app.js"></script>
</body> </html>
II
Appendix B - app.js
// Function to load JSON-dataset asynchronously. function loadJSON(callback) {
// Create new instance of XMLHttpRequest.
let obj = new XMLHttpRequest();
// Specifies type of data.
obj.overrideMimeType("application/json");
// Get the JSON-file.
obj.open("GET", "../Dataset/dataset.json", true);
// EventHandler for readystatechange.
obj.onreadystatechange = function() {
// Defining the error.
if (obj.readyState == 4 && obj.status == "200") { // Throw an "InvalidStateError". callback(obj.responseText); } }; // Initiates request. obj.send(null); } function render() { // Set start-time.
let t0 = new Date().getTime(); loadJSON(function(response) {
// Parse the response in JSON-format.
let jsonData = JSON.parse(response);
// Create Map with Leaflet.js and set view & zoom.
let map = L.map("map").setView([20, 20], 3);
// Create a layer and get the actual map.
L.tileLayer( "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.p ng", { attribution: "D3.js", maxZoom: 12 }
// Add to the map-variable. ).addTo(map);
// Add Leaflet-SVG to the map.
III
// Select element "map" and "svg". d3.select("#map")
.select("svg")
// Select all elements that will be drawn. .selectAll("dataPoints")
// Add dataset as data() parameter. .data(jsonData)
// Create empty elements for the data. .enter()
// Append new element "circle" depending on size of the dataset. .append("circle")
// Linking coordinates from dataset to D3.js. .attr("cx", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).x; })
.attr("cy", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).y; })
// Add radius & style. .attr("r", function(d) { if (d.brightness <= 305) { return "4"; } else if (d.brightness <= 310) { return "4.3"; } else if (d.brightness <= 320) { return "4.6"; } else if (d.brightness > 321) { return "5"; } })
// Depending on brightness, give according fill-color. .style("fill", function(d) {
if (d.brightness <= 305) { return "rgb(0,191,255)"; } else if (d.brightness <= 310) { return "rgb(0,255,0)"; } else if (d.brightness <= 320) { return "rgb(255,255,0)"; } else if (d.brightness > 321) { return "rgb(255,0,0)"; } }) .attr("fill-opacity", 0.4);
IV
// Set Stop-time.
let t1 = new Date().getTime();
// Calculate difference & store in localStorage for TamperMonkey.
let result = t1 - t0;
localStorage.setItem("result", result); console.log(localStorage);
// Update function to render everything and update when the map changes
.
function Update() {
// Select all d3-circles d3.selectAll("circle")
// Update the coordniates depending on pan & zoom. .attr("cx", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).x; })
.attr("cy", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).y; });
}
// Fire "Update()" when a move has ended on the map.
map.on("moveend", Update); });
}
// Run script. render();
V
Appendix C - d3-style.css
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; } #map { width: 100%; height: 100%; }VI
Appendix D - index.html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<title>Heatmap.js with Leaflet.js</title>
<!-- Stylescheet link -->
<link rel="stylesheet" href="heatmap-style.css" />
<!-- Load Leaflet.js libraries -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet- 0.7.3/leaflet.js"></script>
<!-- Load Heatmap.js & Leaflet-pluging for Heatmap.js -->
<script src="/HeatmapJS/scripts/heatmap.js"></script>
<script src="/HeatmapJS/scripts/leaflet-heatmap.js"></script>
</head>
<body>
<!-- Element where the map will be placed. -->
<div id="map"></div>
<!-- Link to app.js. -->
<script src="/HeatmapJS/scripts/app.js"></script>
</body> </html>
VII
Appendix E - app.js Heatmap.js
// Function to load JSON-dataset asynchronously. function loadJSON(callback) {// Create new instance of XMLHttpRequest
let obj = new XMLHttpRequest();
// Specifies type of data.!
obj.overrideMimeType("application/json");
// Get the JSON-file.
obj.open("GET", "../Dataset/dataset.json", true);
// EventHandler for readystatechange.
obj.onreadystatechange = function() {
// Defining the error.
if (obj.readyState == 4 && obj.status == "200") { // Throw an "InvalidStateError". callback(obj.responseText); } }; // Initiates request. obj.send(null); } function render() { // Set start-time.
let t0 = new Date().getTime(); loadJSON(function(response) {
// Parse the response in JSON-format.
let jsonResponse = JSON.parse(response);
// Store the parsed JSON-data.
let jsonData = { data: jsonResponse };
// Create LeafletLayer that holds the actual map.
let leafletLayer = L.tileLayer(
"https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.p ng", { attribution: "Heatmap.js", maxZoom: 12 } );
VIII
// Variable for config-values let config = { radius: 0.4, maxOpacity: 0.8, blur: 0.3, scaleRadius: true, useLocalExtrema: true,
// Linking JSON-file-values to Heatmap.js variables. latField: "latitude",
lngField: "longitude", valueField: "brightness"
};
// Create Layer and place config-variable in that overlay.
let heatmapLayer = new HeatmapOverlay(config);
// Create Map with Leaflet.js and set view, zoom and layers.
let map = new L.Map("map", { center: new L.LatLng(20, 20), zoom: 3,
layers: [leafletLayer, heatmapLayer] });
// Set the data to the data from loadJSON().
heatmapLayer.setData(jsonData); let t1 = new Date().getTime();
// Calculate difference & store in localStorage for TamperMonkey.
let result = t1 - t0;
localStorage.setItem("result", result); console.log(localStorage);
}); }
// Run script. render();
IX
Appendix F - index.html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Import stylesheet for Leaflet.js -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512- xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw 2yuvEpDL9wQ==" crossorigin="" /> </head> <body>
<!-- Error-message if noscript is enabled. -->
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't wor k
properly without JavaScript enabled. Please enable it to continue. </strong>
</noscript>
<!-- built files will be auto injected -->
<div id="app"></div>
</body> </html>
X
Appendix G - Heatmap.vue D3.js
<template><div>
<!-- Element that contains map & visualization. -->
<div id="map"></div>
</div> </template> <script>
// Import D3.js & Leaflet.js and refer them as d3 & L. import * as d3 from "d3";
import L from "leaflet"; export default {
name: "Heatmap", mounted() {
// Export method into index.html.
this.init(); },
methods: { init() {
// Function to load JSON-dataset asynchronously. function loadJSON(callback) {
// Create new instance of XMLHttpRequest. let obj = new XMLHttpRequest();
// Specifies type of data.
obj.overrideMimeType("application/json"); // Get the JSON-file.
obj.open("GET", "./dataset.json", true); // EventHandler for readystatechange. obj.onreadystatechange = function() { // Defining the error.
if (obj.readyState == 4 && obj.status == "200") { // Throw an "InvalidStateError". callback(obj.responseText); } }; // Initiates request. obj.send(null); } // Set start-time.
XI
loadJSON(function(response) {
// Parse the response in JSON-format. let jsonData = JSON.parse(response);
// Create Map with Leaflet.js and set view & zoom. let map = L.map("map").setView([20, 20], 3); // Create a layer and get the actual map. L.tileLayer( "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{ y}.png", { attribution: "Vue.js + D3.js", maxZoom: 12 }
// Add to the map-variable. ).addTo(map);
// Add Leaflet-SVG to the map. L.svg().addTo(map);
// Select element "map" and "svg". d3.select("#map")
.select("svg")
// Select all elements that will be drawn. .selectAll("dataPoints")
// Add dataset as data() parameter. .data(jsonData)
// Create empty elements for the data. .enter()
// Append new element "circle" depending on size of the dataset. .append("circle")
// Linking coordinates from dataset to D3.js. .attr("cx", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).x; })
.attr("cy", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).y; })
XII
// Add radius & style.
.attr("r", function(d) { if (d.brightness <= 305) { return "4"; } else if (d.brightness <= 310) { return "4.3"; } else if (d.brightness <= 320) { return "4.6"; } else if (d.brightness > 321) { return "5"; } })
// Depending on brightness, give according fill-color. .style("fill", function(d) {
if (d.brightness <= 305) { return "rgb(0,191,255)"; } else if (d.brightness <= 310) { return "rgb(0,255,0)"; } else if (d.brightness <= 320) { return "rgb(255,255,0)"; } else if (d.brightness > 321) { return "rgb(255,0,0)"; } }) .attr("fill-opacity", 0.4); let t1 = new Date().getTime();
// Calculate difference & store in localStorage for TamperMonkey. let result = t1 - t0;
localStorage.setItem("result", result); console.log(localStorage);
XIII
// Update function to render everything and update when the map changes. function Update() {
// Select all d3-circles d3.selectAll("circle")
// Update the coordniates depending on pan & zoom. .attr("cx", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).x; })
.attr("cy", function(d) {
return map.latLngToLayerPoint([d.latitude, d.longitude]).y; });
}
// Fire "Update()" when a move has ended on the map.