chrisgonzalez

Graphing Tech Startups

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

Overview

Working with Christian from MUSA creative in Miami, this project for Urban.US graphs some of the leading startups in the technology space. Using a circular plot, companies are positioned according to their customers (consumers, businesses, or government) and their focus area. This graph was built using d3js and open-source web technologies.

Part 1: Building the visuals

After setting up my digital workspace, I began constructing the graph. Using SVG for its ease in setting up circular graph coordinates, I drew each pie-wedge arc with its labels and decorative elements.

Fig. 1 - Basic shapes and arcs

Part 2: Plotting companies

In the supplied data, some companies belonged to more than one segment of the graph (Business to Business, Business to Consumer, Business to Government), and some others belong to more than one focus "orbit."

With this in mind, I placed companies that spanned multiple segments along the edge between the two segments (only one company belonged to all three segments). The first segment used to identify the company takes precedence, the second merely positions it closer to the adjacent border.

Fig. 2 - Companies in a radial distribution based on index

My second task in plotting these companies was their distribution from the center point of the graph. I wanted to space the companies evenly actoss the arc, but vary their radius from the center of the circle for visual interest.

Using random placement presented a few problems. First, the companies would appear in a completely different location on every page load. This is disadvantageous for repeat visits. Second, random distribution presents the possibility of overlap and unappealing clustering of points. I wanted the distribution to appear organic, but maintain a sensible sort of spacing.

Being familiar with some basic sound wave synthesis, I looked to sine and cosine waves to place the dots. By progressing through a sin wave oscillation and using irregularly-spaced intervals, a visually interesting oscillation can occur. In this case, I'm using the index of the company within the overall array of companies, combined with custom divisions of 2Π as an increment. The effect provides a visually interesting distribution that will persist with the data set. Even segmenting or subsecting the data will persist the companies' positions.

Fig. 3 - Companies with varied radius distribution

Part 3: Subsecting Data

Using Twitter's typeahead plugin and a visual list of tags supplied in the data, users can filter the companies on the plot to see and explore a smaller subset. After setting up the d3 code to render a collection of companies, this task was as simple as sending a smaller set of data through the visualization code.

Fig. 4 + 5 - All companies and a filtered subset (respectively)

Part 4: Delivery

This project is hosted as a static set of assets on an Apache server. In the past, I've not been too concerned with minifying code for such small projects. This one, however, is of a proprietary nature and the amount of client-side JavaScript actually detracts from the performance of the page on first-load. Seeking a simple solution for delivery, I decided to go with Buildify.js for its simplicity and hackability.

I ended up writing a tiny script in my build script to allow for JavaScript and CSS files nested within comments in my source code to be concatenated and minified for distribution. This let me keep my original HTML, JS, and CSS files flexible while developing- using the actual html file as the source of reference for the final build.