home

DS Interactive Infographics DS User Experience DS Erik Adigard DS Sha Hwang

= Interactive Infographics: Directed Study One =

[[image:661-infographics-sp10:infographic2medium.jpg link="@http://www.creditloan.com/infographics/consumer-fraud-in-the-united-states/"]]
This second infographic is a combination of a few different formats and data sets which combine to show the reader the type of industry most involved in consumer fraud and the type of victim most involved in that consumer fraud. It uses pie charts and mainly a bar chart to show who is involved in the fraud. The purpose here is clearly to inform the audience about what industries are most involved in consumer fraud and who is most affected by it.

This infographic is analyzing the satellites and debris that are currently orbiting the Earth and which country these objects belong to. Russia, China and the United States seem to have the most objects in space with China having the most space debris, Russia with the most dysfunctional satellites and the United States with the most functioning satellites. This is clearly a static infographic and is meant to show viewers what humans have put into space and who is doing it (the title suggests some kind of Orwellian Big Brother purpose). The format here seems to be a bubble chart layed out over a not to scale map of the earth and space.

/* hey davey. Neat infographic about over fishing. Looks applicable to your thesis maybe? http://awesome.good.is/transparency/web/0905/trans0509nomorefishinthesea.html yeah yeah. You need this. http://awesome.good.is/transparency/web/0905/trans0509throughthegyre.html -Jess */

 "Assign 01 - Static Infographics Mini-Proposals"
**Proposal 1: Great Pacific Garbage Patch Static Infographic** My first proposal is to do a static infographic about the so called “Great Pacific Garbage Patch” that is floating in the middle of the pacific ocean. Some estimates claim it is between one and two times the size of Texas, and roughly eighty percent of the trash is from sewage and drainage into the ocean. I have found some decent statistics and other infographics relating to the size and scale of this trash accumulation. I would like to perhaps further show the size of this trash accumulation maybe in relation to other masses, not just Texas. I would also like to break down what the accumulation is made up of: types of plastics, what kind of waste etc. The visualization method for this infographic would likely be a combination map and pie chart that would show scale of the accumulation as well as breakdown of trash.

**Research Links:** [] __[] __ **Inspiration:** []

[]

[|__http://awesome.good.is/transparency/web/1001/haitian-aid/flat.html__]

**Proposal 2: Television Statistics**

=
For my second proposal I wanted to find a really interesting and unique statistic that would also be fun to design visually. I found the results of a Nielsen study about Television and Health that could possibly be interesting graphically. The major statistics include how much television the average American watches a day, a week, a year and over an typical sixty five year lifetime. It may be interesting to couple this with statistics on how much time Americans spend at work and on vacation. If possible, it would be interesting to compare these stats to those of other countries. In terms of visualization method, a stacked bar chart could work if I was to include information on television, work and vacation. Otherwise, a series of simple bar charts could suffice for the television information. ======

**Inspiration:**
[|http://awesome.good.is/transparency/web/1002/ibm-rail/flat.html] [] []

**Research Links:** **[] ** [][][|This is really cool!] [|Awesome {Time Mag infographic}]

=
This infographic is very well designed and extremely easy to use and understand. The **purpose** of this infographic is to show the immigration patterns of people moving to the Netherlands, and the emigration patterns of those people who moved from the Netherlands between 1995 and 2008. Furthermore, it also shows from which countries and the amount of people from these countries, that immigrated and emigrated. The user can see the timeline of the total amount of immigrants and emigrants, or they can choose by clicking on the map, the timeline for each individual country represented. The **Format** in this case is clearly interactive. The **visualization method** here is combination of mapping and a simple line chart. ====== ======   ======

=
<span style="font-size: 1em; font-weight: normal; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">My idea for the static infographic is about the “Great Pacific Garbage Patch” in the Pacific Ocean. This floating island of garbage is formed by the coalescence of five currents that link to form this gyre in the ocean. 90% of the trash floating in it is plastic, and 80% of all the trash gets there via runoff into the oceans from drains and sewage systems. The size of the gyre is estimated at around 1,760,000 square kilometers, or around three times the size of Spain and Portugal put together. Some estimates claim that the accumulation of this plastic debris covers about 10% of the surface area of the Pacific Ocean. **The purpose** of this infographic is to show the relative size of the gyre, and to show the contents (types of trash accumulated) within the gyre. I was considering comparing the size of the gyre to other masses of similar size using a series of small multiples that would be positioned beneath the map and pie chart portion. **The visualization method** I think would be most appropriate is a combination of a map and pie graph. I would like to explore types of visualizations, but for now, I think this combination makes the most sense for the purpose of the infographic. ======

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 2 - My Preliminary Data Visualizations**
<span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; cursor: pointer; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 10px; padding-top: 0px;">Click this for the Link <span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; cursor: pointer; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 10px; padding-top: 0px;">Click this for the Link <span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; cursor: pointer; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 10px; padding-top: 0px;">Click this for the Link <span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; cursor: pointer; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 10px; padding-top: 0px;">Click this for the Link <span style="background-attachment: initial; background-clip: initial; background-color: initial; background-origin: initial; background-position: 100% 50%; cursor: pointer; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 10px; padding-top: 0px;">Click this for the Link

 =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 03 - Static Infographic - Brainstorm Sketches** = =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 03 - Static Infographic - Design Roughs** =  =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 4 - Static Infographic - Design Refinements** = =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 05 - Static Infographic - Design refinement** =

 =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 06 - Static Infographic - Design Final** = = Module 06 - Static Infographic - Design Final (Redesigned for Spring Show 2010) =

=<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 06 - Interactive Infographic Re-design - Rough Storyboard** = (I've decided to go ahead and change my idea and go with an idea about movie theater movie times). =<span style="font-size: 1.4em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**Module 07 - Interactive Infographic Re-design - Storyboard Refinements** =  Below are my six storyboard detailing an interactive infographic about movie times and information at the Sundance Kabuki Theater on March 26th. Shows and times are searchable by time and movie. When the user slides the slider at the bottom when time is selected, the blue and white area above details what movie is playing and if it is an all ages time or 21 and over. When the user switches to search by title, the user can click on the title of the movie, and the timeline below will show when that movie is playing.











=Module 08 - Interactive Infographic Re-design - Rough=

slightlyslantedfloor.com/kabuki

slightlyslantedfloor.com/xmlgenerator

=Module 09 - Interactive Infographic Re-design - Refinement=



Link not available right now: swf only works when Fla file is open. (See Instructor Folder).

=Module 09 - Three Ideas for Final Project= 1. Interactive infographic exploring the top five fish with the highest levels of mercury contamination and the top five types of fish that are safe to eat and contain the lowest amount of mercury contamination.

2. <span style="font-family: sans-serif,helvetica,sans-serif;">Infographic on world [|fisheries] production for 2005. The tonnage from capture and [|aquaculture] is listed by country for the top ten countries.

<span style="font-family: sans-serif,helvetica,sans-serif;"> 3. Interactive redesign of my static infographic dealing with the Great Pacific Garbage patch. This would be a map based visualization exploring the contents of the GPGP.

<span style="font-family: sans-serif,helvetica,sans-serif;"> Stamen Site: @http://www.16thandmission.com/

=Module 10 - Interactive Infographic Re-Design Final=

Link works most of the time online. If it is not see the instructor folder.

@http://www.slightlyslantedfloor.com/kabuki/kabuki.swf ...and this is the link in the html page but for some reason it does not load my xml?!?!?!

[]

=Mod 10 - Rough Mini-proposal for Final Project=

For my final interactive infographic for this class I plan to create a visualization that will apply directly to my final thesis project. The purpose of this infographic is to relay in very clear detail which fish are safest to eat and which fish have a high concentration of mercury content in them. My plan is to take the five fish that are safest to eat and provide some information on what they are and where to find them. Next, i’ll show the five fish with the highest levels of mercury content, show what they are, where they are from and how to avoid them or eat them safely. I currently have data on what these fish are, but I will have to supplement that data with more informational data about the levels of mercury content that they have. This project will highlight simplicity and will likely use images of the various fish in a display area that will load the image when the user clicks on the list. The interactivity in this project will be the loading of content when the user clicks on the lists.

=Module 11 - Final Project Proposal=

=Module 12 - Data Visualizations for Final Project= This is a series of visualizations using Many Eyes from IBM to discover what the data I am using might look like in a visual format.

=**Module 12 - Storyboards for Final Project**= This is a rough storyboard for my final interactive infographic.

=Module 13 - Rough Digital Design for Final Project= Link Updated: This is actually the link to the final .swf design. JPG shown here is a representation of the first rough digital design: @http://slightlyslantedfloor.com/info.swf =**Module 13 - Revised Storyboards for Final Project**= Second draft of final storyboards.

=Module 14 - Final Design= @http://slightlyslantedfloor.com/FullscreenDreamweaver.html (embedded in HTML) <span style="background-attachment: initial; background-clip: initial; background-color: initial; url(http: //www.wikispaces.com/i/a.gif); background-origin: initial; background-position: 100% 50%; background-repeat: no-repeat no-repeat; cursor: pointer; padding-right: 10px;">@http://slightlyslantedfloor.com/info.swf (Final .swf: Larger Size)

=Final Screenshot:= = DS User Experience: Directed Study Two = Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Module 7 Module 8 Module 9 Module 10 Module 11 Module 12 Module 13 Module 14 Module 15 = = = DS Erik Adigard: Directed Study Three/ Concept and Design = <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 1 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 2 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 3 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 4 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 5 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 6 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 7 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 8 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 9 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 10 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 11 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 12 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 13 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 14 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 15


 * User Walkthrough** https://gomockingbird.com/mockingbird/index.html?project=euxk5z8
 * Mindmap** http://mindomo.com/view.htm?m=834aee04b4614fd78e8da02e6075d134

Potential Color Palettes:

For Design Option2: wireframes_11/8/10

media type="custom" key="7467235"

NEWS: How does ocean acidification work? <can i embed this video into my project?> media type="custom" key="7705529"

= DS Sha Hwang: Directed Study Four/ Interactive Infographics and Data Visualization = <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 1 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 2 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 3 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 4 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 5 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 6 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 7 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 8 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 9 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 10 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 11 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 12 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 13 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 14 <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Module 15

Module 8: Parsing massive data file on coral reef bleaching (2000-2010) and beginning to make attemps at visualizing it in an interactive format.

media type="custom" key="7405125" This data from NOAA coral reef watch is a snapshot of the full dataset. This part shows variation in coral hotspot activity for islands in Australia over the period of 2000-2010.

media type="custom" key="7437733"

Cayman Islands Hot Spot Data. Looks like this shows for sure that as SST (Sea Surface Temp.) rises, so does the degree of coral reef bleaching. The size of these bubbles is indicative of the size of the hotspot (degree to which bleaching is occuring).

media type="custom" key="7463531" media type="custom" key="7558677" Stage 1 of project