[펌]50 Great Examples of Data Visualization
흠.. 내가 보기엔 쪼매 난해하지만... 그래도 데이터 작업 할 때 참고는 되겠지 싶어 일단 스크랩~~
Wrapping your brain around data online can be challenging, especially when dealing with huge volumes of information.
And trying to find related content can also be difficult, depending on what data you’re looking for.
But data visualizations can make all of that much easier, allowing you to see the concepts that you’re learning about in a more interesting, and often more useful manner.
Below are 50 of the best data visualizations and tools for creating your own visualizations out there, covering everything from Digg activity to network connectivity to what’s currently happening on Twitter.
Music, Movies and Other Media
Narratives 2.0 visualizes music. Different music tracks are segmented into single channels that are then shown in a fan-like structure.
class=spacer_>
Liveplasma is a music and movie visualization app that aims to help you discover other musicians or movies you might enjoy. Type in the name of a band, artist, movie, director or actor and liveplasma will show you related people, bands or movies.
class=spacer_>
Tuneglue is another music visualization service. Just type any artist or band into the search box and hit enter. A circle comes up representing that band. You can then expand from there, clicking on any new additions after each expansion to expand further. By click on “releases” you can order their albums from Amazon.
class=spacer_>
MusicMap is similar to TuneGlue in its interface, but seems slightly more intuitive. Search for an artist or band and a list of albums will come up. Once you choose an album a circle pops up on the map. From there you can expand to get related albums, remove that album, or get more information.
class=spacer_>
Last.Forward is a downloadable, open-source tool to visualize any Last.fm user’s social network, including relationships between other users.
class=spacer_>
Fidg’t is a desktop app that uses Flickr and Last.fm tags to let you visualize your network and their tagging activities. You can see what your network’s predispositions are toward different tags and types of content.
class=spacer_>
Digg, Twitter, Delicious, and Flickr
Looks Del.icio.us is a collection of different Delicious bookmark visualizations. They’re created with a python-based graphics library and layout engine.
class=spacer_>
Arc is a product from Digg Labs that shows the latest Diggs, and the relationships between the users submitting and digging them. There are two different speed modes, the slower of which is great if you actually want to read the story headlines.
class=spacer_>
Stack is probably the most useful of the visualization offerings from Digg. Stories with the most recent activity load across the bottom of the screen and then ‘Diggs’ seemingly fall from the sky to land and create a real-time graph of what stories are popular. Whenever a ‘Digg’ hits a story stack, the title of the story is shown at the bottom of the screen, pushing previous stories down, and eventually off the screen.
class=spacer_>
Swarm has one of the cooler user interfaces of all the Digg Labs offerings, with stories and users flying around on the screen. When someone ‘diggs’ a story, they fly over to the circle representing the story itself and are briefly linked up to it. Hovering over a story or user shows its name and allows you to click. You can also download Swarm as a screensaver.
class=spacer_>
Research Chronology shows the relationships between one student’s research paths via Delicious bookmarks over the course of a semester. It’s an ongoing project and includes bookmarks for more than 270 websites.
class=spacer_>
TwittEarth shows live tweets from all over the world on a 3D globe. It’s a great visualization tool to see where tweets are coming from in real time and discover new people to follow. It’s also fascinating just to sit and watch.
class=spacer_>
Tag Galaxy lets you search for Flickr tags and have them shown visually in a mockup of a star system. Clicking on any planet (tag) within the first representation changes the image and recenters that tag as the star and pops up new related tags as planets. Clicking on the sun itself brings up a globe covered in images tagged as you’ve specified.
class=spacer_>
The Flickr Related Tag Browser allows you to search for a series of tags and see related tags. Clicking on a different tag brings up new related tags. You can zoom into the tag selected in the center of the screen by hovering and see images tagged with that word. It also gives a total image count and lets you browse by page.
class=spacer_>
Internet Visualizations
Mapping the Blogosphere is a collection of maps of the blogosphere, including hyperbolic maps, as shown here.
class=spacer_>
The Twingly Screensaver visualizes the blogosphere worldwide in real time. You get a continuous feed of blog activity straight to your screen.
class=spacer_>
Web Trend Map 4 shows a visualization of current trends online. This is the fourth iteration of this map and the most detailed one yet.
class=spacer_>
The Bloom Diagram is a project from the IBM Watson Research Center that visualizes the contributions of individuals to open source projects.
class=spacer_>
Akami Real-time Web Monitor shows a map of the world with real-time information about internet traffic, latency and current network attacks. The maps are color-coded and easy to read, but only give very generalized information.
class=spacer_>
The Mapa de Conocimiento (Map of Knowledge) is a schematic of knowledge involved in any given idea or project. Built in Flash, this tool visualizes a group of URLs organized under main ideas. The map is available in English and Spanish.
class=spacer_>
Akami Network Performance Comparison shows the packet loss and network speeds between different cities around the world (to showcase how their technology is better than the standard “public” internet). It also shows graphs of the information.
class=spacer_>
Internet Health Report shows the latency, packet loss, and network availability of the major ISPs and backbone providers worldwide in a color-coded grid format. Hovering over any of the cells in the grid gives more information about the health of that particular connection.
The Hierarchical Structure of the Internet was a study that looks at how the Internet is organized, both in terms of structure and connectivity. It shows how the central core of the Internet is made up of about 80 core nodes, but that even if those nodes failed, 70% of the other nodes would still function via peer-to-peer connections.
class=spacer_>
Rootzmap—Mapping the Internet is a series of maps based on data sets provided by NASA and created by Philippe Bourcier. There are a number of different maps available.
class=spacer_>
Websites as Graphs shows the structure of different websites based on the tags used in their code in a color-coded map that grows on the screen as you watch. Tags are somewhat intuitive in their color-codes, with blue for links, red for tables, and gray for any tags not specifically given a color.
class=spacer_>
Schemaball visualizes SQL database schema. Relationships are shown based on foreign keys within tables. It’s capable of showing schemas with hundreds of different tables and relationships.
class=spacer_>
The Opte Project aims to map every class C network on the Internet from a single computer and a single Internet connection. The overall goal is to create a map of the entire Internet.
Miscellaneous Visualizations and Tools
Visualizing Information Flow in Science includes a set of four visualizations showing relationships between citations in scholarly journals that are used to evaluate the importance of each journal.
class=spacer_>
The Micro Fashion Network: Color visualizations show the continuous change of styles in fashion, with a particular look at the basic elements of color. It was created by using a fixed camera and special software to map the colors of clothing people in Cambridge were wearing.
class=spacer_>
The TED Sphere shows videos from the TED conference in a spherical format with 3D navigation. You can view the sphere from inside or outside and the layout of videos is based on semantic compatibility.
class=spacer_>
Visualizing The Bible gives a visual overview of more than 63,000 textual cross-references within the Bible. It’s intention is to be more beautiful than functional.
class=spacer_>
Walrus is a visualization tool that allows you to interact with massive graphs in a 3D interface. Interaction is based on selecting any node and then having the graph zoom in to expand on that point.
class=spacer_>
We Feel Fine is one of the most interesting visualization tools I came across. It provides visualizations on the general feelings populating the blogosphere on any given day. You can filter results based on age, location, gender, weather, and other criteria. There are six different visualizations available: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds, each of which give a different portrait of the general feelings abounding on the internet.
class=spacer_>
One Week of The Guardian is a visualization of the stories from The Guardian newspaper. It focuses on the relationships between headlines, authors, pages, and categories.
class=spacer_>
Nemulator is a project that aims to visualize “nemes,” or different fragments of states of mind. It also aims to serve as a starting point for discussions relating to the scalability of nemes.
class=spacer_>
Voyage is a web-based RSS reader that visually displays RSS feeds on a timeline. It’s a great way to explore the different feeds you subscribe in a completely different format.
class=spacer_>
Blooming Numbers is the 2006 CGD MFA Thesis Project of Yuri Lee. It’s goal is to show the relationships between preferences of numbers and cultural contexts in an interactive way.
class=spacer_>
CIA World Factbook Visualization shows a visualization of relationships between different countries and continents based on data from the CIA World Factbook. It shows semantic relationships for each country, including neighboring countries, languages, water and terrestrial boundaries, and more.
class=spacer_>
TextArc Visualization of The History of Science is a static visualization of the book The History of Science. It was originally displayed at the NYPL Science, Industry, and Business Library in New York.
class=spacer_>
This Newspaper Map is a visualization of the rules of the daily production of a newspaper is a striking graphic format. The closeness of words signifies their relationships with each other as do lines traced between words.
class=spacer_>
GraphNews is a news visualization browser from the Libero WebNews service. It shows news stories in a mind-map-like format. Clicking on one node recreates the graph with the clicked item as the focus.
class=spacer_>
Newsmap shows a visual representation of current headlines on Google News. It shows the relationships and patterns between different news stories across cultures and within different news segments. Be sure to click to the new JavaScript version for the best features.
class=spacer_>
FreeMind is a Java-based mind mapping software that allows you to build your own data visualizations quickly and easily. Finished maps can be exported into clickable XHTML files as well as other formats.
class=spacer_>
Resource System Reference Database was presented as a poster at InfoVis2004, IEEE’s annual conference. In this visualization, line weight shows the strength of relationships.
class=spacer_>
Is the New documents instances of the phrase “is the new” and shows the relationships between the subject and object of that phrase. Examples include “Purple is the new pink” and “Technology is the new religion.”
class=spacer_>
WikiMindMap is a tool to visually browse Wiki content in a mind-map format and includes the ability to download any of their mindmaps in FreeMind format.
class=spacer_>
How Scientific Paradigms Relate shows the relationships between more than 700 scientific paradigms based on how they were mentioned in more than 800,000 scientific papers. Relationships are also based on how often different papers were cited by each other and by authors of other papers.
class=spacer_>
Universe is a great app for visualizing the “universe” of particular search terms. There are sample terms available or you can input whatever you choose. The visualization given is reminiscent of astronomical charts.
class=spacer_>
visualcomplexity.com isn’t strictly a visualization software, but rather a collection of visualizations already created and categorized. Categories include business networks, art, internet, knowledge networks, biology, transportation networks, social networks, and more.
class=spacer_>
The Strengths of Nations is a visualization of the scientific advancement of ten different nations, including the United States, United Kingdom, France, China, and Australia. The map analyzes 23 different scientific areas, including math, biochemistry, and astrophysics.
class=spacer_>
Written exclusively for WDD by Cameron Chapman, a freelance writer and designer.
Which 0nes are your favorites? How important is the way we visualize data? Please share your comments with us…
또한, 5 Tips For Building Effective Infographics(정보시각화를 어떻게 하면 잘 할 수 있는지를 다룬 5가지 팁) 도 스크랩 (출처 --> http://visitmix.com/Articles/5-Tips-For-Building-Effective-Infographics )
Infographics (short for Information Graphics) are part design, part data visualization. Like generic data visualization tools such as charts and graphs, infographics typically represent some data in a way that a viewer can quickly understand. But infographics are customized specifically to the data, topic, and audience - each infographic is essentially a creative work that gets a point across.
By pairing your infographic with software, you can allow people to interact with the visualization and explore the concepts, giving a more powerful and immediate ability to understand the point you are making.
Inspired by the visualizations that we regularly see in Good Magazine, Wired, and New York Times, we created some sample interactive infographics. Take a look at obesity trends in America, or explore the job roles that go into creating a web site.
Creating a slick infographic needs a bit more effort than is needed to fire up a generic charting or graphing tool. But the extra work can really pay off, making your visualization stand out from the crowd.
And to help you out, we have compiled this list of handy tips for creating effective infographics:
-
5. Data is King
Once you've decided what point you want to communicate with your visualization, you need to collect the necessary data. More often than not, the data isn't readily available via a convenient JSON API, and almost never available in a convenient database format. Even if you don't need to go to the library and manually copy data from some data bureau's print publications, you may end up downloading delimited text files, screen-scraping HTML tables, or worse. Luckily, this job can be largely automated with tools like Excel (for transforming delimited CSV and TSV), Dapr, and Many Eyes.
A good example is the data from Centers for Disease Control (CDC) health risk factors survey. CDC collects a huge amount of data on a yearly basis, including trends on smoking, drinking, hypertension, as well as obesity. All of the data that CDC collects is available for free download to the public; more than 100,000 individual survey results that can be mined for trends.
When we began creating our obesity visualization, we quickly noticed some challenges with the CDC data. The first thing we noticed is that the CDC's map sometimes did not match the data in the PDF report that the CDC publishes. And we noticed that the data listed in the PDF report sometimes didn't match the CSV file of data that can be exported from the CDC database. The discrepancies were rare enough and small enough that they could easily be considered transcription errors, but to prove this out we wanted to get as close to the source data as possible.
The raw data for the CDC is in the individual surveys turned in for thousands of people each year. This information is in SAS XPORT format, a commercial software used by statisticians. Since we wanted our results to be reproducible by anyone, and since you might be interested in doing your own analysis of the 100 or so other data points collected by the CDC, we needed to process the data using a freely-available tool. The 'R' statistical software was up to the task. Here is the 'R' script that we used to aggregate all of the data on the 'BMI' (body mass index) field for the years 1987-2007:
# turns BMI into either normal/overweight/obese obesity <- function (val) { if (val <= 249) { return ("normal") } else if (val > 249 & val <= 299) { return ("overweight") } else if (val > 299 & val < 999) { return ("obese") } else { return ("unknown") } } obvect <- Vectorize(obesity) # given state code used by CDC, returns state abbreviation lookstate <- function(scode) { s <- subset(state, Code == scode, select=Abbrev) return (s$Abbrev) } lsvect <- Vectorize(lookstate) state <- read.table("d:\\data\\cdc\\obesity\\states.csv", ? sep=",", header=TRUE) # aggregates all BMI survey results for a single year, from # a file named YYYY.xport # exports the aggregated data to a file named YYY.CSV importyear <- function(year) { w <- read.xport(paste('d:\\data\\cdc\\obesity\\',year,'.XPT', sep="")) # only take survey results with legitimate BMI wfilt <- subset(w, X.BMI < 999, select=c(X.STATE, X.BMI)) # convert BMI to obese/overweight/normal ranges wfilt$X.OBES <- obvect(wfilt$X.BMI) # get state abbreviations wfilt$State <- lsvect(wfilt$X.STATE) # aggregate result <- table (wfilt$State, wfilt$X.OBES) write.table (result, paste('d:\\data\\cdc\\obesity\\',? year,'.csv', sep=""), sep=",") return (TRUE) } iyvect <- Vectorize(importyear) years <- 1987:2007 iyvect (years) -
4. Resist Scope Creep
Once you have some good data and get the first builds of your visualization working, it can be very tempting to add features. People see the visualization, and say "wouldn't it be cool if...?" Often, the new functionality can be added quickly, so it's hard to resist the temptation. But you need to remember that your goal is to answer one question and communicate crisply -- not to be all things to all people. Adding too many bells and whistles will dilute your message, and distracts you during development. We struggled with this on a couple of our visualizations, and in a couple of cases ended up having to back out functionality to keep the designs clean and simple.
-
3. Don't Over-Architect
Normally when you write code, you want to make your code as generic, maintainable, and reusable as possible. But infographics are often one-off projects that you create for a specific purpose. You don't typically plan on a v2 and v3 of an infographic. There is no need to abandon good coding practices, but don't overly componentize or modularize your code. As an example, there is probably not a large market for data-bound controls which render T-shirts on a grid, so we didn't bother to design that piece of the visualization as a standalone control. On the other hand, it is conceivable that someone would want to use a treemap control for some scenario outside of inauguration speeches, so we *did* componentize that piece of the visualization.
-
2. Stay Agile
Saying that your infographic code is one-off doesn't mean that anything goes. You can be relatively more careless with modularization and componentization, but you should be relatively *more* careful with your separation between data and visualization. You want to be as nimble as possible when it comes time to make tweaks to the design. The best approach is to bring in a little bit more data than you need, and write your code to be schema-agnostic. We found this to be a joy when using LINQ. We designed our visualizations to be loaded from a sequence of objects (e.g. Friendfeed statuses, State obesity records, TreeMapItems, etc.). Then we encapsulated separately the LINQ code to read information from JSON or XML and project into the desired type. Even if you don't have LINQ, it's smart to keep as clean a separation as possible between your data parsing and your rendering.
-
1. Answer One Question
The most important step in creating your infographic is deciding precisely what question you want to answer. The more time you spend here, the more effective your visualization will be. Clearly settling on one question to answer can be deceptively difficult. Of course, it's easy to say what you want to communicate in general terms: "We want to show the impact of AIDS in Africa", or "We want to show what a serious problem obesity in America is". But to maximize your message's impact, you have to get specific. Specific questions are "Show me how the proportion of obese people in the country has grown year-over-year". Or "show me a comparison of how much the various presidents talked about a topic relative to one another". You are telling a story, but you don't use words to tell the story. The question you choose will determine what data you present, and how you will visualize it.