719 Infographics @719infographics-blog - Tumblr Blog

Infographics round-up Infographics inspiration

In this article, I have showcased some of the most creative infographics and data visualization examples, along with some really effective tools to help you improve your skills in creating infographics. Enjoy the journey!

http://richworks.in/2010/04/50-most-stunning-examples-of-data-visualization-and-infographics/

Infographics maps Infographics inspiration

The best examples of infographics are maps which clearly illustrate the topic in a very clear and succinct manner — and stand out from the rest. Here is a collection of some great examples of infographical maps for your inspiration and perhaps future art projects. Enjoy!

http://www.noupe.com/graphics/more-creative-and-useful-infographic-maps.html

Social media infographics Infographics Inspiration

Fantastic news for all you social media addicts out there because we’ve complied a total of 60 infographics that are related to social media! Here are some of the interesting one "How are mobile phones changing social media", "Journey of a Tweet", "Evolution of Twiter" and a lot more. Prepare to get information overwhelmed.

http://www.hongkiat.com/blog/55-interesting-social-media-infographics/

Movies Flowcharts

Everybody loves a well thought out flowchart with lots humor built-in. And these 5 ads from Canal+ has just that, plus they are very well executed. (Click on each flowchart to see the large version).

Made by BETC EURO RSCG, Paris, France

http://bumbumbum.me/2011/04/11/canal-flowcharts-animated-horror-action-short-porno/

The biggest touchscreen at University of Groningen, Netherlands

It works like this: “The cameras, illuminators and projectors are all placed behind a large, cylindrical screen (formally used as a 3D theater). Due to the diffuse layer on the front side of the screen, the cameras cannot see clearly through the screen, however whenever someone touches the screen, enough of the infrared light is reflected back to see the tip of the finger. The difference is very small (on a scale of 0-255 the difference is only 2 or 3), but still big enough to be seen by the computers that analyze the images from the cameras.”

Planetary iPad music library visualization

Planetary is our all-new, stunningly beautiful way to explore your music collection, available only on iPad. Visit planetary.bloom.io for download links and more information.

Info Touch Interactive Design by Jeff Han

An Explorative Multi-Touch Interface for Tagged Photo Collections.

Picturae 2.0 by Taprick, interaction designer

Picturae 2.0 is a tangible way to paint virtually.

It is inspired by the techniques of drawing, painting, printing, graffiti, ... and is built upon a digital process that enables an infinity of features and extensions.

The cloth painting is the screen, the brush is a specific can. Sometimes mouse, other times brush, the specific can allows the user to paint or to change or select a parameter of the brush, his size or color.

Everything is done on the screen.

Interactive Game Bus Stop by Yahoo

Yahoo installed 20 72-inch digital video touch screens throughout the San Francisco downtown area as part of a limited time advertising campaign Bus Stop Derby.

Discover Australia Interactive Floor by Lumen Digital

Lumen created a walk-on interactive map of Australia that brings natural, indigenous and outback Australian experiences to life using the footprints of the visitor to trigger visuals. As the visitor walks through the sea the water ripples and their footprints are left across the desert sands as they explore the continent. The interactive floor is designed to pack-down for easy relocation anywhere on the globe.

If your UI even vaguely resembles an airplane cockpit, you’re doing it wrong.

John Gruber

MULTITOUCH WATER FOOTPRINT Interactive Infographic

Link to the .fla file: http://db.tt/xnN3vi8 Link to the HQ .swf file: http://db.tt/e2zfimE Link to the LQ .swf file: http://db.tt/tojE2IL

My project consists in an interactive infographic about water availability and consumption in the world. In particular, it focuses on 5 countries: Australia, Italy, USA, Canada and United Kingdom.

The data analyzed is the water supply, the water usage, the water per person and the population of each country.

Since the infographic is meant to be displayed on a big vertical surface, the concept for this project is to put the user in front of an hypothetical big glass, full of water droplets, where the user can play with them to gather new information. The hypothetical space beyond the glass could be filled with water, based on different statistics.

The project consists of a unique screen, where different droplets are displayed, each one representing a country or a kind of data. The user can interact with it dragging different droplets out of these main drops and merging them together to get detailed information about the data combination; this new information will be presented in form of a stack graph, made of a visually rendered water level that will fill the screen. The user will be allowed to select multiple kinds of data, that will stack upon each other, allowing to compare them. It is also possible to refresh the screen from the selected data through a “flush button” (shaped as an arrow pointing down), that will clear the screen from the displayed water levels.

To help the user understand how the infographic works, it has been added a small help button (shaped as a question mark) which will overlap the interface with some simple instructions of how to use it.

The project is supposed to be shown at “The Cube” in the QUT  Science  and  Technology  Precinct (http://www.qut.edu.au/scitechprecinct/video/scitech-main.html), an area with big multitouch screens, open to everyone. This would bring the interaction not to a single person at the time, but to different people. The audience would probably be mostly Australian, that's why I added Australia to the list of countries; Italy has been added as well, because it's where I come from... The rest are interesting cases of water consumption.

I focused mainly on the interaction and in creating a new way to interact, taking as much advantage as possible of the multitouch capabilities. I preferred to experiment as much as possible with the multitouch.

Data sources:

"2004 Global Clean Water Supply as % of Population," Pacific Institute "Access to Safe Drinking Water, by Country, 1970 to 2004," Pacific Institute "Everything About Water," Pacific Institute "Water Content of Things", Pacific Institute

Inspiration sources:

http://www.informationisbeautiful.net/play/snake-oil-supplements/ http://www.waterfootprint.org/?page=files/InfoGraphics

The following posts provide more detailed explanations of all the design process, design decisions and more technical information:

INFOGRAPHY INTERACTION AESTHETICS TECHNICAL INFORMATION REFLECTIONS

#kib230 #Assesment 2

INFOGRAPHY

The infography is based on X and Y axis, where the X basis represents the water supply data and the Y axis represents the water usage data, while the dimensions of the countries' drops represent their total population (as a bubble chart). Since my main focus was on the interaction with the interface, I decided to keep all this information on the background, making it accessible through the help button.

The possibility to compare different data is based on stackgraphs, going from the bottom to the top. They can be compared as they overlap each other; the exact value of the “bar” is written on the information text on the right side of the screen.

One of the first ideas was to use different colors for each drop, but the drops wouldn't have merged well together.

#kib230 #Assesment 2

INTERACTION

The interaction with the infographic should appear quite intuitive once you start dragging different drops. Seen on a normal computer monitor, with the interaction of only the mouse, the interaction would probably not be as much intuitive as on a big multitouch screen. In the making of this interface, I focused a lot in the interaction based on multiple inputs; this is why the infographic wouldn't work as good on a mouse-driven interface. To interact with it, to gather information is necessary to interact at least twice, with to inputs: dragging a drop from a selected country and another drop from a selected kind of data.

Being the final product an infographic, I thought that the best way to take advantage of the multitouch was to give to the user the opportunity to select which data wants to be shown; the entire interaction is based on this. Moreover, being this interface intended to be displayed on a very large screen, the interaction would probably not be with only one user, but between many of them. This is why I wanted to focus on an interaction which would have involved multiple inputs from different people. From my point of view, interaction in not only the one between the human and the computer, but (especially in a case like the one of The Cube) between people in front of the computer.

Thinking about this, the interface is built in a manner that would allow one user to interact with all of it or multiple people side by side.

Not being able to test it directly, it was difficult to decide what size the elements on the stage should have and the distance between all of them.

#kib230 #Assesment 2

AESTHETICS

In the making of the project, I tried to have as less interface as possible. Hypothetically, it should be spontaneous for the people in front of a big screen full of droplets, to start dragging them. Anyways, a help button is available to make clear how the interaction works.

I based the visuals on how the water would interact on a vertical surface: it would be possible to drag it, it would leave a trail and, when two different drops would be merged, they would flow down. From this point of view, a lot of effort has been put into the feeling of the interaction; it had to seem real water dragged, merging together when needed; it would probably work even better on a multitouch display, I haven't tried though. While the countries drops are presented on a graph disposition, the data type drops are all grouped, to not mix and confuse them with the others. Moreover, they are the only ones merging together, just to differentiate them a bit more than the others.

The flush button was intended to be on the bottom right, as the usual position of the trash bin in Windows systems, since it's a way to “erase” the data; though, it would have overlapped some other data, and it was moved to the left.

The little droplets that keep flowing down are meant to keep the interface always active, and attract people attention; they also give a better visual hint of what the infographic is about (water), that the simple static drops won't do (the final “render” is not that realistic).

Everything is based on a fresh blue color scheme, just to remind the theme of water.

#kib230 #Assesment 2

TECHNICAL INFORMATION

How it works, briefly.

Clicking on a drop, a droplet is created in the mouse position and immediately dragged. Once created two of them (from different drops), on the release of the mouse, the hittest will be checked to see if any drop are overlapping. If positive, the current hittest would lead to a creation of a new tween for a specified “wave” and will start a function for the hittesting drops to flow down the screen. When out of sight, the drops will be removed, making it possible to create new ones. The flush buttons, simply resets the waves by creating a new tween bringing them to the initial position (off the stage).

Creation of new droplets:

They are created (at the mouse position) when clicking on one of the big drops, and with them a new function is created to make them immediately dragged.

Example code:

function italydropfunction(e:MouseEvent) { if (numitaly == 0) { numitaly++; parent.highlight_ita.visible = true witaly = new droplet(); witaly.x = stage.mouseX; witaly.y = stage.mouseY; addChild(witaly); witaly.drop1.startDrag(); witaly.drop1.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown); witaly.drop1.addEventListener(MouseEvent.MOUSE_UP, ihittester); } }

Droplet trails:

These are simply 5 circles, where only the first one is dragged by the mouse, while the rest just follow each other at different speeds.

Example code:

stage.addEventListener(Event.ENTER_FRAME, moving); function moving(evt:Event):void { new Tween(drop2, "x", Strong.easeOut, drop2.x, drop1.x, 0.02, true); new Tween(drop2, "y", Strong.easeOut, drop2.y, drop1.y, 0.02, true); new Tween(drop3, "x", Strong.easeOut, drop3.x, drop2.x, 0.02, true); new Tween(drop3, "y", Strong.easeOut, drop3.y, drop2.y, 0.02, true); new Tween(drop4, "x", Strong.easeOut, drop4.x, drop3.x, 0.01, true); new Tween(drop4, "y", Strong.easeOut, drop4.y, drop3.y, 0.01, true); new Tween(drop5, "x", Strong.easeOut, drop4.x, drop4.x, 0.01, true); new Tween(drop5, "y", Strong.easeOut, drop4.y, drop4.y, 0.01, true); new Tween(drop6, "x", Strong.easeOut, drop4.x, drop5.x, 0.01, true); new Tween(drop6, "y", Strong.easeOut, drop4.y, drop5.y, 0.01, true); }

Combining data:

When the mouse is released, it will check if there are any hits going on and what kind it is, with a hittest function. Based on which drops are hitting, a determined action will follow.

Example code:

function uhittester (e:MouseEvent):void { var uhittarget:MovieClip = e.currentTarget as MovieClip // +italy if (numitaly == 1){ if (uhittarget.hitTestObject(witaly.drop1)) { trace("usage+italy!"); new Tween(parent.iuwave, "y", Strong.easeOut, parent.iuwave.y, 718.8, 30, false); wusage.addEventListener(Event.ENTER_FRAME, ugodown) witaly.addEventListener(Event.ENTER_FRAME, igodown) }} // (…) }

Water look (and merging):

This is created just by putting all the drops under a same movieclip, and then adding some inner dropshadow and bevel filter to it.

Example of code:

var myBevel:BevelFilter = new BevelFilter(); myBevel.angle = 65; myBevel.type = BitmapFilterType.INNER; myBevel.distance = 6; myBevel.highlightColor = 0x333333; myBevel.shadowColor = 0xFFFFFF; myBevel.blurX = 10; myBevel.blurY = 10; myBevel.quality = 0; var myShadow:DropShadowFilter = new DropShadowFilter(); myShadow.distance = 10; myShadow.color = 0x000000; myShadow.blurX = 10; myShadow.blurY = 10; myShadow.quality = 3; myShadow.angle = 275; myShadow.inner = true; myShadow.alpha = 0.82; myShadow.quality = 0; infographic.filters = [myBevel, myShadow];

Droplets continuously going down:

Are droplets like the other, by they have been added some random movements down (for different speeds) and to left or right.

Example of code:

function fl_GenerateRandomNumber(limit:Number):Number { var randomNumber:Number = Math.floor(Math.random()*(limit+1)); return randomNumber; } if (drop1.y < 0) { new Tween(drop1, "x", Strong.easeOut, drop1.x, drop1.x + fl_GenerateRandomNumber(60) -30, 0.1, true); new Tween(drop1, "y", Strong.easeOut, drop1.y, drop1.y + fl_GenerateRandomNumber(60), 0.1, true);

#kib230 #Assesment 2

REFLECTIONS

Known Issues:

The first idea was to give the possibility to create multiple drops from the same drop. This has been avoided because I was having problems with the hittesting of droplets of the same kind. I was suggested to use arrays to make it, but I would have still had problems if someone had created a new drop while those of the same type where flowing down. For these reasons I kept the possibility to create only one drop at the time; I've added an highlight effect to suggest that a particular drop was already clicked and couldn't create anymore drops. This would actually help to not mess up the interface with too many elements on the screen.

Another little issue is that the “data waves” don't always work properly; sometimes they stop before they should. I couldn't find any solution; it's weird because they're movement is based simply on the creation of a new tween: they should go from they're current position to the new one. I don't know what is stopping them sometimes.

The use of filters to create a more realistic water effect makes the whole swf quite slow to render at higher resolutions; that's why I created two different version with different qualities. Removing the filters would remove any rendering problems, but the graphic look would be affected.

There's lot of code; it could be probably tidied up. I based all the interaction on simple “if” conditions, eventlisteners and hittesters.

Possible Improvements:

I wanted to add an highlight effect on the relative drop when a droplet was clicked, to make it possible to recognize one droplet from the other, without having to remember all of them. In a multitouch case it would probably be less useful, because the interaction would start and finish in one step (drag simultaneously two different drops to merge them).

The infographic could contain more countries. An idea was to create a shape of the world, and create drops from the different countries. In that case, the multitouch interactions could have been used to zoom and move around the world shape.

#kib230 #Assesment 2

Trending Blogs

Recently Viewed Blogs

719 Infographics