Datavisualization.chConceptShowcases

Avatar Benjamin Avatar Christian

Research findings in data visualization by Christian Siegrist & Benjamin Wiederkehr

253D 2.7777777777778Academic 41.666666666667Animation 52.777777777778API 25Application 5.5555555555556Architecture 5.5555555555556Arduino 5.5555555555556AreaChart 11.111111111111Audio 25BarChart 16.666666666667Biology 8.3333333333333Book 16.666666666667Browser 11.111111111111BubbleChart 13.888888888889Charts 8.3333333333333Chronological 2.7777777777778Client 2.7777777777778Cluster 13.888888888889Collection 16.666666666667Color 5.5555555555556Communication 8.3333333333333Community 13.888888888889Comparison 30.555555555556Conference 11.111111111111Content 2.7777777777778CrisisManagement 8.3333333333333Crowdsourcing 11.111111111111DangerCadastre 2.7777777777778DangerClasses 13.888888888889DataMining 2.7777777777778Definitions 2.7777777777778Demographics 11.111111111111Design 8.3333333333333Diagram 25Economics 2.7777777777778Education 2.7777777777778Emotion 16.666666666667Environmental 8.3333333333333Feed 2.7777777777778Filter 16.666666666667Financial 75Flash 2.7777777777778Flex 8.3333333333333Flowchart 2.7777777777778FlowMap 2.7777777777778Genealogy 2.7777777777778Generative 2.7777777777778Genomics 38.888888888889Geo 16.666666666667Google 5.5555555555556GoogleEarth 8.3333333333333Government 2.7777777777778Granulation 2.7777777777778Grid 5.5555555555556GUI 16.666666666667Health 52.777777777778Heatmap 2.7777777777778Hierarchy 2.7777777777778History 8.3333333333333Icons 11.111111111111Illustration 8.3333333333333Images 75Infographics 2.7777777777778Information Architecture 2.7777777777778Inspiration 2.7777777777778Installation 8.3333333333333Interaction 5.5555555555556Interactive 30.555555555556Internet 2.7777777777778Interview 2.7777777777778Isometry 25JavaScript 11.111111111111Keynote 13.888888888889Knowledge 16.666666666667Library 8.3333333333333LineChart 2.7777777777778Malofiej 100Mapping 2.7777777777778Media 2.7777777777778Meteorological 2.7777777777778Metrics 5.5555555555556ModestMaps 2.7777777777778Monitoring 22.222222222222Network 22.222222222222News 2.7777777777778Nomenclature 13.888888888889no_image 8.3333333333333Opinion 2.7777777777778Paper 8.3333333333333Papervision3D 2.7777777777778Parameter 8.3333333333333Pattern 5.5555555555556Photography 2.7777777777778PhysicalComputing 5.5555555555556Physics 22.222222222222Pie Chart 41.666666666667Politics 25Print 50Processing 2.7777777777778Python 47.222222222222Radial 2.7777777777778RDF 2.7777777777778Real Estate 5.5555555555556Real-time 8.3333333333333Relation 13.888888888889RelationCircle 2.7777777777778Religion 5.5555555555556Report 16.666666666667Resource 5.5555555555556RiskCadastre 2.7777777777778RiskProfile 2.7777777777778ROI 5.5555555555556Ruby 8.3333333333333Sankey 16.666666666667Scatterplot 5.5555555555556Science 2.7777777777778Seadragon 13.888888888889Search 2.7777777777778Security 5.5555555555556SEE#4 8.3333333333333Silverlight 22.222222222222Social 2.7777777777778Sports 5.5555555555556Springs 11.111111111111StackedBarChart 2.7777777777778Storytelling 2.7777777777778Structure 2.7777777777778Swarm 2.7777777777778Table 5.5555555555556Tableau 8.3333333333333TabularData 5.5555555555556Tactile 5.5555555555556Taxonomy 2.7777777777778Technology 8.3333333333333Theory 13.888888888889Timeline 2.7777777777778TouchScreen 5.5555555555556Traffic 2.7777777777778Transformation 8.3333333333333TreeMap 25Twitter 25Typography 38.888888888889Video 2.7777777777778Wearables 2.7777777777778Weather 2.7777777777778Web 5.5555555555556Wikipedia 5.5555555555556Workshop 2.7777777777778XML

Mozilla LizardReader Concept

Mozilla recently made an open call to designers to get involved in their project “Lizard Reader”. Lizard Reader was created by Les Orchard and is an aggregator for various new feeds from the Mozilla community. Tweets, blog posts, bug reports, wiki changes, code submits, etc get collected. The opportunity for designers is to submit concepts, sketches or prototypes of a intuitive, easy readable and fun frontend for the engine.

Our concept

We here at Datavisualization.ch are very fond of the open source mentality and are using most of the Mozilla products on a daily basis. Therefore we couldn’t let the chance pass us by and not submitting something. So here goes my concept:

I’ve chosen the sea as a metaphore. News items get dropped into it and then float to the ground where they get arranged and archived just like sediments in the sea. The names of the authors or creators float in the air and arrange themselves just like a swarm of birds.News items basically consist of an author, date, title, body text and a link to the original ressource. Items can be viewed in a more detailed version by clicking on it.

Lizard Reader Default

By hovering over a name one can see the items by this author.
Lizard Reader Connection

Lizard Reader Connections

When a post is viewed in more detail it pulls related posts in a hierarchic view. Related posts could be by the same author, covering the same topic, edits on the same wiki page or reporting of the same bug.
Lizard Reader Hierarchy

To get an overview over past days the user can “dig” deeper in the ground and reveal past layers of sediments. By the density and chromaticity of the layer one can judge what happened during the day without having to view every post by itself. This creates a fingerprint and patterns for different activities in the community could emerge.
Lizard Reader Timeline

I encourage you to leave your feedback about the visualization – I know there’s always space for improvement.


Enjoy further articles


You might also like


  • What a beautiful concept! I love the sea metaphor, I can already see how the items sink down to the ground. And with these names floating in the sky it's as if they sent some oxygen down to their news items, the way they're hooked up and all.
    But why do you use these tiny rectangles at the bottom? Couldn't these be as wide as the title bar in the original items? Maybe they could even contain the first line of the first paragraph. This would of course take slightly more space, but hey, the stack could be _meters_ deep …
    Oh, and I truly like this color scheme!
  • @Peter:
    I thought about using bigger archived posts at the bottom. I decided to show the title / date by hovering over the item and then revealing all the details by clicking on it. I'd like to let the width adapt to the availyble space and keep all items of one by on the same line. This way the user could tell the density of posts of a day just by looking at the relative thickess of the items themselves. In the visualization all items have the same size, so this could be misleading. Imagine a variation in thickness of the items from line to line and the fingerprint would be even more obvious.
  • Beautiful heat map... who decide the tag?
  • @Web analytics:
    Not sure if i got your question right, but the tag is given by the source. All entries are aggregated from different sources like Twitter, Wiki, Blogs, Bug Reporting etc. therefore the color depends on the source.

    The names floating above are the names of the authors of the posts.
blog comments powered by Disqus

Read on

Browse our content for more data visualization goodies.

"Graphics elegance is often found in simplicity of design and complexity of data." –Edward R. Tufte

© 2010 by Datavisualization.ch