This reflection explores the functionality of two different web mapping applications: D3.js and Leaflet.js. Both of these applications require mastering the coding required which often involves a steep learning curve, however knowing the possibilities of web mapping applications that are software agnostic as well as open-source are useful for mapping enthusiasts. In what follows I point out the broad strokes characterizing the language frameworks for each of these applications and explore the impact they may have on mapping historical phenomena related to my research.
The visualization capabilities that D3.js has for creating maps are extensive. These maps use a data format known as GeoJSON which allows for the encoding of geographic information. D3.js also uses TopoJSON which is a compressed data format similar to GeoJSON. What D3.js does is analyze these data for use in representing its contents as Scalable Vector Graphics paths which render and visualize the map. SVG paths can create lines, curves, arcs and more to visualize data representing an array of phenomena.
Here is an example of D3.js code that renders the outline of the United States:
The map looks like this:
A map like this would be useful for displaying county specific data on a national scale- making it very well suited for a choropleth map. If a user wanted to map historical population data this would serve as a useful base. For my own study area however I am concentrated more on the borderlands of northeastern North Carolina and Southeastern Virginia so this extent would not work on the finer scale data I wish to use on enslaved runaways. However, if I wanted to compare the population of enslaved people in each county using historical census data this map would be quite suitable.
D3.js uses an array of geometry to represent geographic data such as points, line strings, and polygons. Although these elements can be made interactive through further detailed coding elements, in order to create a D3.js map one “needs to define the size of the map and the geographic projection to use, define an SVG element, append it to the DOM(document object model), and load the map data using JSON with map styling done via CSS.”
Leaflet.js also offers the ability to use a Web Mapping Service tile layers to further enhance the appearance and range of interactivity with Leaflet maps. By using multiple tile layers users can view them all at once further increasing the potential of interpretation of geographic data held within the map.
Adding data to Leaflet.js maps are concerned with three types of geometry: points, lines, and polygons. In Leaflet, users may also add markers to represent geographic data.
Here is an example of Leaflet code for a map of Toronto, Canada:
The map looks like this:
This map can be overlaid with additional map tilelayers to enrich the information possibilities and interpretive potential of the map.
For a beginner, Leaflet tends to offer the widest range of visualization without the heavy coding. If I wanted to map sites of bondage, that is to say, sites where enslaved people were forced to live and labor for the benefit of enslavers, I could input a geoJSON file that holds that information into the Leaflet code.
Both D3.js and Leaflet.js are web mapping applications that provide opportunity to visualize geographic data in exciting ways. With the proliferation of tutorials now available online and a growing list of coding sourcebooks, users may find just the right recipe in D3 or Leaflet to visualize a dynamic map of their dreams.
 Pinde Fu. Getting to Know Web GIS. Redlands, CA: Esri Press, 2020.