web visualization do you see what I see?
<ul><li>viz </li></ul>ux examples technologies concepts concepts methods examples
<ul><li>viz </li></ul>concepts methods examples examples
stamen http://stamen.com/clients/cabspotting
visualising radio http://www.bbc.co.uk/blogs/radiolabs/2008/01/visualising_radio.shtml
radio http://www.princeton.edu/~ina/infographics/index.html
Great bear
Great bear http://informationarchitects.jp/web-trend-map-2008-beta/
<ul><li>viz </li></ul>concepts methods examples technologies
maps
maps
maps http://modestmaps.com/
 
Simile Project http://simile.mit.edu/timeline/
Google viz API
gapminder.org http://gapminder.org/
platforms http://www.dipity.com/
platforms
platforms http://flare.prefuse.org/
glue <ul><li>rest </li></ul><ul><li>Xml-rpc </li></ul><ul><li>rss </li></ul>
Yahoo pipes http://pipes.yahoo.com/pipes/
Yahoo pipes
<ul><li>viz </li></ul>concepts methods examples concepts
Illuminated manuscript
Virtruvian man
Edward Tufte
Edward Tufte
Ingo Günther <ul><li>TV Ownership </li></ul><ul><li>Multiply the number of daily TV deaths by the number of people owning ...
UML
GUI
So… this is not new <ul><li>…  but it is maturing </li></ul>see Eric Rodenbeck’s talk at  http://tinyurl.com/6lwezl
Ben Fry <ul><li>“… to see the forest and the trees at the same time …” </li></ul>
Patterns & Types <ul><li>Mapping </li></ul><ul><li>Time Series </li></ul><ul><li>Connections </li></ul><ul><li>Correlation...
Organic Information Design <ul><li>Structure </li></ul><ul><li>Appearance </li></ul><ul><li>Metabolism </li></ul><ul><li>G...
workflow acquire  parse filter mine represent refine interact
workflow <ul><li>acquire  </li></ul><ul><li>parse </li></ul><ul><li>filter </li></ul><ul><li>mine </li></ul><ul><li>repres...
concepts
concepts <ul><li>Jesse garret model </li></ul>
 
methods examples ux concepts
<ul><li>“ designing from the outside in ”  </li></ul><ul><li>Tim O’Reilly </li></ul>
<ul><li>“ designing from the outside in ”  </li></ul><ul><li>Tim O’Reilly </li></ul><ul><li>“ so products  know  what they...
<ul><li>“ designing from the outside in ”  </li></ul><ul><li>Tim O’Reilly </li></ul><ul><li>“ so products  know  what they...
examples ux methods
concept models <ul><li>person </li></ul>http://interaction08.ixda.org/Dan_Brown.php beliefs experiences holds about
Image: Bryce Glass http://soldierant.net
mental models <ul><li>mental models </li></ul>http://www.rosenfeldmedia.com/books/mental-models/
http://www.vk2zay.net/article.php/40 prototypes
prototypes
…  amongst others <ul><li>mental models </li></ul>http://www.rosenfeldmedia.com/books/mental-models/
ux examples
Jonathan Harris  http://iwantyoutowantme.org/   http://www.number27.org/
http://iwantyoutowantme.org/
http://iwantyoutowantme.org/
http://www.kartoo.com/
http://chicago.everyblock.com/
http://chicago.everyblock.com/
http://stamen.com/projects/oakland_crime_map
http://stamen.com/clients/digg
thanks [email_address]
Upcoming SlideShare
Loading in...5
×

jy-web-visualization-ux08-slides

1,377

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,377
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Characteristics of raw data - Steve Baty
  • Transcript of "jy-web-visualization-ux08-slides"

    1. 1. web visualization do you see what I see?
    2. 2. <ul><li>viz </li></ul>ux examples technologies concepts concepts methods examples
    3. 3. <ul><li>viz </li></ul>concepts methods examples examples
    4. 4. stamen http://stamen.com/clients/cabspotting
    5. 5. visualising radio http://www.bbc.co.uk/blogs/radiolabs/2008/01/visualising_radio.shtml
    6. 6. radio http://www.princeton.edu/~ina/infographics/index.html
    7. 7. Great bear
    8. 8. Great bear http://informationarchitects.jp/web-trend-map-2008-beta/
    9. 9. <ul><li>viz </li></ul>concepts methods examples technologies
    10. 10. maps
    11. 11. maps
    12. 12. maps http://modestmaps.com/
    13. 14. Simile Project http://simile.mit.edu/timeline/
    14. 15. Google viz API
    15. 16. gapminder.org http://gapminder.org/
    16. 17. platforms http://www.dipity.com/
    17. 18. platforms
    18. 19. platforms http://flare.prefuse.org/
    19. 20. glue <ul><li>rest </li></ul><ul><li>Xml-rpc </li></ul><ul><li>rss </li></ul>
    20. 21. Yahoo pipes http://pipes.yahoo.com/pipes/
    21. 22. Yahoo pipes
    22. 23. <ul><li>viz </li></ul>concepts methods examples concepts
    23. 24. Illuminated manuscript
    24. 25. Virtruvian man
    25. 26. Edward Tufte
    26. 27. Edward Tufte
    27. 28. Ingo Günther <ul><li>TV Ownership </li></ul><ul><li>Multiply the number of daily TV deaths by the number of people owning TV sets and subtract that number from the population. Most nations would disappear on a daily basis. </li></ul>http://worldprocessor.com/
    28. 29. UML
    29. 30. GUI
    30. 31. So… this is not new <ul><li>… but it is maturing </li></ul>see Eric Rodenbeck’s talk at http://tinyurl.com/6lwezl
    31. 32. Ben Fry <ul><li>“… to see the forest and the trees at the same time …” </li></ul>
    32. 33. Patterns & Types <ul><li>Mapping </li></ul><ul><li>Time Series </li></ul><ul><li>Connections </li></ul><ul><li>Correlations </li></ul><ul><li>Scatterplot Maps </li></ul><ul><li>Trees </li></ul><ul><li>Hierarchies </li></ul><ul><li>Recursion </li></ul><ul><li>Networks and Graphs </li></ul>
    33. 34. Organic Information Design <ul><li>Structure </li></ul><ul><li>Appearance </li></ul><ul><li>Metabolism </li></ul><ul><li>Growth </li></ul><ul><li>Homeostasis </li></ul><ul><li>Responsiveness </li></ul><ul><li>Adaptation </li></ul><ul><li>Movement </li></ul><ul><li>Reproduction </li></ul>http://acg.media.mit.edu/people/fry/thesis/
    34. 35. workflow acquire parse filter mine represent refine interact
    35. 36. workflow <ul><li>acquire </li></ul><ul><li>parse </li></ul><ul><li>filter </li></ul><ul><li>mine </li></ul><ul><li>represent </li></ul><ul><li>refine </li></ul><ul><li>interact </li></ul>computer science maths, stats, data mining comm design infovis, HCI, IxD
    36. 37. concepts
    37. 38. concepts <ul><li>Jesse garret model </li></ul>
    38. 40. methods examples ux concepts
    39. 41. <ul><li>“ designing from the outside in ” </li></ul><ul><li>Tim O’Reilly </li></ul>
    40. 42. <ul><li>“ designing from the outside in ” </li></ul><ul><li>Tim O’Reilly </li></ul><ul><li>“ so products know what they are ” </li></ul><ul><li>Jesse Garrett </li></ul>
    41. 43. <ul><li>“ designing from the outside in ” </li></ul><ul><li>Tim O’Reilly </li></ul><ul><li>“ so products know what they are ” </li></ul><ul><li>Jesse Garrett </li></ul><ul><li>“ held in an experience blueprint ” </li></ul><ul><li>Tim Brown </li></ul>
    42. 44. examples ux methods
    43. 45. concept models <ul><li>person </li></ul>http://interaction08.ixda.org/Dan_Brown.php beliefs experiences holds about
    44. 46. Image: Bryce Glass http://soldierant.net
    45. 47. mental models <ul><li>mental models </li></ul>http://www.rosenfeldmedia.com/books/mental-models/
    46. 48. http://www.vk2zay.net/article.php/40 prototypes
    47. 49. prototypes
    48. 50. … amongst others <ul><li>mental models </li></ul>http://www.rosenfeldmedia.com/books/mental-models/
    49. 51. ux examples
    50. 52. Jonathan Harris http://iwantyoutowantme.org/ http://www.number27.org/
    51. 53. http://iwantyoutowantme.org/
    52. 54. http://iwantyoutowantme.org/
    53. 55. http://www.kartoo.com/
    54. 56. http://chicago.everyblock.com/
    55. 57. http://chicago.everyblock.com/
    56. 58. http://stamen.com/projects/oakland_crime_map
    57. 59. http://stamen.com/clients/digg
    58. 60. thanks [email_address]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×