vis4.net/labs

Alpha-shapes aka concave hulls in d3

Gregor — Tue, 03 Jan 2012 00:24:41 +0000

I implemented a pretty simple algorithm which computes alpha-shapes aka. the concave hull of a point set. The main idea is to compute the Delaunay triangulation and then remove every triangle that has edges longer than “alpha”.

Thanks to the amazing visualization library d3, implementation was a matter of minutes.

HCL Colors in Chroma.js

Gregor — Sat, 17 Dec 2011 16:09:16 +0000

For my blog post “How To Avoid Equidistant HSV Colors” I created an interactive color space explorer, also known as “color selector”. It also allows to preview a set of linear interpolated equidistant colors. You might also want to check out Chroma.js, a library for lots of color related tasks.

Stuttgart 21: Referendum vs. Election results

Gregor — Thu, 01 Dec 2011 14:01:11 +0000

In Germany, there was quite a debate about the rebuilding of the Stuttgart main train station known as “Stuttgart 21″. Recently, people got the chance to vote for or against the rebuilding in a referendum. This graphic opposes the results of this referendum to the latest election results from six months ago.

(german only)

Map of Internet and Population

Gregor — Sat, 22 Oct 2011 14:05:41 +0000

With this map I tried to visualize the global digital divide. It shows more than 80,000 populated places in blue and about 350,000 locations of IP addresses in red. White dots indicate places where many people live and many IP addresses are available.

The IP address locations are taken from the GeoLiteCity database by MaxMind. The database of populated places is taken from geonames.org. The visual style is largely inspired by Eric Fischer’s wonderful Flickr-vs-Twitter maps.

Normal version
Hi-res version

Remake of Ben Fry’s Fortune 500 Viz

Gregor — Wed, 28 Sep 2011 08:30:32 +0000

Recently, Ben Fry published a great visualization that shows the Fortune 500 index from 1955 to 2010. It was built in Java, which Ben explained as follows:

The piece uses Java. I spent a few hours on a JavaScript version, but it ran at 3 frames per second (instead of 60; it’s like 1998 again!) It also required a 6 megabyte JSON file for all the data. No thanks.

Having read this, I instantly began thinking about how to implement the identical visualization in HTML5 using canvas. I played around a few hours and came up with this one.

Ben also noted that he didn’t want to deal with negative profits because of additional work for the log-scales. In my version I used a bipolar log-scale to display negative profits.

function bipolar_log(value) {
   if (Math.abs(value) < 1) return 0;
   else if (value > 0) return Math.log(value);
   else return -log(-value);
}

Fraction vs. Conscience

Gregor — Tue, 13 Sep 2011 13:11:15 +0000

The visualization shows the consensus of fractions at roll-call votes in the German Bundestag. The more closed a fraction vote, the closer the symbols move to the center. This way one can quickly find votings, where members were freed from their party discipline, such as the CDU/CSU MPs on issues of genetic engineering.

If you’re interested, there’s also an German article explaining some of the design decisions.

Streamgraph Library for AS3

Gregor — Fri, 12 Aug 2011 19:29:25 +0000

I ported the Processing code of the Streamgraph generator by Lee Byron and Martin Wattenberg to ActionScript. Also I added an user interface to play around with the streamgraphs. Find the source here and here.

Treemap Library for AS3

Gregor — Sun, 07 Aug 2011 21:39:41 +0000

I forked Josh Tynjala’s TreeMap Component for Adobe Flex on GitHub and created as3treemap, a lightweight and minimal treemapping library, out of it. This example shows the well-known package structure of the Flare visualization toolkit. Examples and demo implementation is available on GitHub, too.

Streets of Berlin

Gregor — Mon, 01 Aug 2011 15:56:51 +0000

Probably the cheapest visualization I ever created, but since Ben Fry has done the same before, I think I’m allowed to do so, too. This map simply shows all streets and railroads of Berlin. Likewise as in the US version, one can identify relevant geographic features like parks, rivers and lakes at places without streets.

Thanks to the kind folks at OpenStreetMaps and cloudmade.com, creating this image took me five minutes, literally. Three minutes for downloading the Illustrator document and two for a little editing.

Color Blindness Test Images

Gregor — Sun, 03 Jul 2011 15:59:22 +0000

I generated some Ishihara color blindness test images with Processing. Instead of numbers I used simple icons of things I knew my son would be able to name. Find the source files here. The icons are taken from thenounproject. Here’s why I did this.

Shortest Distances to Nuclear Reactors

Gregor — Mon, 07 Mar 2011 17:08:05 +0000

Created these maps right after the nuclear catastrophe in Japan in March 2011. Interestingly, in most countries there are no power plants near to the capital cities.

Visualizing Plagiarism

Gregor — Tue, 01 Mar 2011 18:40:56 +0000

Large bars = normal text line, small bars = footnote line. Dark red bars stand for full rip-offs and masked rip-offs, red bars represent other plagiarism categories (german). Created literally in the night before zu Guttenberg backed out as German minister of defence. Source: Guttenplag-Wiki.

Production vs. Consumption

Gregor — Tue, 11 Jan 2011 18:32:25 +0000

This Processing experiment was a kind of precursor for the Europe’s Energy project. Red circle represent energy consumption, yellow circles represent energy production, the y-position represents the ratio of consumption and production.

Inspired by David McCandless’ “Kyoto – who’s on target”, Data source: epp.eurostat.ec.europa.eu

Wikileaks Mirror Network

Gregor — Sun, 12 Dec 2010 17:51:48 +0000

This visualization is responsible for the all-time-highest peak in my visitor statistics. It shows how the network of Wikileaks mirror server evolves after the domain was blocked in many countries. I was able to create this interactive map in a few hours because I was working on OpenFlashMaps at the same time.

Twitter Live Map

Gregor — Wed, 17 Nov 2010 18:10:52 +0000

Live visualization of geo-tagged Twitter messages that were sent during the CASTOR transport in November 2010.

Additional Incomes of Parliamentarians

Gregor — Wed, 03 Nov 2010 02:46:20 +0000

A map of Germany with all members of the German Bundestag (MdB) represented by circles. The circles are positioned at the election district of each MdB, the color represents the political party and the size shows the annual extra income the MdB makes beside his political life.

Visualization of Isolines

Gregor — Fri, 01 Oct 2010 15:18:13 +0000

I implemented an isoline generation algorithm in ActionScript. See source file, if you like.

German Party Donations

Gregor — Fri, 01 Oct 2010 11:17:25 +0000

Visualization of around 300 donations given to German political parties. The minimum amount or each donation is 50k€.

Visualizing Network Traffic

Gregor — Fri, 17 Sep 2010 17:10:52 +0000

The initial data is collected using Wireshark Network Protocol Analyzer. Each package network route is resolved via traceroute and then mapped using the free GeoLiteCity database by MaxMind.

United States Poverty Map

Gregor — Wed, 01 Sep 2010 16:42:36 +0000

As a demonstration of my now-discontinued project OpenFlashMaps, I created this choroplet map of the United States. Those days I was kind of proud to manage rendering of such big maps in AS3. The data is taken from U.S. Census Bureau and shows the percentage of people living in poverty in 2006.

Experiments With Streamgraph Colors

Gregor — Fri, 27 Aug 2010 21:19:30 +0000

While I was playing around with streamgraphs, I created a color scale experimentation tool.

World Map Widget for Piwik

Gregor — Tue, 17 Aug 2010 09:40:55 +0000

Instead of proprietary tools like Google Analatics, I prefer using the open source analytics tool Piwik. However, since it is created mainly by volunteers, Piwik lacks some good visualizations. Before of the 1.0 release, there was just a plain table showing the visitor countries, which was something I could accept. Therefore I created this Flash-based map widget which is now part of the Piwik core. Here’s the related blog post on piwik.org.

Sunburst Browser Statistics

Gregor — Mon, 09 Aug 2010 15:44:53 +0000

I created this as a module for the opensource Piwik Web Analytics software.

World Map of Internet Adresses

Gregor — Tue, 08 Jun 2010 15:26:27 +0000

This visualizations shows the geographic location of 1,139,441,531 ip adresses. The locations are grouped by city, divided into four categories according to the total number of ip adresses belonging to a city. The categories are net-metropoles (more than 10,000,000 IPs), net-capitals (1,000,000 up tp 10,000,000 IPs), net-cities (100,000 up 1,000,000 IPs) and net-villages (fewer than 100,000 IPs). IP adresses that cannot be allocated to a city were left out.

I created this visualization using ActionScript, based on my classes for map projections and polygon maths, which you can download for own usage. The data was extracted from the free GeoLite-City database by MaxMind.

Showcase of Map Projections

Gregor — Thu, 01 Apr 2010 15:37:36 +0000

I created a sample application that shows a world maps in different map projections. You can change the projection using the menu at the bottom. Also you can filter out some map projections, e.g. to only display rectilinear map projections. The visualization of some projections (like the Orthographic Projection) still need a little more coding to be perfect (eg. removal of hidden lines and faces), but this was out of the scope of this demo.

World Biggest Companies

Gregor — Wed, 17 Feb 2010 18:01:36 +0000

A huge line chart of the 2000 biggest companies listed in the Forbes2000 index. Created with Processing. Here’s more information about the graphic.

Visualizing Postal Codes

Gregor — Thu, 22 Oct 2009 15:11:52 +0000

This is a blatant rip-off of an visualization example showed by Ben Fry in his book Visualizing Data. The difference is that I used German postal codes, build the visualization in Flash and took a more usable color scale.

Distinguishable Random Colors

Gregor — Fri, 11 Sep 2009 13:43:07 +0000

The human vision heavily depends on the photoreceptor cells found in the eye’s retina. Of the two types of cells, cones and rods, the cones are responsible for our color perception. To make it short, humans have like an RGB system of cones, which means that there are cones responsible for perceiving red, green and blue. Interestingly, these cones are not equally distributed. In fact, there are far more red-cones (64%) than green-cones (32%) and almost no blue-cones (2%), which is the reason why we are extremely good in distinguishing red from green and blue but very poor in distinguishing blue from green. This is good to know when it comes to automatically chosen colors in visualization. If one picks ten different colors, how can we make sure that the viewer will be able to see any differences between them all?

To investigate into this question, I created this little experiment.

Optimizing Text Readability

Gregor — Sun, 09 Aug 2009 15:05:49 +0000

Experimented with the HSL color space to increase text readability on white backgrounds.