Here are some studies of Maps and Data-Binding. The interactive products below use HTML, CSS, JavaScript, and JQuery. I am also exploring ArcGIS and their suite of tools. Additional technologies are listed under each item.

Credits – I have also used the following Maptiles (from Open Street Maps Contributors) and Code Libraries: Leaflet.js (created by Vladimir Agafonkin) and D3.js (created by Mike Bostock). Note: D3 works with modern browsers; therefore, it does not work with Internet Explorer (IE) 8 and below.

• Map of France
  • Uses D3, TopoJson, Tooltip, and Toggles in the Legend
  • Shows Places of Interest in France

• Illuminated Coasts: Lighthouses of Albania
  • Applying a mapping tutorial to Albania, the map uses Python, Geopandas, Matplotlib, Osmnx, and Shapely. Other features available in OSM
  • Shows Lighthouses along the coast of Albania

• Map with a Before and After View
  • Uses REST, Web Map Services (WMS), Map Tiles, and the Leaflet Library
  • Map Source: Open Street Maps

• Map with Different Styles
  • Uses REST, Web Map Services (WMS), Map Tiles, and the Leaflet Library
  • Map Source and Map Styles: Open Street Maps

• Map with Clusters
  • Uses the Leaflet Library and customized Clusters
  • Map Source: Open Street Maps

• Map uses Leaflet Library using Json
  • Shows Airport Dataset with Clusters
  • Shows 2 Earthquake Datasets pulled from USGS

• Maps using GeoJson data format, REST Services, USGS’s API, and AJAX Queries
  • REST Services (#1): uses REST Services
    • Pulls data weekly from USGS using REST Services
    • In other words, when the Audience opens the webpage, the dataset is automatically updated straight from USGS’s server every time when the webpage opens.
  • Map with REST Services and Clusters (#2)
    • Similar to Map (#1) with the difference that the Data is clustered (using the Leaflet JQuery Library) to simplify the Visualization
    • It uses a different basemap called Open Street Maps: Topo
  • Maps similar to Map (#1) with the added feature of the data being filtered in three different ways
    • Map #3: Filter created by Function after the dataset had been pulled in
    • Map #4: Before the data is pulled in, the dataset is Filtered by Maximum Gap using USGS’s API
    • Map #5: same as #4 but with 2 Filters applied (by Maximum Gap and by MMI/Modified Mercalli Intensity)
    • Map #6: uses Asynchronous and Callback which results in faster process times

• Choropleth Map
  • Uses D3, TopoJson, and Tooltip
  • Choropleth shows different ranges of data (e.g. land mass in square miles)

© Trang Lam