This page is maintained by Dominique Thiebaut and contains various interesting visualization examples or related material found in the media and on the Web, in various forms. The authors of the visualization, or its source is indicated in the Author/Source field of each entry. I try to locate the actual authors as best as I can. I also try to find out what particular software tools were used to generate the visualization. This is reported in the implementation field.
The different visualization systems shown below are organized by application domains, and by type (borrowed and adapted from Viz4All).
The application domains include:
Implementation: React, D3.js and PIXI.js
Date: Oct. 2015
From medium.com: Lucify teamed up with Ville Saarinen to build a novel visualisation of the European refugee crisis. We aimed to convey the magnitude of the crisis in a way that is intuitive, memorable and engaging.
You can view the result here. The project is available as open source on GitLab.
From idvsolutions: [The visualization] tracks 56 years of tornado paths along with a host of attribute information. [T]he tracks are categorized by their F-Scale (which isn't the latest and greatest means but good enough for a hack like me), where brighter strokes represent more violent storms.
From 422.com: We make award-winning, dataviz, CGI and visual effects. You’ll see our work on broadcast TV, commercials, movies and websites around the world.
Date: Jan 2015
From www.flyingmag.com: To help travelers keep tabs on airline flight delays, FlightAware.com has created the Misery Map, a real-time weather and flight data visualization tool that overlays Nexrad radar imagery on a map of the country, with red-green graphs showing the pain at major airports. Hovering your mouse over any airport calls up more information that shows delays between various hubs.
Read more here
Category: Internet/Geographic GIS
Author/Source: HDMoore Projects.
Date: August 2014
From www.technologyreview.com: [HD] Moore’s census involved regularly sending simple, automated messages to each one of the 3.7 billion IP addresses assigned to devices connected to the Internet around the world (Google, in contrast, collects information offered publicly by websites). Many of the two terabytes (2,000 gigabytes) worth of replies Moore received from 310 million IPs indicated that they came from devices vulnerable to well-known flaws, or configured in a way that could let anyone take control of them.
Author/Source: NATS Aero
Date: March 2014
From Wired's Kyle VanHemert: Watch an Entire Day of Air Traffic in One Astonishing Visualization. The folks at NATS, responsible for handling much of the air traffic control in Great Britain and elsewhere, know the delicate dance better than just about anyone. To give us a sense of what keeps them busy day to day, they put together this stunning video. Running at 1,440 times regular speed, the viz is striking as pure laser light spectacle. But the closer you watch, the more fascinating details you’ll find. The clip combines UK radar data from June 21 of last year and flight plan data from the rest of the continent from July 28.
Author/Source: Cameron Beccario http://earth.nullschool.net/
Implementation: Natural Earth, D3.js, when.js, backbone.js, node.js. Source code available on github.
Date: January 2014
- a script to download and process Global Forecast System weather data in GRIB2 format from the National Centers for Environmental Prediction, NOAA / National Weather Service.
- a GRIB2 to JSON converter (see the grib2json project).
- scripts to push site files to Amazon S3 for static hosting.
- a browser app that interpolates the data and renders an animated wind map.
An instance of "earth" is available at http://earth.nullschool.net. It is currently hosted by Amazon S3 and fronted by CloudFlare.
From sappingattention.blogspot.com.es: This makes use of visualization again, but as a narrative technique rather than the heuristic role it played in data selection. Narrating voyages through data visualization clarifies the unique role of the whaling industry in American shipping: it is both the primary industrial use of the sea (as opposed to commercial voyages that reach across it), and a self-exhausting process of resource depredation that gives an unlikely perspective on the movement patterns of early American capitalism. The progressive depletion of whaling grounds drives the fleet farther and farther afield each year, expanding the reach of American voyagers.
From sappingattention.blogspot.com.es: To do humanistic readings of digital data, we cannot rely on either traditional humanistic competency or technical expertise from the sciences. This presents a challenge for the execution of research projects on digital sources: research-center driven models for digital humanistic resource, which are not uncommon, presume that traditional humanists can bring their interpretive skills to bear on sources presented by others.
Implementation: Google Earth +?
Date: July 2012
From fastcoexist.com: "I was interested in the idea that 3-D data maps always get superimposed on the Google Earth platform so you can walk through data, but in the back of my head, I always had that satellite view. We were always looking for ways to superimpose much more artful and sexier types of basemaps to attract people," explains Nadia Amoroso, the co-founder of DataAppeal. "The whole idea is to introduce the artistic aspect of 3-D data modeling and still keep the analytics, the numbers side."
Category: GIS/Social Network
Implementation: d3, DataMaps, freegeoip.net, and the Wikimedia RecentChanges IRC feed, broadcast through wikimon. Source available on github.
Date: May 2013
From hatnote.com: When an unregistered user makes a contribution to Wikipedia, he or she is identified by his or her IP address. These IP addresses are translated to the contributor’s approximate geographic location. A study by Fabian Kaelin in 2011 noted that unregistered users make approximately 20% of the edits on English Wikipedia: likely closer to 15%, according to more recent statistics], so Wikipedia’s stream of recent changes includes many other edits that are not shown on this map.
You may see some users add non-productive or disruptive content to Wikipedia. A survey in 2007 indicated that unregistered users are less likely to make productive edits to the encyclopedia. Do not fear: improper edits can be removed or corrected by other users, including you!
How it works: this map listens to live feeds of Wikipedia revisions, broadcast using wikimon. We built the map using a few nice libraries and services, including d3, DataMaps, and freegeoip.net. This project was inspired by WikipediaVision’s (almost) real-time edit visualization.
Author/Source: mapsdata.co.uk which is part of Inquiron, a data visualization and custom mapping company based in Dubai.
From mapsdata.com: How to Get Data: The data you want to visualize may be data you already have in your business or organization. If not, or as an example, you can use the data sets that are freely available online.
We provide links to great free data sets in the containers to the right, listed by type of source.
Most sources provide files in common formats such as .xls or .csv. Download these files to your computer before moving on to the next step: structuring your data.
From DFTwiki: This is a series of (quick) steps taken to generate a geographical representation of a list of countries appearing in a CSV-formatted file (comma-separated values). The Tableau software package is used to display the map. The representation associates to each country the number of lines in the file that contain that country. For example, if the country "Belgium" appears 100 times in the CSV file, the value 100 will be associated with Belgium, and the darkness of the color used to show the country will be chosen to show the intensity of 100 compared to the most cited country.
Author/Source: Google Charts
Author/Source: [http://www.simile-widgets.org/exhibit/ simile-widgets.org
From simile-widgets.org/exhibit : Exhibit 3.0 is a publishing framework for large-scale data-rich interactive Web pages.
Exhibit lets you easily create Web pages with advanced text search and filtering functionalities, with interactive maps, timelines, and other visualizations. The Exhibit 3.0 software has two separate modes: Scripted for building smaller in-browser Exhibits, and Staged for bigger server-based Exhibits.
From ModestMaps.com: odest 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.
It doesn't try to include every possible map control or layer type. It's designed to be a simple platform to build upon. The code is well-designed, tested and deployed widely - thousands of maps already use the toolkit. And while we aim for the highest performance and compatibility with new technology, it is tested against older browsers, including Internet Explorer.
Author/Source: Brian Suda, at netmagazine.com
Date: Sept. 2012
From netmagazine.com: From simple charts to complex maps and infographics, Brian Suda's round-up of the best – and mostly free – tools has everything you need to bring your data to life.
One of the most common questions I get asked is how to get started with data visualisations. Beyond following blogs, you need to practise – and to practise, you need to understand the tools available. In this article, I want to introduce you to 20 different tools for creating visualisations: from simple charts to complex graphs, maps and infographics. Almost everything here is available for free, and some you have probably installed already.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
Date: Feb. 2013
From NASA.gov/News : The colorful images chronicle the seasonal stirrings of our salty world: Pulses of freshwater gush from the Amazon River's mouth; an invisible seam divides the salty Arabian Sea from the fresher waters of the Bay of Bengal; a large patch of freshwater appears in the eastern tropical Pacific in the winter. These and other changes in ocean salinity patterns are revealed by the first full year of surface salinity data captured by NASA's Aquarius instrument.
Author/Source:Viegas and Wattenberg, http://hint.fm
From hint.fm: The map was created in the cold winter months when wind was much on our minds. It conveys the movement of the air in the most basic way: with visual motion. As an artwork that reflects the real-world, its emotional meaning changes from day to day. On calm days it can be a soothing meditation on the environment; during hurricanes it can become ominous and frightening.
Author/Source: Olivier H. Beauchesne at olihb.com
Implementation: Python and Java
Date: Jan 2013
From olihb.com ( first reported by fastCodesign.com): A large number of Wikipedia articles are geocoded. This means that when an article pertains to a location, its latitude and longitude are linked to the article. As you can imagine, this can be useful to generate insightful and eye-catching infographics. A while ago, a team at Oxford built this magnificent tool to illustrate the language boundaries in Wikipedia articles. This led me to wonder if it would be possible to extract the different topics in Wikipedia.
This is exactly what I managed to do in the past few days. I downloaded all of Wikipedia, extracted 300 different topics using a powerful clustering algorithm, projected all the geocoded articles on a map and highlighted the different clusters (or topics) in red. The results were much more interesting than I thought. For example, the map on the left shows all the articles related to mountains, peaks, summits, etc. in red on a blue base map. The highlighted articles from this topic match the main mountain ranges exactly.
The author also shares some of the tools that he used to gather the data, and parse it. Among them are:
Author/Source: Google Data Arts Team
From WebGL Globe (Google) : The WebGL Globe is an open platform for geographic data visualization. We encourage you to copy the code, add your own data, and create your own.
If you do create your own globe, please share it with us. We will post our favorite links below.
Latitude / longitude data spikes
Color gradients, based on data value or type
Mouse wheel to zoom
More features are under development...
Date: April 2012
- From dwtkns.com: [This was done by] Derek Watkins 2012 / @dwtkns. Data generalized from CIESIN Gridded Population of the World, 2010. Concept stolen from Bill Bunge's "Islands of Mankind" at John Krygier's blog.
Date: Jan 2012
From indiemapper.com: Indiemapper is a free online application from Axis Maps. It helps you make static, thematic maps from geographic data by bringing the best of traditional cartographic design to internet map-making.
From mapnificent.net: Mapnificent shows you the area you can reach with public transport from any point in a given time. It is available for major cities in the US and world wide.
You may be interested to watch a video about what Mapnificent can do, read a blog post about how Mapnificent works or jump to the Mapnificent API Documentation.
Mapnificent was originally inspired by MySociety's Mapumental which is sadly still in private beta.
Mapnificent was created by StefanWehrmeyer.
Date: June 2011
From flowingdata.com : Sometimes visualizing everything can turn out beautiful results. It seems to work especially well when the data is geographic, as we saw with All Streets, OpenStreetMap edits, and tourist maps. It turns out the everything method works for fictional worlds, too. The above and the video below are nothing but 11.3 million deaths by impact with object or terrain in the game Just Cause 2.
Date: May 2011
From : For this atlas, categories were generated based on different aspects of my life and public data I found about the location. The dataset was used to recount memories, actions and interactions I had in my current residence of Bennington, Vermont, USA. This data can be presented in a virtually unlimited number of ways, depending on what one wanted to do with the data. Although the information holds great value to the individual, it could also be seen as a commodity.
With this dataset an auto insurance company would be able to see how often, and at what speed I drove based on the time between latitude and longitude positions in the dataset. The company could then cross-reference this to the speed limits on the roads I was on and prorate my policy to that information. If a loved one in another location had access, they could see how I spent my time. The information could also be seen as a travel journal or even a location-based check in service. Knowing this information could help or hurt a relationship with others due to one's location, activity or what company they kept.
Date: May 2011
From www.guardian.co.uk: What will happen to the world's population by 2100? Spanish design house Bestiaro has produced this visualisation of the UN population data for us using its Impure design language. Explore the data by sliding through the years below - all figures in thousands
Author/Source: zeit.de, Germany
Date: March 2011
From zeit.de: Green party politician Malte Spitz sued to have German telecoms giant Deutsche Telekom hand over six months of his phone data that he then made available to ZEIT ONLINE. We combined this geolocation data with information relating to his life as a politician, such as Twitter feeds, blog entries and websites, all of which is all freely available on the internet.
Author/Source: The New York Times
Date: March 20, 2011
From 200th Birthday for the Map That Made New York, NYT: Two hundred years ago on Tuesday, the city’s street commissioners certified the no-frills street matrix that heralded New York’s transformation into the City of Angles — the rigid 90-degree grid that spurred unprecedented development, gave birth to vehicular gridlock and defiant jaywalking, and spawned a new breed of entrepreneurs who would exponentially raise the value of Manhattan’s real estate.
Author/Source: Google, reported by engadget.com
Date: Feb 2011
From engadget.com : Do you ever wish for an easier way to show your uninitiated friends what you mean when you say Android is growing? Well, here's the video for you: a Google-produced map of the world that throbs with Android activations over time, highlighted by some truly eye-opening flourishes in the immediate aftermath of marquee handset launches.
Date: Nov. 2009
From toddvanderlin.com : This project was a collaboration between Ryan Habbyshaw, Brad Simpson, and Todd Vanderlin. We began the project seven days ago when we learned of the competition and developed it from initial ideas to the final foldable posters within the week. Below is a brief description of the process of parsing, sorting, visualizing, and composing the final posters.
The subway data from August 12, 2009 was parsed in openFrameworks and Matlab using custom applications. Statistical analysis was performed in Matlab for subway loading (temporal and geographical including the entire MBTA, individual lines, and individual stations), rate of subway activity, and associated data. openFrameworks was used to generate the central visualizations for the project. Programs were written to interpret data that was processed into several arrangements to emphasize different trends within the data. Linear charts were used to display the activity of stations on a given line to show the geographic relation of activity throughout the course of the day. Circular 24-hour clocks for individual lines and stations were made in order to see the relative activity throughout the day. Pie charts were used to visualize rush hour commutes on each line, showing the contrast of activity during morning and evening rush hours. Histograms were used to show the breakdown of daily activity in a linear fashion. Layouts were done in Illustrator and visualizations were combined in order to create the five individual MBTA line posters and overall MBTA poster. Individual print posters are 33in x 23 in.
Date: Feb 2011
From mondeguinho.com : In this work the traffic of Lisbon is portrayed exploring metaphors of living organisms with circulatory problems. Rather than being an aesthetic essay or a set of decorative artifacts, my approach focuses on synthesizing and conveying meaning through data portrayal. This portrayal is embodied in the visualization: The Blood Vessels in the traffic of Lisbon. I use an adaptive physics system to build and manipulate the road network – the thickness, the color and the length of the vessels are excited by the number of vehicles and average velocity in each road. With this system I try to bypass the strictness of contemporary visualizations that depict data accurately through direct mappings.
Author/Source: science-metrix.com Olivier H. Beauchesne
Date: Jan 2011
From Beauchesne's blog: My employer, Science-Metrix, is bibliometric consulting firm. In other words, we engineer ways to measure the impact and growth of scientific discovery (and publications) in the world. To accomplish this, we license data from scientific journal aggregators like Elsevier’s Scopus and Thomson Reuter’s Web of Science. The data we have is bibliographic in nature. We don’t have the full text of the articles but rather citation networks, authors and their affiliations, abstracts, etc.
From this data, I extracted and aggregated scientific collaboration between cities all over the world. For example, if a UCLA researcher published a paper with a colleague at the University of Tokyo, this would create an instance of collaboration between Los Angeles and Tokyo. The result of this process is a very long list of city pairs, like Los Angeles-Tokyo, and the number of instances of scientific collaboration between them. Following that, I used the geoname.org database to convert the cities’ names to geographical coordinates.
Implementation: Google-Maps + Flash?
Date: Feb. 2010
A short film using Google-Maps Satellite view to show a car chase in New York City.
Author/Source: Golden Section Graphics
From GoldenSectionGraphics.com: For the Goethe Institut, we designed a version in DIN A0 size (33.1 in × 46.8 in) of our graphic »German spoken«. But, instead of using the 700 words we processed in the earlier version for Vanity Fair (issue 11/2007), we used about 2,000 of 2,500 terms in this new king-sized »emigrated words« poster. The Institute collected them in an initiative from all over the world.
Author/Source: Brent Millikan, InternationalRivers.org
Implementation: Google Earth
From The Huffington Post, Patrick McCully writes: Deep in the Amazon rainforest, the Brazilian government wants to build a massive, nasty dam called Belo Monte. The hydropower plant has long been at the center of a lopsided battle between Brazil's powerful hydro-industrial complex -- with full backing from President Lula and his government -- and the country's indigenous people and environmental and social activists. [...]
- Provided by Jon Caris, GIS Specialist, Smith College
Visualizing BP's Oil Spill: SVG Animation
Author/Source: Ruth Lang, uismedia, www.mappetizer.de
- Mappetizer, SVG Animation
Date: 3. August 2010
- Background-Image: MODIS-Terra, USA7 Subset - Aqua 1km True Color image for 2010/129 (05/09/10)
- NOAA Satellite and Information Service
- under CC-by-sa License.
- All texts under the GNU Free Documentation License.
- GeoNames under CC-License.
Implementation: GoogleEarth API + Track
Date: July 2010
From GoogleGeoDevelopers.com: We wanted a better way to represent movement on and above the globe. Time animation works well, but from a KML standpoint it required very bulky files. In order to “move” a <Point>, you created a new <Placemark> for each time segment. Your <Point> didn’t actually move, it merely was replicated at a different place. This made animating your path rather cumbersome. Instead, we wanted a smoother experience, and one that allowed you to truly animate a <Geometry>. So, we created <Track>. To get a real sense of the power of <Track>, check out this video.
Also of interest is the Tips and Tricks for Google Earth session at Google I/O
Category: Geographical location
from weeplaces.com: WeePlaces helps users organize and share their geolocation content. Users can create personal “geo-profiles” where users have the flexibility to share their checkins content how they want.
Author/Source: Aaron Koblin
From the New York Times: The animations, and a series of equally hypnotic still images, were created by Aaron Koblin, a young “data driven” graphic artist and game designer, originally as part of a broader “Celestial Mechanics” project at the University of California, Los Angeles.
From cabspotting.org: Cabspotting traces San Francisco's taxi cabs as they travel throughout the Bay Area. The patterns traced by each cab create a living and always-changing map of city life. This map hints at economic, social, and cultural trends that are otherwise invisible. The Exploratorium has invited artists and researchers to use this information to reveal these "Invisible Dynamics."
Author/Source: Eric Fischer, San Francisco
The animation (visible on Flickr) shows a whole month of bus traffic in San Francisco. The data points are shown by themselves, without any superposition of a map of the city, but the pattern of traffic quickly highlights the geography of the city.
See the animation on FlowingData.com.
from Polymaps.org: Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps.
Author/Source: Adam Nieman
From the New York Times: In 2003 Adam Nieman created the image above, illustrating the volume of the world’s oceans and atmosphere (if the air were all at sea-level density) by rendering them as spheres sitting next to the Earth instead of spread out over its surface.
And from the USGS Web site, this interesting picture showing just the water.
From Xiaoji Chen's page: What is your mental map of a city? I bet it’s not measured in miles. This project is part of my work in the SENSEable City’s workshop this semester. In these distorted maps of Paris, the distance between a spot and the city center is not proportional to their geographical distance, but the cost taken to get there.
Standard map vs. driving time map of Paris: the city center expands from congestion, and the edge is denser.
The answer for creating geographical maps with augmented data: Google Map API and Google Map Mashup.
Google allows one to include its maps in a Web site, and to superimpose on the map information that is user specific.
- Here’s a good example for a campus
- There are plenty of other sites using Google Maps: a list of examples is available here
- One can also embed videos in the tooltips, as examplified here
Category: Newsprint, Geographic
This is a dynamic display of the number of medals obtained at various olympics. This is nicely done, and uses some form of circle packing.
Author/Source: Politecnico di Milano
CityMurmur is a Web application that periodically scans a pool of news sources, blogs, and online newspapers searching for references to local streets, points of interest and areas of the city. using this information the application is then able to plot topographical and semantic maps of the city according to the topic discussed by the news source( culture, society,...), the source's topology (blogs, online newspapers), and its scale (local media, regional media).
|You can remix, tweak, and build upon this page non-commercially. Your work must acknowledge Dominique Thiebaut as its author and be non-commercial.|