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…

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…

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. …

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.

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.

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.

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. …