Bay invasive plants project, Week One

Wednesday, June 17, 2015

As the Creative Code Fellowship got underway, I spent much of the first week zeroing in on the case studies that I want to examine with this project, then gathering data for each case, while determining the best sources to use. My research can be found in the Google doc below.

As I gathered data on the first few case studies, I began plotting the points on a map to see what it might look like initially. I added the data into Leaflet using D3, leveraging the D3SvgOverlay plugin. I'm not sure if I'll use Leaflet or not-- I like the built-in zoom and pan, and the ability to add layer groups. However, the D3 overlay layers are currently a bit jumpy. This is a known issue that I could work around. I've built the map as it currently stands using only D3, as well, so right now my options are open.

I added in points of origin for the invasive species plotted so far (Perennial Pepperweed and Highway Iceplant), and began adding some popups with images of the plants.

A main focus throughout will be on creating a fluid narrative that takes viewers through the impacts of the invasive plants, case study by case study. Adding a timeline with brushing functionality will help in that regard, as the data will be able to be viewed temporally. As the project progresses, I'll likely add animation for each case study that moves the viewer through each stage.

The development of the site can be tracked at


An unorganized list of things to do, some of which I've started on:

  • determine data sources, pull together data
  • map species point/polygon data
  • add timeline to show data over time, with brushing functionality
  • add infoboxes with images, links to journal articles, other media
  • add layers for each case study
  • add fluid narrative that takes viewers through impacts, case study by case study
  • decide if I want to use leaflet or just D3
  • create visualizations of data that aren't map based
  • title for project-- current thought: Invasive Ricochet
  • overall UI/structure of project-- switching between map and other vis


I now have the basic structure of the map interface built out, but over the next week will determine if I want to use the Leaflet build or the D3-only build. I'll finish collecting and plotting all of the data for the first two or three case studies, and will add the timeline brush/slider. I'll begin sketching options for the animation of case studies and how they might look- with infoboxes and other elements. Thinking about other ways to visualize the data will also be a priority, and I'll start sketching and/or coding ideas.