chrisgonzalez

Mapping Election Results

prototypes + products

Mapping Election Results

From GIS to maps on Election Center

Visualizing Exit Polls

Helping tell the story of elections with data

Building the Flipper Ticker

From prototype to homepage for CNN's Elections coverage

Visualizing Food Choices

Correlating glucose readings to restaurant visits

Finding Metabolic Trends

Visualizing daily metabolic trends across the years

Graphing Tech Startups

Dealing with a large data set, I solve visual and code problems

Working on the new CNN

Working as a front-end developer and interaction designer to launch a new CNN

Crafting Data Visualizations

Creating reusable visualizations for the city of Miami

Timeshifting Diabetes Data

Exploring metabolic data through different time contexts

Hacking Midi

Designing an open-source platform for mixing music

Prototyping for CNN

Designing a new way to consume breaking news on CNN.com

Making Piano Stairs

Building an interactive, playable staircase to promote healthy choices at work

Deploying a Social Billboard

Displaying Twitter votes in real-time on a Times Square billboard

Creating On-Air Galleries

Telling stories with images for CNN news

Visualizing Twitter Data

Designing interactive data visualizations for the CNN iPad app

2016

As lead Interaction Designer for CNN.com's elections coverage, I prototype and build front-end components for elections results. From maps to candidate bios to page layouts, I work on a small development team to realize designs for millions of users every day.

Senior Interaction Designer - 2

Turner Broadcasting Systems, Inc.

JavaScript
HTML
CSS
Linux
Node.js
Large-Scale Web Deployments
React.js
ES2015
NPM
Module Bundlers
Visual Design
Data Visualization
Responsive Design

2015

In 2015, I worked on my technical fluency. Drawing inspiration from Code Library and API design, visual design, and the ever-evolving landscape of fancy new production tools, I crafted front-end code and comprehensive updates to CNN.com, built a mobile application prototype for CNN, and contributed to the architecture and development of elections coverage for the 2016 Presidential Primaries.

Senior Interaction Designer - 1

Turner Broadcasting Systems, Inc.

JavaScript
CSS
HTML
Node.js
Linux
Front-End Development
Large-Scale Web Deployments
Visual Design
Data Visualization
Responsive Design
NCAA Instabracket 2015
NCAA Boss Button 2015

2014

Promoted to Senior Interaction Designer, I add to my design role by providing insights and direction for information architecture, user flows, and front-end architecture. From July through the end of the year, I worked as a Front-End Developer and Interaction Designer on the redesign of CNN.com

Senior Interaction Designer

Turner Broadcasting Systems, Inc.

Expert Interaction Designer - 3

Turner Broadcasting Systems, Inc.

JavaScript
HTML
CSS
MongoDB
Raspberry Pi
Linux
Node.js
Front-End Development
Visual Design
Data Visualization
Responsive Design
isgonzalez.com Version 2.0
PGA App - Samsung SmartTV

2013

This was a year for getting things done. I taught classes on CSS and Open-Source Technologies. I participated in two Hackathons (one at Turner, one at Yahoo!). I helped found a Maker group at Turner, learned how servers work, and got back into playing and recording music.

Expert Interaction Designer - 2

Turner Broadcasting Systems, Inc.

UI Prototyping + Interaction Design

Rimidi Diabetes, LLC

Audio Production
JavaScript
CSS
HTML
MongoDB
Raspberry Pi
Linux
Node.js
Visual Design
Data Visualization
Mobile Design
Responsive Design
Servers + Port Routing
isgonzalez.com Version 1.0

2012

In 2012, I worked on my craftsmanship- thinking beyond the bounds of any single project into the mutable nature of technology and design. I crafted semantic code, front-end architecture, modular room acoustics, and began learning piano.

Expert Interaction Designer - 1

Turner Broadcasting Systems, Inc.

JavaScript
CSS
HTML
MongoDB
WebGL
Visual Design
Mobile Design
Piano Lessons
Responsive Design
MLB PostSeason
AtWork - iPad
Image Galleries

2011

After finishing my Master's project exploring social health for Diabetics, I found an amazing job at Turner Broadcasting and took a deep dive into a new career path.

Expert Interaction Designer

Turner Broadcasting Systems, Inc.

Master of Science

Human-Computer Interaction - Georgia Tech

Teaching Assistant

3D Design - Georgia Tech

JavaScript
CSS
HTML
Visual Design
Data Visualization
Mobile Design
Teaching Assistant Curriculum
Healthcare Technologies
Cognitive Psychology
Blocks - Diabetes Data Tracking
Electronic Health Records Redesign
UAV Interface Design
Personal Site Redesign (Wordpress)

2010

In 2010, I was deep in the midst of graduate school. I decided to focus on diabetes technology for my Master's Project and found Elizabeth Mynatt as a faculty advisor. In the Fall, I landed a Teaching Assistant position with Carl DiSalvo, which got me addicted to helping people learn.

Master of Science Candidate - 1

Human-Computer Interaction - Georgia Tech

Teaching Assistant

Visual Design - Georgia Tech

Web Producer

Ivan Allen College - Georgia Tech

Processing + OOP
CSS
HTML
Visual Design
Data Visualization
Engineering Psychology
Human-Computer Interaction
Teaching Assistant Curriculum
Living Liberia Batik - Interactive Storytelling
Class Projects
Freelance Web Design

2009

In 2009, I left my job as a Flash Ad Maker for a slightly stranger job as a Master's student. In the interim, I stumbled into a role mixing live music recordings for a local podcast. In the Fall, I went back to school and began work on a memorial project for Liberia in collaboration with the Carter Center.

Multimedia Developer - 2

Screen 5ive Media, LLC

Recording + Mix Engineer

haveyouheard.net

Master of Science Candidate

Human-Computer Interaction - Georgia Tech

JavaScript
Flash ActionScript 3
Sound Design
Visual Design
Engineering Psychology
Human-Computer Interaction
haveyouheard.net mixes
shrimpsauce clothing
Tons of Flash Ads + Catalogs

2008

In 2008, I worked full time as a Flash Developer. I learned all about ActionScript, XML, and how to work on a small production team. Within 6 months, I was promoted to team lead, coordinating efforts between designers and developers to meet aggressive timelines.

Multimedia Developer - 1

Screen 5ive Media, LLC

Audio Production
Scrum/Agile
Flash ActionScript 2
PHP
JavaScript
Flash ActionScript 3
Sound Design
Tons of Flash Ads + Catalogs

2007

After finishing my Sound Design senior project in Surround Sound music mixing, I found an internship for audio production. After that, I found an internship learning Flash. I took on some freelance Sound Design and Video Editing work. Then I got promoted to a full-time Flash Developer.

Multimedia Developer

Screen 5ive Media, LLC

Flash Development Intern

Screen 5ive Media, LLC

Audio Production Intern

Creative Sound Concepts, LLC

Video Editor + Sound Designer

Freelance

Bachelor of Fine Arts - Sound Design

Savannah College of Art & design

Audio Production
Flash ActionScript 2
Sound Design
Scrum/Agile
5.1 Surround Music Mix Thesis
Sound Effects Design - Senior Film Project
Audio Installation Project

THE DISTANT PAST

Getting Started with GIS

Most of the state, district, and town maps for CNN's 2016 elections were sourced from the U.S. Census Bureau. I downloaded each map as a shapefile and went about learning how to process geographical data.

Converting Shapefiles

Each shapefile contains latitude and longitude coordinates for every path in a map. Sets of coordinates are recorded using a spatial reference system known as a projection. The projection maps latitude and longitude to points on a 2d coordinate system.

To get the shapefiles into a usable format, I created a node.js script that uses ogr2ogr to deconstruct shapefiles into GeoJSON files. Each GeoJSON is then converted to the highly optimized TopoJSON format to reduce transfer file size.

As the last step of the conversion process, I drew and exported each map (states, counties, national maps) as SVG files for use by CNN's design department.

Fig. 1 - Converting shapefiles to JSON

Drawing Maps

TopoJSON files are loaded via AJAX and run through a new projection mapping to create the paths for each map. Each state map is configurable and contains its own points of interests (cities, capitals), and projection mapping (most states use a Mercator projection, but a few (including Alaska) use Albers USA).

When drawing counties in California, each geographic division is represented in the JSON. So when drawing this map, we can iterate over each division like:

{this.state.divisions.map((division, i) => {
	return (
		<path>
			className="state-map__division"
			key={`${division.properties.FIPS}${i}`}
			d={projectionFunction(division)}
        </path>
	);
})}

The rough outline render for each state (below) was sent to the Politics team in DC for verification. A few states had changed district lines and county names since the 2014 Census- this verification step allowed us to catch the inconsistencies before we deployed the application.

Fig. 2 - Mapping all of the counties to SVG paths

Map Interactions

All geographic divisions on the maps have vote data tied to them. I staged hover/reveal transitions about 350 milliseconds apart to allow a tiny pause between seeking a division and revealing vote data in a tooltip. This pause allows users to browse geographic areas that are very close together (towns in Massachussetts for instance), keeping the seeking interaction unobstructed until the user rests on a division.

Fig. 3 - Seek + Display (click to play)

For touch devices, the tooltip is pinned to the bottom of the viewport. The user can close the pinned dialog directly or begin scrolling, which will hide the tooltip and maximize the viewable screen area.

Fig. 4 - Maps on Touch (click to play)