CDC – National Center for Health Statistics – Data Visualization Gallery

While working as a Web Developer / Designer for the CDC / National Center for Health Statistics / Office of Information Services (OIS) at the headquarters in Hyattsville, MD I created this “CDC – NCHS – Data Visualization Gallery” webpage as a way to showcase the various Data Visualizations that the CDC – National Center for Health Statistics offered. I proposed this in one of our daily meetings at the NCHS Office of Information Services (OIS) and I created it from scratch using an innovative animated “roll-over button” technique that I created using CSS3 and HTML5 and would allow for a brief description of each visualization when rolled over along with a responsive grid layout that adjusts to screen size or device as well as making the webpage fully section 508 compliant, navigable using keyboard controls, and accessible to screen readers.

Click the link below to view and interact with a fully functioning archived version of the CDC – National Center for Health Statistics – Data Visualization Gallery in a separate window:

Task

In order to highlight the various new Data Visualizations that CDC NCHS was using to disseminate U.S. health statistics I proposed and created this “Data Visualization Gallery” as a single webpage location to showcase the various different types of visualizations. To create this webpage I used HTML5 / CSS3 transitions in order to create innovative types of roll over buttons that animate and display a description of the visualization when rolled over and then link to the different data visualizations when clicked. I also did the layout by creating a web responsive grid for the buttons that automatically adjusts based on the screen size or device being used. I also made all of the navigation keyboard accessible as well as making the buttons fully section 508 compliant using WAI-ARIA controls. This received positive feedback from the NCHS Director as well as the head of the NCHS Office of Information Services (OIS) and it is currently still being used in production live on the NCHS website.

Skills

  • UI / UX Design & Development
  • Web Design & Development
  • HTML / HTML5
  • CSS / CSS3
  • Section 508
  • WAI-ARIA
  • Animation
  • Transitions
  • Dreamweaver
  • Photoshop
  • Graphic Design
  • XHTML
  • JavaScript
  • jQuery

View and interact with fully functioning archived versions of the CDC – National Center for Health Statistics – Data Visualization Gallery in the embedded iframe below.