Les dejo estas otras dos infografías del mismo blog son ejemplos con bastante información de texto pero muy llamativas y se ve que hay homogeneidad en el uso de la retícula y la paleta de colores.
Les dejo esta infografía porque tiene una paleta de color adecuada, un uso de tipografía que destaca la información puntual y relevante, maneja información espacial, cualitativa, instruccional y de proceso. También vean el uso flexible de una retícula. Y mismo lenguaje gráfico.
Del blog de Efren sin acento en Blogspot. http://yosoyefrensinacento.blogspot.mx/2012/10/me-gusta-hacer-infografias.html
How to Make a Graph in Adobe Illustrator
Most of us create graphs with actual graphing software. Maybe it’s Microsoft Excel. Maybe it’sR. Whatever it is though it’s usually specialized for analysis. What if you want to make a graphic for a publication or a presentation that’s polished and fully customized? Adobe Illustrator gives you the control you need to do this. It’s not graphing software. It’s illustration software, but once you get the hang of things, Adobe Illustrator can be a valuable tool in your visualization arsenal.
Familiarize Yourself with Toolbox
Adobe Illustrator has a large toolbox, but for your basic graph, you only need to familiarize yourself with a few of the available tools — selection, direct selection, pen, type, and graph.
The selection tool lets you place focus on a group of objects; direct selection lets you choose individual objects like a line segment; pen tool lets you draw straight lines; type tool is used to put words in your graphic; and finally the graph tool lets you make different types of graphs.
Don’t worry, these tools will make more sense as we go through the examples.
Read the Data Into Illustrator
Start a new Illustrator document, and select the graph tool. Left click and drag. A rectangle appears that sizes according to how far you drag. This is initially how big your graph will be. You can always change it later so no need to fret about it. You’ll immediately see a grid once you let go of the mouse button (shown below). That’s where you put your data. You can manually enter data points like you would in Excel, but it’s easier to cut and paste data from Excel into the grid in Illustrator.
In this example (remember, we’re dealing with the immigration data), the first column is Europe, second column is Asia, so on and so forth. Click on the check in the top right corner of the grid box. The default grayscale bar chart will show up.
Change the Default Graph
We don’t want a bar chart though. We want a stacked area graph. Close the grid box, and then right click on the graph (currently a bar chart). Select Type. This will give you the following menu.
Select the icon for area graph, and your graph will change accordingly:
Okay, now we have our base. It’s time for the fun part now — customization. You could leave it like this, but the whole point of using Illustrator in the first place is to make a publication-level graph. Otherwise, we’d be better off using Excel. Onward ho.
Customize the Graph
Right click on your graph (now an area chart), and click on ungroup and click on OK:
The reason for this is because the graph is initially created as a group, or single entity, but what we really want to get at is the individual elements like the axes and labels. You can modify individual elements without ungrouping, but it’s easier if you do this way. So ungroup. After that, some elements will still be grouped together (e.g. the polygon shapes), but like before, you can right click and select Ungroup. You’ll know right away if some elements are groups or not when you select an element with the selection tool. Try using the direct selection tool to select individual elements without ungrouping.
Once you’ve got that down, you can pretty much do whatever you want to the graph. I chose to add some color, change the font and font size, and extend the axes all the way across.
Annotate the Graph
I usually leave annotation to the very end, because I like to place labels in a way that doesn’t bring clutter. Use the Type Tool to add text. Select the tool, click where you want to add text, and, like you’d expect, Illustrator will prompt you for some wordage.
Here’s the finished product. I added a title, some lead-in text, removed the top grid line, and added years to the x-axis.
Of course, I could have added more history to the graph, optimized the colors, size, dimensions, etc., but that’s out of the scope of this tutorial. What I hope that you take away from this tutorial is that Illustrator offers you a lot of flexibility that other pure graphing solutions don’t. So if you’ve got a report or paper to publish, then you might want to consider cleaning up with Illustrator.
There’s a reason almost all of The New York Times’ graphics pass through Illustrator at some point in its life cycle. It’s a little tricky at first, but once you get the hang of it, you’ll see it’s well worth the effort.
Here is the Adobe Illustrator file for the above graph, if anyone is interested.
For more examples, guidance, and all-around data goodness like this, pre-order Visualize This, the upcoming FlowingData book.
Un ejercicio de la clase de Laboratorio de la UAM-C donde se les pidió a los alumnos realizaran un CV con el objetivo de lograr una entrevista de trabajo para una empresa en particular. A continuación se muestran los CV de cada alumno después de revisarlo les pido que pongan la empresa que tienen y mencionen solo 3 de los alumnos a los que entrevistarían.
Instrucciones para alumnos: Suban su CV con su nombre fecha y datos de la empresa a la que dirigen su mensaje.
Un proyecto donde la gente ayuda al registro de datos en una investigación Este proyecto me parece muy importante para los chicos de las abejas pues de alguna manera hace participe a la gente para recopilar datos y en este caso saber cuando y como llegaran las cigarras, denle un vistazo que tenemos todos los recursos para hacer algo parecido en la UAM.
There have never been more technologies available to collect, examine, and render data. Here are 30 different notable pieces of data visualization software good for any designer’s repertoire. They’re not just powerful; they’re easy to use. In fact, most of these tools feature simple, point-and-click interfaces, and don’t require that you possess any particular coding knowledge or invest in any significant training. Let the software do the hard work for you. Your client will never know.
iCharts is a platform that connects the publishers of market research, economic and industry data with professional consumers. iCharts hosts tens of thousands of charts in business, economy, sports, and other categories. iChart makes it simple for people to discover and follow the world’s latest data insights. iCharts provides cloud-based and patented charting tool that enable companies and individuals to brand, market, and share their data as chart content to millions of viewers across the web. icharts provides free accounts to the users which let you create basic interactive charts, while you can buy the premium version as well with tons of features. Charts can have interactive elements, and can pull data from Google Docs, Excel spreadsheets, and other sources. [Link]
2. Fusion Charts Suit XT
3. Modest Maps
Modest Maps is a small, extensible, and free library for designers and developers who want to use interactive maps in their own projects. It provides a core set of features in a tight, clean package with plenty of hooks for additional functionality. [Link]
4. Pizza Pie Charts
Raw is a free and open-source web application for visualizing data flexibly and as easy as possible. It actually defines itself as “the missing link between spreadsheet applications and vector graphics editors.” The application works by loading a dataset by copy-pasting or drag ‘n’ dropping and allows us to customize the view/hierarchy. Raw is based on the popular D3.js and supports lots of different chart types like bubble, treemap, circle packing, and more. Installing Raw is pretty straightforward as everything works client-side. [Link]
8. Ember Charts
Ember Charts is a charting library built with the Ember.js and D3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents their thoughts on best practices in chart interactivity and presentation. [Link]
Springy is a force-directed graph layout algorithm. It means that springy uses some real-world physics to try and figure out how to show a network graph in a way that looks good. Springy.js is designed to be small and simple. It provides an abstraction for graph manipulation and for calculating the layout and not too much else. The details of drawing and interaction are mostly up to you. This means you can use canvas, SVG, WebGL, or even just a plain old positioned HTML element. [Link]
11. Google Charts
Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types. It’s an especially useful tool for specialist visualizations such as geocharts and gauges, and it also includes built-in animation and user interaction controls. [Link]
Cube is an open-source system for visualizing time series data, built on MongoDB, Node, and D3. If you send Cube timestamped events (with optional structured data), you can easily build real-time visualizations of aggregate metrics for internal dashboards. For example, you might use Cube to monitor traffic to your website, counting the number of requests in five-minute intervals. [Link]
15. Smoothie Charts
Smoothie Charts is a really small charting library designed for live streaming data. Joe Walnes wanted to show real-time streaming data pushed over a WebSocket. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data. Smoothie Charts only works on Chrome and Safari. And it doesn’t support legends. Or pie-charts. In fact, it’s inferior in virtually every way to a library like Flot. But, it’s very good at displaying streaming data. [Link]
BirdEye is the Declarative Visual Analytics Library. It is a community project to advance the design and development of a comprehensive open-source information visualization and visual analytics library for Adobe Flex. The action script-based library enables users to create multi-dimensional data visualization interfaces for the analysis and presentation of information. [Link]
Arbor.js is a graph visualization library built with web workers and jQuery. It provides an efficient, force-directed layout algorithm, abstractions for graph organization and screen refresh handling. The library doesn’t force a specific method for screen-drawing and you can use it with canvas, SVG, or even positioned HTML elements; the best one that fits your project. Arbor.js simply helps you focus on the graph data and its style rather than spending time on the physics math that makes the layouts possible. [Link]
Gephi is an interactive visualization and exploration platform for all kinds of networks and complex systems, dynamic and hierarchical graphs. Gephi, a graph-based visualiser and data explorer, can not only crunch large data sets and produce beautiful visualizations, but also allows you to clean and sort the data. [Link]
Axiis is an open-source data visualization framework designed for beginner and expert developers alike. Axiis gives developers the ability to expressively define their data visualizations through concise and intuitive markup. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations. Axiis was designed to be a granular framework, allowing developers to mix and match components and build complex output by compositing together basic building blocks. [Link]
D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5, and SVG. It avoids learning a new intermediate proprietary representation. [Link]
Dipity lets you create a free digital timeline. It allows creating, sharing, embedding and collaborating on an interactive and visually attractive timelines has the ability of integrating video, audio, images, text, links, social media, location, and timestamps. [Link]
TimeFlow Analytical Timeline is a visualization tool for temporal data. This tool is currently in alpha version so there is a chance of finding glitches. It provides five different displays: timeline view, calendar view, bar chart view, and table view. [Link]
Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well-designed, consistent, and clean programming interface. Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users. Paper.js is developed by Jürg Lehni and Jonathan Puckey, and distributed under the permissive MIT License. [Link]
30. Visualize Free
Visualize Free is a free visual analysis tool based on the advanced commercial dashboard and visualization software developed by InetSoft, an innovator in business intelligence software since 1996. Visualization is the perfect technique for sifting through multi-dimensional data to spot trends and aberrations or slice and dice data with simple point-and-click methods. If you are looking for a way to visually explore and present data that standard office charting software cannot handle, Visualize Free is for you. [Link]
This article originally appeared on CodeGeekz.
[Image: Abstract via Shutterstock]