Study project to implement an interactive web mapping application for the visualisation of time dependent statistical data. The development of "percentage of population using the internet", "human development index (HDI)" and "population size" between 2000 and 2016 are shown. Additionally types (classes) of similar internet usage developments have been calculated and are visualized, while the number of types can be selected by the user.
Leaflet (http://leafletjs.com/) is used for the mapping functionalities.
The basemap is a choropleth map based on a prepared Polygon-GeoJSON (using QGIS) with the countries as shapes and the respective HDI for the years 2000-2016 as data. Additionally the African Great Lakes are visualized on top as an own layer for orientation. For an appropriate zoom functionality the default zoom functionality of Leaflet is extended to custom zoom levels suitable for the continent of africa (https://gist.github.com/croxton/6248586).
While the basemap can be implemented using core leaflet functionality, the symbols (pie charts, circle diagrams) are realized using the Leaflet-Semicircle extension (https://github.com/jieter/Leaflet-semicircle). A circle with white transparent fill and fitting stroke is overlaid with a semicircle representing the actual amount of population using the internet. The size of the circle corresponds to the actual population size. The color represents the type of internet usage development. Data and positioning coordinates are stored in a JSON file.
To enable the animations a timeslider would be needed if time data is stored in a "date" datatype. Thus in this case the dates (years) are only attributes, a Rangeslider (http://rangeslider.js.org/) from 2000-2016 is appropriate. The slider starts automatically when the website is opened and stops when the year 2016 is reached but the user can interact with the slider, too. Each time a 'tick' is reached functions are called to restyle map elements whose styles depend on the year (choropleth [HDI], symbols [internet usage, population])
Using the label checkboxes in the legend the country names and the capital names can be displayed on the map. For both datasets Point-GeoJSONs store the position where the label should be as well as the text. For realization a CircleMarker is combined with a permanent Tooltip. The layers are generated when the page is loaded and added (addTo) respectively removed (removeLayer) from the map if the user ticks/unticks the checkbox.
D3 (https://d3js.org/) is used for most interactive mapping functionalities.
This realization is a combination of the examples https://gist.github.com/benjchristensen/2579599 and https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e. The normalised development of the percentage of population using the internet (2000 -> 0, 2016 -> 1) were classified into 2-10 diverse classes of countries with similar internet development. The mean value of each year was calculated for cohesive countries. The connection of those means are visualised in the line chart. For all selectable number of classes a JSON is prepared defining new lines (data/type_means/cluster_7.json). With this diagrams can better be understood what kind of growth of internet usage a country has (linear, exponential etc.). Additionaly, the Symbology.json describing the semicircle symbols contains information about the exact class a country underlies depending the number of classes. This information is used to color the semicircle symbols depending on the line color of the associated type of internet development.
As additional information about the similarity of countries regarding their internet development it's possible to view the dendrogram of the hierarchical classification. Cohesive countries are encapsulated in colorized rectangles depending on the selected number of classes. This is implemented using a modal (https://www.w3schools.com/howto/howto_css_modals.asp).
This realization was implemented by hacking this example https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e to the required functionality. The map symbols are scaled proportional depending on the population size. Thus the depicted population of each circle can be derived by a linear function dependent on the radius. This function is derived through the datapoints (minimum mapping radius / minimum population) and (maximum mapping radius / maximum population).
This website was developed using Mozilla Firefox which is capable of dynamicly loading local JSON files as done in the D3 and leaflet parts. Other browsers like Google Crome prohibit such an asynchronous call of local files. To test or change the application in browsers like Chrome you need to run the content in a testserver. An example for setting up a testserver using Python is discribed in the following (adapted from https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server):
1. Open your command prompt. Check if Python is installed (python -V). If not install (IMPORTANT: check the "Add Python xxx to PATH" checkbox)
2. Navigate to the downloaded DynamicAfrica folder (cd ./DynamicAfrica)
3. Enter the command to start up the server in that directory:
If Python version returned above is 3.X:
python -m http.server
If Python version returned above is 2.X:
python -m SimpleHTTPServer
4. By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL localhost:8000