Hi, I'm Court:

This project was created in December 2021 as the final project for a course (MAP 673: Interactive Design for Web Mapping).

Inspired by work in The Pudding and the New York Times, I wanted to explore a scrollytelling library and create a narrative to pair with the maps I had prepared.

I used scrollama.js for the scrollytelling element. The maps were made with Leaflet.js using data from the Washington Post's ARCOS API.

I learned how to work in R/RStudio to use the API.

This mapless geospatial processing tool uses Mapbox GL JS and Turf.js to take a user-inputted address and return the nearest hospital and its distance from the search point. Data is sourced from USGS.

Give it a try below by searching a U.S. address.

This map, best suited for desktop view, was created to demonstrate use of Leaflet marker cluster groups. The color palette comes from Chroma, and the color styles are coded with visual coordination in mind.

Data for this project was cleaned using Mapshaper and GDAL/ogr on the command line, along with various Node.js packages.

The basemap was created with OpenStreetTiles and CARTO Voyager tiles. The data is sourced from Austin's Open Data Portal.

In creating the "Where is it hottest in Miami-Dade County?" map, I ran into several challenges and unknowns. While vector temperature data exists for county averages, I needed to use remote satellite data to make this county map on the more granular level.

Remote sensing data is anything but pretty. It's traditionally difficult to map raster data due to the large file sizes of geoTIFFs.

For this map, I learned how to use Google Earth Engine to pull in remote sensing data. I used GEE to calculate the average land surface temperature of Miami-Dade County based on each day of summer 2021. I exported the data as a geoTIFF, which I brought into QGIS, where I trimmed the data precision, aggregated similar values, and recasted my raster data as vector data. From here, I exported a geojson file and brought that file into Flourish.

I chose the color scheme carefully for this map. I did not want to create an alarmist graphic, but I wanted to use colors that were both accessible and could accurately depict the reality of the situation.

Scrollytelling: Miami Temperature Map by Historic HOLC Grades

Inspired by this New York Times story, I set out to learn how to visualize temperature data by isolating areas of interest on user interaction.

This map was made by extracting raster data with Google Earth Engine. I used QGIS to dissolve the data, trim the precision, and convert to vector data. I used QGIS to clip the vector data to each HOLC grade's polygon areas. I then exported each layer as an 8-bit geoTIFF and uploaded the tilesets to Mapbox. I used Mapbox's storytelling documentation to learn how Mapbox GL JS and scrollama.js can work together to create the interactive experience you see in the map.