Getting+Started+with+Infogram

= with Mark J. Davis =

= COOL TOOL  =

=** Infogr.am ( http://www.infogr.am) **= Infogr.am is the world’s simplest application for making infographics. Infographics present data in graphical form with a specific context. Using Infogr,am, users can create free, interactive infographics and charts with a few clicks and save, post, or share through social networks.
 * Requires an Internet connection and free signup*.
 * Compatible with latest versions of Internet Explorer, Firefox, Safari, and Chrome web browsers .
 * Ideal on desktop and laptop computers.
 * Compatible with most mobile phones and tablets (Apple iPads, Amazon Kindles, and Microsoft Surface running Windows RT).
 * New users can link to an existing Facebook or Twitter account rather than create a new username.

= ** EXAMPLES ** =

These are sample projects created with Infogr.am that are both easy to create and interactive. To examine them closer, please click on the image and test the features.


 * Courting Controversy (Static Infographic - Multiple Charts and Text regarding the Stand Your Ground law) **


 * Interactive Groupings (Dynamic Infographic from the Summer Institute in Digital Literacy) **

= KEY FEATURES (adapted from Infogr.am)  =


 * Benefits **
 * Create more than 30 chart types and incorporate into multi-page layouts,
 * Use the built-in spreadsheet or import your XLS, XLSX and CSV file,
 * Save your illustrations to your computer as PNG or PDF files,
 * Publish your graphic dynamically in a webpage, or share via Twitter, Facebook, or Pinterest.

Considerations

 * Users need a basic knowledge of data collection and chart types,
 * Additional interactive features are not yet implemented, thus not as robust as commercial product,
 * A bit challenging on a tablet or mobile phone when editing in some features,
 * To password-protect or keep graphics private, you need to subscribe to the Pro version.

= MINI-TASK  = Create a brief infographic that describes a simple data set using as few words as possible. The purpose of this illustration is to tell a story about the data that is prompted by the viewer, not just the author's perspective.

= INSTRUCTIONS (adapted from Nancy Messieh)  =

Follow these six simple steps and you will be on your way to creating a simple infographic in just a few minutes.

1. After your have signed up for your account, you will be brought to the main menu (see Figure 1). Your complete projects will be stored in the ** Library ** and you can upgrade by clicking on ** Pro **. We will begin with the ** Create ** button to start a new project.
 * [[image:dliuri2013/01.jpg]] ||
 * Figure 1 ||

2. Choose one of the several different templates that appeals to you (see Figure 2).
 * [[image:dliuri2013/02.jpg]] ||
 * Figure 2 ||

3. You will then be presented with the template in design mode (See Figure 3).
 * Make advanced adjustments by clicking on the Gear button to the left and above your template.
 * Click on the Eye icon whenever you want to Preview your final work.
 * Select Publish to save or share your work when you are finished.
 * [[image:dliuri2013/03.jpg]] ||
 * FIgure 3 ||

4. You can double-click (or tap) components that you wish to edit, or select the circled X to remove it (see Figure 3 again). On the lower-right corner, you will see several options for adding components to your illustration (Figure 4). The five options in descending order are charts, maps, text, picture, or video. Hovering over each button (with a mouse) will provide a brief reminder. Begin by selecting the Chart button at the top of the list.
 * [[image:dliuri2013/04.jpg]] ||
 * Figure 4 ||

5. You can click on the left menu to indicate a chart type, then click the arrows on the right window to see your options (see Figure 5). Click on Add Chart when you have selected the chart your would like.
 * [[image:dliuri2013/05.jpg]] ||
 * Figure 5 ||

6. After the chart is embedded in your design template, you can double-click (or finger tap) the chart to edit the data in the built-in spreadsheet (see Figure 6) or import your own data. You can assign labels, input figures, and the chart will continuously update to match your input. Click the ** Done ** button to save the data to your graphic.


 * [[image:dliuri2013/06.jpg]] ||
 * Figure 6 ||

** REFLECTION **

 * 1) In what ways can an infographic improve the reading comprehension and application of information?
 * 2) What are some of the important considerations in designing an effective infographic?
 * 3) <span style="background-color: #ffffff; font-family: Arial,sans-serif; font-size: 15.3333px;">How could you (or an educator, student, or parent) maximize learning with an infographic?

** Classroom of Mark J. Davis **
The main website of the presenter and includes other resources and curriculum vitae.


 * Integrating Inforgraphics into the iClassroom **<span style="background-color: #ffffff; color: #444444; font-family: arial,Arial,Helvetica,sans-serif;">Lisa Johnson's article on how she embeds infographics into her classroom.


 * <span style="color: #444444; font-family: arial,Arial,Helvetica,sans-serif;">New York Times article: Stories vs. Statistics Op-Ed **<span style="background-color: #ffffff; color: #444444; font-family: arial,Arial,Helvetica,sans-serif;">Dr. J.A. Paulos of Temple University talked about the differences between storytelling (literacy) and statistics (numeracy).

The website of David McCandless, a fantastic journalist and infographic designer with fabulous visualizations and raw data.
 * <span style="background-color: #ffffff; color: #289dcc; font-family: inherit; font-size: inherit; vertical-align: baseline;">Information is Beautiful **

<span style="background-color: #ffffff; color: #444444; font-family: arial,Arial,Helvetica,sans-serif; vertical-align: baseline;">** FlowingData **Nathan Yau's web presence for making "data available and useful to those who aren't necessarily data experts."

<span style="background-color: #ffffff; color: #444444; font-family: arial,Arial,Helvetica,sans-serif; vertical-align: baseline;">** visualizing.org **"A community of creative people making sense of complex issues through data and design."

<span style="background-color: #ffffff; color: #444444; font-family: arial,Arial,Helvetica,sans-serif; vertical-align: baseline;">** Visual.ly ** Visually is another one-stop shop for the creation of data visualizations and infographics, but it is somewhat limited in the variety of design options.