Skip to content


Category Archives: DesignDemo

  1. DesignDemo has Moved to UI Demo

    DesignDemo has moved to its own url uidemo.com. Designdemo started out in 2006 as a category in my personal blog which focused on screencasts of data visualizations. After much thought I’ve decided to move it to its own domain. The new site UI Demo is an extension of the original idea where we will focus our screencasts on more than just visualizations.
    Read more

    3 comments - Posted in DesignDemo. - Tagged with ,

  2. Jobs Growth Forecast Visualization – USA Today

    Screenshot of the the USA Today jobs growth forecast visualization

    Screenshot of the the USA Today jobs growth forecast visualization

    USA Today created a nice visualization of jobs growth between 2010 – 2013. It’s interesting to see the varience in different states, cities and job sectors.

    Read more

    1 comment - Posted in DesignDemo. -

  3. How Different Groups Spend Their Day – NYTimes Interactive

    nyt-hg

    The American Time Use Survey asks thousands of American residents to recall every minute of a day. Here is how people over age 15 spent their time in 2008.
    Read more

    1 comment - Posted in DesignDemo. - Tagged with , ,

  4. Personas – How Does the Internet See You?

    personas

    Personas is a component of the Metropath(ologies) exhibit, currently on display until Sept 09 at the MIT Museum by the Sociable Media Group from the MIT Media Lab (Please contact us if you want to show it next!). It uses sophisticated natural language processing and the Internet to create a data portrait of one’s aggregated online identity. In short, Personas shows you how the Internet sees you.
    Read more

    Comments Off - Posted in DesignDemo. - Tagged with ,

  5. Nexus – Facebook Friends Visualization

    nexus

    Nexus is a Facebook visualization which creates an interactive image with your friends’ connections and their shared interests.
    Read more

    Comments Off - Posted in DesignDemo. - Tagged with ,

  6. HTML5 Canvas and Audio Experiment

    html5

    This awesome project was created by Sebastian Deutsch to visualize Twitter streams sync’d to music using HTML5 and Processing.

    “We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen”.
    Read more

    Comments Off - Posted in DesignDemo. - Tagged with ,

  7. What Britain Eats – Three Decades of Grocery Shopping

    whatbritaineats

    “The landscape of British eating has changed dramatically in the last three decades. In the above interactive visualisation, we’ve documented the changing face of our grocery shopping, whether it be the rise and rise of the banana, the decline of liver, the growth of the ready meal, or the determined plod of the pork sausage. The data comes from DEFRA, which keeps an extraordinarily rich, but mostly dormant, archive on its website. We’ve brought it to life with what we think is an innovative tool, produced with the help our designer, Marcin Ignac. The icons on the left represent 5 main food ‘types’ – fats, fish, fruit, meat and vegetables. Click on any section of the donut to see how consumption of that food group has changed, or scroll along the time line for any one food to see its percentage share change in the donut”.
    Read more

    Comments Off - Posted in DesignDemo. -

  8. OECD Factbook eXplorer – World Data Visualization

    oecd

    “The OECD countries are displayed in 4 views for TL2 in start-up mode – each view represents a continent. A set of indicators is pre-loaded for this territorial level. The scatter plot shows 4 indicators. The indicatos´ names are shown along the two axes in the selection boxes. The selection box for the dot size is found above the scatter plot together with a slider controlling the size of the dot. Storytelling is available in the right view. Three stories are pre-loaded: TL2, TL3″
    Read more

    Comments Off - Posted in DesignDemo. -

  9. Genealogy of Influence Viewer

    genealogyofInfluence

    “This project is a Prefuse flare based visualization of the graph of influence nodes on freebase.com. The Genealogy of Influence project was started by Mike Love in the summer of 2005. In July 2007, Mike added the data to Freebase and ever since it is now growing on freebase.com on a daily basis through input of the freebase”.
    Read more

    Comments Off - Posted in DesignDemo. -

  10. Twitter StreamGraph Visualization

    Twitter-StreamGraphs-1

    “A StreamGraph is shown for the latest 1000 tweets which contain the search word. The default search query is ‘data visualization’ but a new one can be typed into the text box at the top of the application. You can also enter a Twitter ID preceded by the ‘@’ symbol to see the latest tweets from that user. A parameter to the URL can be used to specify the initial search word. For example, use http://www.neoformix.com/Projects/TwitterStreamGraphs/view.php?q=coffee to see the latest tweets about coffee.”
    Read more

    Comments Off - Posted in DesignDemo. -

  11. Valence – Relationships of Large Data Sets

    valence

    “Valence is a set of software sketches about building representations that explore the structures and relationships inside very large sets of information”. This project was created by the awesome Ben Fry.
    Read more

    Comments Off - Posted in DesignDemo. -

  12. Blooming Numbers – The Cultural Context of Numbers

    bloomingNumbers

    This project was an MFA thesis in computer graphics by Yuri Lee at the Rochester Institute of Technology. The goal of the project is to visualize the relationships between cultural contexts and the preferences of numbers in interactive and dynamic ways
    Read more

    Comments Off - Posted in DesignDemo. -

  13. Social Collider – Twitter Visualization

    socialcollider1

    The Social Collider reveals cross-connections between conversations on Twitter.

    With the Internet’s promise of instant and absolute connectedness, two things appear to be curiously underrepresented: both temporal and lateral perspective of our data-trails. Yet, the amount of data we are constantly producing provides a whole world of contexts, many of which can reveal astonishing relationships if only looked at through time.
    Read more

    Comments Off - Posted in DesignDemo. -

  14. Universe by Johnathan Harris

    universe

    Universe is a system that supports the exploration of personal mythology, allowing each of us to find our own constellations, based on our own interests and curiosities. Everyone’s path through Universe is different, just as everyone’s path through life is different. Using the metaphor of an interactive night sky, Universe presents an immersive environment for navigating the world’s contemporary mythology, as found online in global news and information from Daylife.
    Read more

    Comments Off - Posted in DesignDemo. - Tagged with ,

  15. Britain From Above

    britainfromabove

    An epic journey revealing the secrets, patterns and hidden rhythms of our lives from a striking new perspective.

    Join host Andrew Marr as he discovers how each and every one of us is interconnecting making Britain what it is today.

    Britain looks very different from the skies. From a bird’s eye view of the nation, its workings, cities, landscapes and peoples are revealed and re-discovered in new and extraordinary ways.

    Cutting edge technology allows you to see through cloud cover, navigate the landscape and witness familiar sights as never seen before.
    Read more

    Comments Off - Posted in DesignDemo. - Tagged with ,

  16. geoGreeting – Messages Created From Aerial Building Views

    geogreeting

    Your greeted with the cryptic message, “The surface of the earth holds a message for you. You just need to look a little closer.” Very Matrix like, but true with this very clever visualization. As the Jesse Vig the developer stated, “While working on a different Google Maps project, I noticed that a number of buildings looked like letters of the alphabet when viewed from above. This is the point where I should have just said ‘hmmm, good observation’ and gone on with my life. But I didn’t and that’s why this website is here.”

    Read more

    No comments - Posted in DesignDemo. - Tagged with , ,

  17. Telecommunications Visualization

    image “New York Talk Exchange illustrates the global exchange of information in real time by visualizing volumes of long distance telephone and IP (Internet Protocol) data flowing between New York and cities around the world. In an information age, telecommunications such as the Internet and the telephone bind people across space by eviscerating the constraints of distance. To reveal the relationships that New Yorkers have with the rest of the world, New York Talk Exchange asks: How does the city of New York connect to other cities? With which cities does New York have the strongest ties and how do these relationships shift with time? How does the rest of the world reach into the neighborhoods of New York?”

    Read more

    No comments - Posted in DesignDemo. -

  18. Mapjack – Street View Mapping Visualization

    image “Mapjack.com showcases a new level of mapping technology. What others have done with NASA budgets and Star Wars-like equipment, we’ve done on a shoestring budget, along with a few trips to Radio Shack. Specifically, we developed an array of proprietary electronics, hardware and software tools that enable us to capture an entire city’s streets with relative ease and excellent image quality. We have a complete low-cost scalable system encompassing the entire work-flow process needed for Immersive Street-Side Imagery, from picture gathering to post-processing to assembling on a Website.”

    Read more

    No comments - Posted in DesignDemo. -

  19. MIT Reality Mining Visualization

    image “Reality Mining defines the collection of machine-sensed environmental data pertaining to human social behavior. This new paradigm of data mining makes possible the modeling of conversation context, proximity sensing, and temporospatial location throughout large communities of individuals. Mobile phones (and similarly innocuous devices) are used for data collection, opening social network analysis to new methods of empirical stochastic modeling.”

    Read more

    No comments - Posted in DesignDemo. -

  20. Macrosense – Real-Time Location Data

    image “Macrosense is the world’s first platform capable of collecting and analyzing massive amounts of anonymous, aggregate location data in real-time. At the heart of Macrosense are powerful machine learning algorithms that process time-stamped location data and metadata streams from heterogeneous sources – GPS, WiFi positioning, cell tower triangulation, RFID and other sensors – and empower companies and investors to better understand and predict human behavior on a macro scale.”

    Read more

    No comments - Posted in DesignDemo. -

  21. Amazon Bookstore Visualization

    image Have you ever wanted to browse the bookstore shelves online? Zoomii is a visualization where you can do just that. To quote the founder, “Why Zoomii? Because I love bookstores. Spending afternoons wandering the shelves. Happening across great books I didn’t even know existed. But it’s an experience I never found online. Online bookstores are wonderful. They’ve got amazing prices, huge selections, and they’re open all the time. If you know exactly what you want, they’re perfect. But somehow I kept coming back to the bookstore just to browse. Zoomii is my attempt to bring online as much of the real bookstore experience as possible.” The application was created by Chris Thiessen. NIce job!

    Read more

    No comments - Posted in DesignDemo. -

  22. The Sheep Market

    image While this isn’t a new project it is one worth looking at. “The sheep market is a collection of 10,000 sheep created by workers on Amazon’s Mechanical Turk. Each worker was paid $.02 (US) to draw a sheep facing left.” You can also purchase the sheep through the site or email them to a friend. I’m not sure if any were actually sold but the idea of art and commerce is always a nice idea. The project was created by Aeron Koblin in 2006 with flash.

    Read more

    No comments - Posted in DesignDemo. -

  23. White Spectrum – Comments Visualization

    image The BBC has created a unique way to visualize comments on central question. In this case the question was, (Are white working class people ingored in Britain?). As they state, “spectrum is a different way of presenting a BBC News Have Your Say debate. It allows you to investigate the dabate around BBC 2’s White Season by associating different comments by emotion, location and similarity”. They state in the FAQ that the data is not an opinion poll and is not statistically valid, however, it is a visual way to get an impression of the debate. I enjoyed playing with the filters and clicking on the comments. The key was easy to understand and always there when you need it. The only thing I wish the visualization had was a way to tell which comments I had already clicked on while using any filter. Overall, very well done and engaging.

    Read more

    No comments - Posted in DesignDemo. -

  24. Travel Time Tube Map

    image “Click on or select from the dropdown a station to see the London Underground map reorganise around the times of travel from that station. Shortest paths are used to place the other stations – radius is proportional to time to travel, and angle should be correct for as-the-crow-flies direction on a map. The concentric circles are at 10 minute intervals. Press ‘g’ to get back to the geographical tube map.” This project was created by Tom Carden with the Processing Visualization Language.

    Read more

    No comments - Posted in DesignDemo. -

  25. Code_Swarm – Organic Software Visualization

    image This is a visualization created by Michael Ogawa and shows the development of software over time. I’ve often wondered how much work went in to creating something like Apache. This visualizations shows you all of the code changes that go into large scale software. Michael used the processing visualization language to create this project. This is how it works, “This visualization, called code_swarm, shows the history of commits in a software project. A commit happens when a developer makes changes to the code or documents and transfers them into the central project repository. Both developers and files are represented as moving elements. When a developer commits a file, it lights up and flies towards that developer. Files are colored according to their purpose, such as whether they are source code or a document. If files or developers have not been active for a while, they will fade away. A histogram at the bottom keeps a reminder of what has come before.”

    Read more

    No comments - Posted in DesignDemo. -