There are instances where 3D is necessary, though. Architects and engineers designing buildings and parts need 3D digital environments to help create their work. Some data (weather, medical, space) also has a strong 3D spatial component and looking at the data represented in 3D can be one of the best ways to do it.

One of the problems with current implementations of 3D environments for people that have to work in them is the lack of good 3D displays and interfaces.

Luckily, this is changing. One of the demo tables at VisWeek was by Z Space, a 3D display and interaction system. I sat down at the demo table skeptical, but excited at the possibilities.

 
Just looking at the screen normally produces a fuzzy double image, certainly not something that would impress you. Putting on the glasses changes everything, though. In addition to turning the double image into a 3D image, the position of the glasses is also tracked. The tracking allows you to “look around” objects and for the perspective of the scene to be perfectly calculated based on your head’s location. This type of responsiveness is amazingly realistic and made the scene feel extremely tangible.

The head tracking technology limits the screen to only work for one person, but this is a small price to pay for the experience. Another limitation is that there is no depth of field effect. All objects are constantly in focus, whether you are looking directly at them or at something far off in the distance.

 
Another amazing part of the system is the interface for interaction. The system uses a stylus with buttons, although the pen is never placed on the surface of the screen. It can be used in the 3D space in front of the screen and its position and orientation are tracked. This means that when you pick an object up, you can flip it over just by turning your hand as if you were actually holding the object. The 3D vision combined with the pen also makes it very simple to place an object exactly where you want it in space. Since you have control over up, down, left, right, forward, and back all at once, just like in the real world, and your vision shows you exactly where the object is in the 3D space, manipulation is incredibly easy.

 
Systems like this are fantastic for working with 3D digital space. One of the clumsiest parts of 3D digital spaces is the transition to the 2D display technologies we use today. Removing this clumsy transition means that people who need to work in 3D can do it well. This doesn’t mean that every new visualization should be in 3D, or that 3D charts are better. It does mean that if you have to use 3D, there’s technology out there to make it easier.

 
 
 
Drew Skau is Visualization Architect at Visual.ly, and a PhD Computer Science Visualization student at UNCC with an undergraduate degree in Architecture. You can follow him on twitter @SeeingStructure

There are countless apps out there that can accomplish the drawing part: so much so that simply choosing one can be overwhelming. Here are five that we feel offer the best range of options. Whether you want to use your drawing app for serious illustration, fun with friends, or quick brainstorming, chances are pretty good that one of the five apps below will suit your needs.

(Note: we have included multiple screenshot for each app. To view them in a slideshow format, simply click on the image in the article.)

1. xSketch

xSketch is a nice, no-frills drawing app that allows you to do a lot with the free features it offers. At first, its drawing tools may seem a little limited – you have several backgrounds to choose from, and brushes. But where the app really shines is in how you can modify those brushes. Each one can be made a wide range of sizes and, more importantly, opacities. There is also a special tool, or brush, that lets you draw dashed lines, as well as a gradient drawing tool that lets you draw… well, gradients. There is a useful dropshadow option, as well as a pre-set color palette with 16 shades that can seem like much more with judicious use of the opacity slider. You also have the option to import photos from your photo roll or take a picture yourself and use that as the background, in addition to the five canvases provided. You can then save your creations to your iPad’s photo roll, send them in an email, or post them to Facebook. Last but not least, xSketch offers a gallery mode, which allows you to organize your sketches any way you like, on an endless board. (It’s a feature we have yet to see in any other drawing app.)

In-app purchases: RGB color picker and eyedropper tool, photo effects (instagram-style): $1.99 each, or $2.99 together.

2. Bamboo Paper (Free)

Before you start, we should note that this app is best (and perhaps designed for) use with the Bamboo stylus, which can cost anywhere from $20-$30. However, it still works just fine with your finger. Bamboo is clearly designed to replicate the experience of drawing and pasting pictures in a notebook. It doesn’t provide many options – there’s a marker tool, a pen tool, a picture insertion mechanism, and one plain white background. The tools they do provide work well, though, and with its no-clutter interface the app is incredibly easy to use. You can save drawings to your iPad and email them out, but there is no social sharing option, which pretty much says it all. Chances are, the things you draw here are for your eyes only.

In-app purchases: Multiple notebooks, cloud archiving, and social sharing are upgrades offered in the full version, which costs $1.99.
Works best with: Bamboo Stylus ($20-$30).

3. Draw Something Free

If social drawing is what you’re after and you’re not planning to be productive with it, then Draw Something is the app for you. In reality, this is more of a drawing game than a drawing platform, and it’s entertaining enough for people to have really taken to it. Basically, the game pits you against one of your friends (or a random person) in a battle of drawing skill. Each player gets one simple prompt (pictured: draw a barn. Clearly, I am not an artist). Good drawings get coins, which you can then spend on a wider color palette and other in-app improvements. Again: not productive, but a fun and creative way to draw competitively.

In-app purchases: you can purchase coins (to spend on new color palettes or “bombs” that allow you to either guess words more easily or access items to draw that pay more coins. From $1.99 for 400 coins to $24.99 for 10,000 coins.

4. Paper by 53

In terms of the pure beauty of its interface, there isn’t another app that can touch 53′s Paper. Like Bamboo Paper, this app attempts to replicate the aesthetics of drawing in a notebook, but does so in a much more personal and innovative way. Users can customize the look of their notebooks, and are able to get the sensation to flipping through their pages. However, the drawing tools that come with the free version are incredibly limited. You get one precision pen, one eraser, and a nine-color palette to start. That’s it. You at least get to try the new features before you buy them, though. Plus, there is a very cool “rewind” feature that lets you retrace your steps through a drawing, as well as robust social sharing options.

In-app purchases: Additional drawing tools ($1.99 individually for 5 tools, $6.99 altogether in the “essentials pack”)

5. Sketchbook Express

The free version of the Sketchbook Pro app ($1.99) still comes jam-packed with features, and may be the best pick of any sketching app in terms of the amount of control it offers. In the free version, you have an unlimited color palette, unlimited tools to control line weight and opacity, and a very cool mirroring feature to let you unleash your inner Rorschach. Sketches save in an easy-to-navigate gallery. There are a lot of bells and whistles in this app, but only where you really want them. Everything about finding the tools and drawing you need is easy and intuitive.

In-app purchases: None, other than the upgrade to Pro.

These tools fit into three different categories: the first two are devices whose names often end in -meter and -graph (we’ll call them meters and graphs), and the third category is physical and chemical processes.

Meters don’t always do much visualization. In fact, they often do the opposite of visualization, quantifying something that is already visual. Graphs can record data, and typically show a time series in a line chart. Physical and chemical processes make stuff visible using the properties of a material.

Meters

We use many of the devices in this group frequently: rulers, speedometers, protractors, scales, water meters, clocks. There are also many devices that are less commonly used, like planimeters for measuring area, or tribometers for measuring forces. These don’t really visualize anything, though; they are mostly for quantifying.

There are, however, a few meters that blur the line between quantifying and visualizing. Thermometers and measuring cups use height to show temperature and volume, respectively. Galileo thermometers (below, left) show temperature using vertical position. Plastic strip thermometers use liquid crystals (just like mood rings) to encode temperature as color. Hour glasses use volume to show time passage. Barometers use height to show atmospheric pressure. Crookes radiometers use the speed of spinning fins to show light quantity. Electrometers (below, right) have thin gold fins that adjust their angle based on electrical charge.

Individually, these devices are good at showing a single data point. Sometimes, though, they can be put together to show a whole data series. The image below, by Dayna Mason, uses lots of compasses to show the distribution of a magnetic field.

Graphs

Lots of combined meters can show multiple points in space at once, but graphs can show multiple points in time at once. These devices typically use a turning roll or a disc of paper with a needle that records the data over time. This method also just happens to create a visualization. Some examples of these devices include seismographs, barographs, hygrographs, and thermographs. The image below is of a combination thermo-hygrograph.

 
Many of these devices require electricity to drive the drum or disc, but some of them also require electricity to do the sensing. They are still analog devices — there is no need for a processor or discretization of any of the data — but they still use electronic components. Electrocardiographs measure the electrical activity of the heart over time. Electroencephalographs measure the electrical activity in the brain.

An interesting pattern in all of these “graphs” is that they all produce line charts. This happens for two reasons. First, the data they collect is continuous just like a line chart. Second, the motions required to produce a line chart are easily mechanized. A constant horizontal motion is produced by turning the drum or disc, while the data affects the movement of the drawing arm.

One of the unique properties of these machines is they record truly continuous data. Computers break data down into little chunks to be able to process it. That can be broken down into ever smaller time chunks (1 second, .5 seconds, 1 millisecond, etc.), but it is still only sampling an instant, not every moment of time like these analog devices. This continuity produces some very robust data and visualizations. The sampling process that computers have to go through can accidentally crop out a peak or dip in the data value. With these analog devices, the potential for that type of accident is gone.

Physical and Chemical Processes

Some devices rely on physical and chemical processes to visualize or record things. One of the most common tools using chemical processes is a pH strip for measuring the acidity and basicity of a chemical. You may remember them from your high school chemistry lab. They encode the potential hydrogen of a chemical as color. Another is photographic film using chemicals that react to light to record the amount (and color) of light coming from a location.

An interesting device that uses physical processes is a cloud chamber. Cloud chambers use a liquid at the right temperature and pressure to be right on the edge of boiling. Ionizing radiation particles hit the liquid and add enough energy to cause tiny bubbles as they travel along their path. The more bubbles per trail, the more energy the particle had; the more trails, the more particles.

 
Analog visualization and measurement devices can offer a lot of advantages in certain situations. Many of them require no external energy source to run. They constantly monitor instead of sampling at discrete intervals. They also have downsides, though. Their results are harder to share, and the data is often either locked into the recording medium or lost to time. The visualizations they produce are optimized for efficient output from the device, not for human perception. It really makes you appreciate the upper hand that computers give us: We should be grateful for the opportunity and the ability to structure and form our visualizations for people to view, study, or simply enjoy.

 
Drew Skau is an analog appreciating PhD Computer Science Visualization student at UNCC, with an undergraduate degree in Architecture.

Over the past few years, animators have carved out a new niche for themselves promoting brands and causes, and explaining products, services, or complex subject matters. The wave of videos they’ve collectively produced and uploaded to YouTube, Vimeo, and the landing pages of startups everywhere fall under the heading “Motion Graphics.”

Considering that video is one of the most effective ways to quickly convey information, motion graphics are now high on the list of priorities for organizations wishing to woo customers or charm investors and donors.

Creating a motion graphic may cost as little as $5,000 when working with one or two independent artists, or up to $50,000 when working with a full-service production house. Currently, Adobe’s After Effects is the most common tool for creating motion graphics, but as web technology advances, we might start to see more in-browser animation using HTML5.

If you’re considering commissioning motion graphics or learning how to create them yourself, but aren’t sure where to start, here’s an overview of the production process.

Initial Concept

What is the video about? Identify the single idea you want viewers to come away with, and lay out the supporting points. What’s the structure of the story? You may pose a problem and then demonstrate how your product or service is the best solution to that problem.

Read more about structuring your initial concept in this article by visualization instructor Liz Burow.

Visual Style

Select a visual style to use in the animation. Will the artwork be cartoonish or realistic? Flat or three-dimensional? What color palette will you use? Will there be visual representations of lead characters (known as “heroes”) in the story, or does it consist only of text and artwork? What will those characters look like? Will your target audience identify with the style? What visual metaphors will you use to communicate the key concepts in your message?

To establish visual style when working with animators, find examples of videos that you like and send them as reference, or allow the creators to come up with an aesthetic from scratch based on their interpretation of your brand and objectives.

Script Writing

Start with a rough outline of the narrative of your story, which will later be translated into visual objects and movements, voiceover, sound effects, and music. First, lay out the main points you want to make, then start writing, word-for-word, what you want the narrator and characters to say (whether it’s voiced over or only text on the screen).

Keep in mind that time is very limited in videos: the shorter, the better. If you can get your message across in 30 seconds, that’s fantastic. Sixty seconds is acceptable; 90 seconds is typically the maximum recommended time. Reading the script at a moderate pace will provide a rough estimate of how long the video will be.

Story Template by Nancy Duarte

For example, Nancy Duarte uses a simple structure to create the drama that keeps viewers interested: repeatedly showing the state of the world now (“what is”) in contrast with your vision of a better way to do whatever it is that you do (“what could be”).

Then finish by painting a clear picture of the destination (think of it as a postcard from the future that you are inviting people to participate in).

It helps to understand that emotional appeal and convenience are significant factors in moving a viewer to action. Behavior often follows the path of least resistance, so you’ll want to make a call to action that ‘sas frictionless as possible to follow up on. All of the calculated, sensible reasons to take action won’t be effective without corresponding emotional impetus and clear directives.

Sample Storyboard Template

Storyboard

This is where you first start to create visuals and sounds that correspond to the script. Lay out all critical moments in the script, known as “style frames”. You may want to start with sticky notes that you can rearrange freely. At each critical step in the narrative, quickly sketch what is happening in the scene, and what actions any characters are taking. Write a short description of the scene and any narration, sounds, or on-screen text that occur at this moment.

Sound (voiceover, music & sound effects)

Some motion graphics may consist primarily of animated text, while a mood-setting song plays in the background. Others can have full-blown animated characters speaking with different voices, sound effects corresponding to their actions, and custom music. You may have to purchase a license to use copyrighted songs, or you may choose to have original music created for you.

Voiceover (or “VO”) involves a casting process similar to selecting actors for a TV show. If you’re working with a full-service producer, they’ll take a portion of your script and send it out to voice actors, who will then audition by recording their reading of your script. A single voice actor might return up to a half-dozen readings in different styles by changing the intonation, mood, and cadence in their voice. If you’re working independently, you will have to track down freelance voice talent online or through recommendations.

Animation

Now pieces start to come together. The animators will typically attempt to animate one or two style frames in the script using the established visual style. This is something of a rough draft and an opportunity for feedback before the bulk of the animation work happens, to minimize lengthy revisions later. Next, full animation will begin. The commissioner will see a full draft of the animation, including voiceover, and have a chance to make any minor changes. After the animation is finalized, final timing, voice over, music, and sound effects will be added and carefully placed to complete the project.

Browse motion graphics on Visual.ly

Choropleth maps can be simple, like in the example above, where the color of the state indicates whether the state goes in one direction (Democrat) or the other (Republican). The states can also be colored on a scale to indicate data, with a color like blue representing a low number and red representing a high number, leaving a number in between to be purple.

These simple visualizations make large amounts of data easy to understand at a glance, allowing insights that would take much longer if you’re looking at a table of numbers. But the process of making these maps is not easily apparent.

There have been tutorials for Python and Excel, but none that we’ve seen yet for D3 — and D3 is one of the easiest ways to make choropleth maps for the web.

Once you have your data encoded on a webpage using D3, you can access it and display it in new ways. In this example we are going to be making a map of the results of the 2008 presidential election.

Let’s start with our base map. We’ll get the .svg file of the United States from Wikipedia. Luckily, this map already has each state pre-labeled, so we can access and color it: a big time-saver. Otherwise, we would have had to go to our own U.S. map in Illustrator, bring each state onto it’s own layer, and name that layer with the abbreviation of the state.

Once you’ve put the .svg file in a new folder, create a basic HTML file, or download the template we’ve provided. You’ll need to include jQuery and D3. For our purposes, you are simply going to copy and paste the contents of the SVG file into a div in your HTML file. If you’re using TextMate, you can just drag in the SVG to the proper place. You’re going to see a whole bunch of raw SVG, which makes up the map. Each <path> element is a state, and has an ID attribute that maps to the state abbreviation. The “d” attribute, which has “M”, “L”, and a bunch of numbers, actually contains all the coordinates of that state.

With the SVG embedded in your HTML, if you open it up in a browser you should see a map.

Unfortunately, this SVG file comes with each state already colored gray, and we want to assign our own colors. So we need to find and remove from the SVG all instances where the fill color “#d3d3d3″ is defined.

Now, when we view our page in a browser, the states come up black.

This map lives inside the DOM, and we can access each of the states by its ID. If you’re familiar with jQuery or web development, you can already imagine things you could create. One way to start out quickly is to simply manipulate one of those states, in jQuery it’s as simple as

$('#NY').css('fill', 'red')

Now we need our data, and we are going to use Google’s JSON data of the 2008 presidential election. Save the .json file and add it to your folder. If you open it up in TextMate, it appears as one long line, which makes it hard to understand the data you’re working with. If you copy that line to your clipboard and head over to JSONLint and paste your JSON into the field and hit “Validate,” it will reformat your JSON into a more readable format.

You can paste that back into your JSON file. Look over your data and get a sense of what is available to you. You’ll notice in the very beginning they assign a unique ID number to each candidate, we will need this for later.

To use this JSON you’re going to need to assign it to a variable for use in your main file. To do this, add

var  statejson = [

to the very beginning and add

]

to the very end. That’s it. If you add

console.log(statejson)

to the end of your page, you can go to the console in Chrome and explore the structure of your data.

It looks like they store the winner in statejson.locals.STATENAME.races.President[''].final. You can find that out by getting more and more specific in your console.log and checking what is returned in the console in Chrome.

You can test your theory by trying

console.log(statejson.locals.Alabama.races.President[''].final);

This should return the ID of the winner of Alabama, “1701.” Now we know where to get the data we need, we need it in a format that will help us make our map. To map the winner data to the paths in our SVG, we are going to need the abbreviation for each state. In another situation we might need to have a separate JSON file that would help us map our full state names “New York” to their abbreviations “NY,” but the election data includes the state abbreviations. You can find them in

statejson.locals.STATENAME.abbr

We are going to use these two pieces of data to create a whole new JSON object. We want that object to be very simple, and contain only two pieces of data: the state abbreviation and the candidate who won that state. But right now we only have the IDs of the candidates who won, so we need to write a little decoding function based on the information we got from the beginning of the JSON file.

function candidate_id_decoder(president){	
	// Decode president name based on codes
	// because our data doesn't just give us their names
	if(president == '1701'){
		return 'McCain';
	}
	else if(president == '1918') {
		return 'Obama';
	}
	else {
		return false;
	}
}

Using all of these pieces, we can now create our new data.

var state_data = [];
$.each(statejson.locals, function(key, data){
 
	// Grab the ID of the candidate elected president in that state
	var president = data.races.President[''].final;
 
	// Grab the abbreviation of that state
	var state_abbreviation = data.abbr;
 
	// Create a JSON object containing the state abbreviation
	// and the name of the president who won that state
	var datarow = {"state_abbr": state_abbreviation,
		       "president": candidate_id_decoder(president)};
 
	// Add that JSON object to our data
	state_data.push(datarow);
 
});

Now we can check out the new data we’ve created by doing

console.log(state_data);

Now that we have our data how we want it, let’s manipulate our SVG to make our map. We are going to use D3 to select all of the path elements on the page. In our case that’s each individual state. We’re going to change the fill attribute based on the ID of that path. So once we encounter the “AL” path, we’re going to look for our “AL” key in the data we made, and then return a different color depending on the candidate associated with that state.

var state = d3.selectAll('path').attr('fill', function(d){
 
	// Get the ID of the path we are currently working with
	// Our SVG uses the state abbreviation for the ID
	var abbr = this.id;
 
	// Loop through the state data looking for
	// a match for that abbreviation
	// Then returning the corresponding president
	// who won that state, from the array we made earlier
	$.each(state_data, function(key, data){
		if(data.state_abbr == abbr){
			state_president = data.president;
		}
	})
 
	// Return colors
	// based on data					
	if(state_president == "Obama"){
		return "blue"
	}
	else if(state_president == "McCain"){
		return "red"
	}
	else {
		return "#CCC"
	}
});

Refresh and you will see your data reflected in your SVG!

You’ll notice that South Carolina and Missouri have no fill color: it appears that the data is not formatted correctly for these states. If this were a real visualization, you would need to go in and correct that by hand (as you often do when working on projects like this). There is also a strange shape in the bottom left caused by some stray paths included in Wikipedia’s SVG file. You can delete them in the SVG in your main HTML file.

EJ Fox is a staff designer at Visual.ly.

Artists create bar charts that span the height of a brick wall, or area charts with balloons blown up to varying sizes. These visualizations, when artfully photographed, can add intrigue to a simple piece of data.

It’s one thing to see bar charts for average daily water consumption per capita in the United States, Mexico, the United Kingdom, China and Haiti…

… it’s another to see those bar charts shown as cups of water filled to different levels.

These visualizations can draw the viewer in, provide a better understanding of the topic, and as long as the tried-and-true principles of data visualization are respected, they can be a powerful tool. (Plus, they’re fun to make.)

An important thing to consider: for real-world visualizations to really work, the physical visualization must add to the content of the infographic. For example:

• data on baseball fan attendance visualized by having fans hold up signs to make a bar chart;
• data on declining police budgets visualized as a bar chart traced in the dusty rear window of a police cruiser;
• data on holiday sales made by stacking presents in piles of varying heights in front of a christmas tree to make a bar chart;
• balloons filled to different sizes to show the declining reserves of helium…
• not to mention the near-infinite possibilities for proportion-related visualizations you are confronted with every time you eat a pie.

(Want to give any of the above ideas a try? Send us pics, we’ll be sure to feature them on our blog!)

These visualizations are interesting because as humans, we are not yet hardwired to understand and compute the things we see on screens and on paper. We are built to understand the real world, and we are very good at evaluating the things in it, and this lends an immediate grasp of the subject that rectangles on a screen sometimes can’t imitate.

But real-life visualization has its risks. As visualizers, we must be careful not to lie through carelessness. We are spoiled with the ease in which we transport data from computer to computer, and from spreadsheet to chart. When we create these visualizations, we must maintain proportion the old way, by hand.

In those water-cup bar charts, the water should be measured in a measuring cup and be based on a scale that maintains proportions. Obviously, this is not an exacting science: most people will not be able to see minute mistakes. But the point is to always be as close as possible to the data, and one easy way to do it is to actually have a chart made in a charting program to double-check against your real-life visualization. If something seems disproportionate between the two charts, make sure you are not mis-representing the data in your physical visualization.

It’s also important to focus on the photography of the real-world data visualization once it is complete. Get it in good light, whether that’s outside, or from a collection of lamps or professional photography equipment indoors. Keep the photo free of distractions, people, or photoshop them out later. You don’t want extraneous elements confusing your visualization. Take your picture and add some explanatory text, a source, and a title in an image-editing program.

Then upload it to Visual.ly and link to your post in the comments, so we can all appreciate it.