Introduction to the quickd3map package

quickd3map is an htmlwidget JavaScript/D3 chart library.

Installation

devtools::install_github("zachcp/quickd3map")

Usage

The quickd3map pacakge is an htmlwidget¹ that is based on the D3.js² JavaScript library. Bubblemap is a near-clone of Mike Bostock’s symbol map³ and the HTMLWidget code is inspired by the streamgraph package⁴

Making a Bubblemap

Bubblemaps place a circle at a specific geographic point and draws a circle whose radisu is the square root of the value. Bubblemaps dataframe and requires that the use specify latitute and longitude columns.

Size can be controlled using the sizecol value or can be set to a single standard size using the size option.

library(quickd3map)

bubblemap(data=uscities,
          latcol="Latitude",
          loncol="Longitude",
          namecol = "City",
          mapscale = 800,
          sizecol = "Area")

Control Size and Scale of the Map and Points

Size of the map can be controlled through the height and width, while the map scaling can be controlled by mapscale. Pointsize are determined by the square root of the value but the global size scale that maps values to ranges when actually plotting use d3’s domain and range functions. These both begin at zero but their max values can be accessed with maxdomain and maxrange.

bubblemap(data      = uscities,
          latcol    = "Latitude",
          loncol    = "Longitude",
          namecol   = "City",
          mapscale  = 400,
          width     = 450,
          height    = 300,
          sizecol   = "Area",
          legend    = NULL,
          maxrange  = 5)

Other Maps

In addition to the US map there is also World Map data that allows points to be displayed on a world map. Graticule and sphere are convenience functions. Right now I am considering how/wheterh to support other projections.

bubblemap(mapdata = "world", 
          data=uscities,
          latcol="Latitude",
          loncol="Longitude",
          mapscale = 100,
          sizecol = "Population",
          maxdomain = 1e6,
          maxrange = 5,
          legend =  TRUE,
          namecol = "City",
          graticule = TRUE,
          sphere = TRUE)