Aug 6, 2015
Run through of common and uncommon types of visualisations. The live examples were created using Protovis, an open-source language for web-based data visualization.
seen from Malaysia
seen from Australia
seen from Hong Kong SAR China
seen from China
seen from Malaysia
seen from China
seen from Malaysia
seen from South Korea
seen from Türkiye
seen from Philippines
seen from Malaysia
seen from United States
seen from United States
seen from China
seen from Sweden
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
Run through of common and uncommon types of visualisations. The live examples were created using Protovis, an open-source language for web-based data visualization.
Protovis has been superseded by d3.js, but one of the examples I found most compelling from that platform was the Job Voyager. This tool allowed users to dynamically filter a time-sequential dataset - the demonstration was to display self-reported occupations from census data going back about 150 years.
Type "farm" in the filter box to see farming occupations disappear from the labor force. Other interesting filters are "type" and "secr".
I am not (yet) literate enough with d3.js to recreate this display, and haven't seen it surface yet from anyone else. I'm tempted to use this as a model, however, for a dataset that we are collecting of terms that run through our search interfaces.
Interesting Categories of Chart Types on this page.
Arc Diagram via Protovis
Adding SVG Dashed Line Array Support into Protovis
Recently I wanted to draw dashed lines in Protovis, this particular case was to represent missing data in a time series line chart.
Protovis doesn't support this natively, and is now no-longer maintained with the Standford Visualisation guys preferring D3.js these days.
However, adding in support for dashed lines wasn't too hard, there were a few posts on google groups mentioning how to add it to V3.2, I was using the latest V3.3.1 (the last and most recent version) so I forked it on GitHub and made the changes, mainly adding in options and defaults for the SVG1.1 stroke-dasharray attribute.
You can then do something like the following to create various dashed lines, see the SVG docs for more info.
context.add(pv.Line) .data(myData) .left(function(d) x(d.x)) .bottom(function(d) y(d.y)) .strokeStyle(function(d) d.colour) .segmented(true) .strokeDasharray('2,2') .lineWidth(2);
NB: You'll need to set the segmented attribute if you want to have parts of lines dashed and others not, etc, just like for colours and other styles.
The new fork is available here, and the commit log shows just what was added for this support- as you can see it's not a lot, and might serve other people well if they wish to add other SVG options to Protovis, or just draw some dashed lines :-)
Mocht je zelf aan de slag willen met datavisualisatie, dan kom je vaak vrij snel tot de conclusie dat voor maatwerk visualisatie je eigenlijk niet onder programmeren uit komt. Maar hoe dat je dat, een data visualisatie programmeren, en met welke tools? Op deze website is een handig overzicht te zien van verschillende tutorials met de op dit moment bekende frameworks voor datavisualisatie en data bewerking. Erg handig als zelf eens met code aan de slag wil!
Perfect for infrastructure monitoring, user activity aggregates, and twitter stream data. Built on node.js + mongodb + D3 (sucessor to Protovis)
When Does Crime Happen?
Joe Golike and Sha Hwang of Trulia take a deeper look at when crime typically happens throughout the day in 25 big cities across the United States. The result, When does crime happen? is a set of interactive stack area charts that allow for detailed comparison between different types of crimes and high-level comparison between different cities.
Via Benjamin Wiederkehr