D3.js and Leaflet.js for Web Mapping

The rapid increase in innovation within web mapping technology has provided users with an array of choices for mapping geographic information for data visualization. Web GIS is a “combination of the web and GIS using web technologies such as Hyptertext Transfer Protocol, Hypertext Markup Language, Uniform Resource Locator, Javascript, Web Graphics and more.”[1] Indeed, the range of so many web mapping applications that can be used can be jolting to users, but the functionality of these applications can help users realize which type can best serve their needs.

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.
D3.js., an “open source JavaScript library,” provides “the facility for manipulating HTML documents based upon data that uses Javascript as the language for implementing the mapping of data to documents.”[2] Its functionality is not limited to maps as it allows users to create visualizations of many kinds to including bubble plots, bar graphs, complex shapes, and more.
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:

Figure 1 https://observablehq.com/@d3/u-s-map

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.”[3]

Leaflet.js is an open-source JavaScript library aimed at creating interactive maps. Using elements such as Tile layers, Vector Layers, Pop ups, and custom functions, Leafllet.js provides a diverse range of visualization opportunities for mapping enthusiasts.

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:


Figure 2 https://joshuafrazier.info/leaflet-basics/

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.

[1] Pinde Fu. Getting to Know Web GIS. Redlands, CA: Esri Press, 2020.
[2] Michael. Heydt. D3.Js by Example : Create Attractive Web-Based Data Visualizations Using the Amazing Javascript Library D3.Js. Community Experience Distilled.
[3] Tomislav Bacinger, “A Map to Perfection: Using D3.js to Make Beautiful Web Maps.” Toptal Engineering Blog. December 09, 2014. Accessed April 1, 2020. https://www.toptal.com/javascript/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps.

One thought on “D3.js and Leaflet.js for Web Mapping

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s