A walkthrough of how to create an optimized and performant responsive census tract choropleth map with Mapbox

A animated zooming video of the median household incomes, by census tract, in and around Cook County, Illinois.
A animated zooming video of the median household incomes, by census tract, in and around Cook County, Illinois.
A performant and responsive view of Median Household Income at the census tract level in the state of Illinois

One of the most common ways to visualize data is through mapping. However, in presenting data in a map format, a multitude of options must be considered. First, what type of visualization will work best? A filled (“chloropleth”) map, a symbol map, a density map, a hexbin map? The chosen form will dictate, to some extent, the performance of the final visualization.

Let’s look at a case study where the Graphicacy engineering team approached the problem of how to map 73,000+ United States census tracts of highly varied shapes and sizes. For most DIY data visualization tools, the final result…


A technical exploration into saving contact form emails into Google Sheets using AWS serverless tools

An email contact form overlaid on a congressional district map of the United States.
An email contact form overlaid on a congressional district map of the United States.

In working with the team at Grassroots Analytics, Graphicacy’s engineering team tackled a particular challenge: how to ensure minimum costs to a client while storing changing data and providing updates on fast-changing predictions. Our goal was to maximize the impact of PrimaryCast, a data visualization and mapping tool that provides predictions for the Democratic Primaries. Like many similar non-profit organizations, Grassroots Analytics needed to track this information to keep their supporters up-to-date on primary predictions and to increase their donor base.

Our mandate was to rely on an open source approach in order to ensure minimum possible cost to our…


How to use GitHub pages to host an HTTPS website and embed into Wix

An HTTPS map visualization embedded within a Wix website.
An HTTPS map visualization embedded within a Wix website.

As a bespoke data visualization firm, Graphicacy frequently get requests to build out a single data visualization component for a website that the client will embed via <iframe/> into their existing site. About 95% of the time, after building the data visualization component, we use a GitHub Action on merge to deploy the build files of the site to a static website on AWS S3. We can then hand off that url for the client to embed into their site.

On a recent project, a client came to us with a rare request to embed the visualization into a Wix


How to “disconnect” while still delivering on time

Photo by Ketut Subiyanto / Pexels.com

I always want to be able to take my laptop and work from anywhere — Amtrak, the park around the corner, the front stoop. But given that my job involves building web-based data visualizations, it isn’t always easy with little or no wi-fi. I often need to hit an API and work with the real data to get a better sense of how the visualization should look. …


An interactive geospatial and forecasting tool that provides investors with information on potential agriculture investments in Ghana.

A map of Ghana with the district of Nadowli selected and detailed maize, soybean, and rice production analytics.
A map of Ghana with the district of Nadowli selected and detailed maize, soybean, and rice production analytics.
USAID FinGAP Investment Mapping System

Summary

The New Alliance for Food Security and Nutrition is an initiative that builds upon previous commitments to abate hunger in Africa including, Feed the Future, Grow Africa, and the Global Agriculture and Food Security Program. New Alliance partners include the G8, private companies and several African countries, namely Ghana, Ethiopia, and Nigeria. Since New Alliance’s inception in 2012, over 160 companies have committed to planned investments exceeding $7 billion.

As part of New Alliance’s 2013 Progress Report Summary, private company partners reported that they faced some key challenges to deploying capital and/or increasing investments “…where the conditions are right.” …


When a disaster strikes, many businesses rush to identify affected customers and react. For example, some may offer no-fee loans, reduce or remove late fees, or take other actions to assist customers in a time of need. Identifying affected customers is essential for businesses. As I was looking for information on areas most hit by disasters like hurricanes, tornados or earthquake in the United States, it occurred to me that there must be an easy way to do this within minutes. In this age of rich and abundant data, we can practically ask and answer questions before, during, and after…


As an engineer, I’m often passed a big block of text as either a PDF or Word document and asked if I can add it into a web application. The easiest way to do this is to copy and paste into a <p/> tag, but that’s not suitable for those with a good eye for typography. When copying and pasting text, single and double quotes will default to dumb quotes, which are not typographically correct.

“Smart quotes,” or “curly quotes,” are the proper typographical way to represent quotation marks. Unfortunately, in order to save space on the keyboard, the dumb…


Within the United Kingdom there are approximately 650 constituencies, which makes for a highly detailed map. A detailed map means a larger file size and therefore more heavy processing on the client side, so when building the UK Political Atlas we needed a solution that wouldn’t slow down client-side rendering when exploring different constituencies.

Detailed view of the Amber Valley constituency

We decided on an offline approach of rendering each constituency with d3-node (which allows for static rendering with the power of d3) and then converting the rendered SVG into a PNG with sharp. Within one minute, we had 650 static PNG files of ~7kb each; compared to the 6mb GeoJSON file with which we started. Now when a user loaded a constituency detail page the browser only had to retrieve a single small file and the page would load fast even on mobile or older browsers.

SVG to PNG converter


One of the best parts about building data visualizations for the web is providing users with interactivity. Many times when looking over a PDF or a printout I find myself instinctually mousing over or clicking on an element to get more information.

Animating mouse events on area chart

TLDR; The Angular and React sample code for the below examples can be found on GitHub and an example app can be found as a static site on AWS.

With line charts, adding a transparent Voronoi diagram with d3-delaunay on top helps users interact with lines of any thickness. …


Clustering of customer interaction points over a 5 second period
Clustering of customer interaction points over a 5 second period
Reducing the visualization complexity with quad-tree clustering

At Kabbage, we provide access to small business loans for thousands of customers and, subsequently, need to provide exceptional customer service. Many times this service comes from a customer navigating our user-friendly website, but more often than not an on-the-go small business owner will want to call in and talk to a human. For our customer success agents to provide the best service, it is imperative for them to understand every interaction between our customers and our product.

Currently, our agents tab back and forth between applications — all while being on the phone with the customer. This is necessary…

Christopher Lanoue

Engineering and Innovation Director, Graphicacy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store