CDC Maps

Design, Development

The CDC needed a new way for its centers to upload and visualize data. I built a comprehensive solution to help them do that.

View Project

I. Power to the Users

Users upload a spreadsheet or JSON data file and display that information on a map of the United States. There is support for filtering, toggling, numeric and categorical mapping as well as many other visual configuration options like color schemes.

This empowers users to display a lot of different kinds of data easily.

II. Robust Editor

Users needed an intuitive and robust way to quickly build their maps. I designed and built an editor interface that enables them to quickly make the changes they need and instantly see the results on the map.

React-icon Created with Sketch.

III. React

Even though CDC.gov is a traditional website and not a single page application, React was the best tool to handle managing all the different changes to the DOM quickly and efficiently. The map embeds on CDC.gov pages (and other websites if sharing is enabled) through an iframe.

This allows all of the code for the maps to be self contained without worry of affecting other elements on the site.

code-icon

IV. Open Source

The CDC values open source software and it was considered imperative that I build this mapping software on open source foundations. Because of this, we are now in a position where I am actively working towards open sourcing CDC Maps for all to use.

Conclusion

The tool that this replaced had been in use for over 5 years, was very buggy and difficult for users to navigate. Some centers preferred to use outside vendors to do this kind of visualization instead of the built in tool.

Now centers are very happy to use this tool and there is a long roadmap of planned additional features to make this a mature, featureful piece of software that is used across the CDC and eventually the federal government and beyond.

Need a
  • UI Design
  • React
  • JavaScript
  • Front-end

expert?

Let's Talk

Close

Let's Talk

I’m excited to start a conversation about your project and how I can help your business reach its goals.
  • This field is for validation purposes and should be left unchanged.