SlideShare une entreprise Scribd logo
VIZLAND RESEARCH
Marcus A. Gordon, MFA
OCAD University
© 2017 OCAD University Visual Analytics Lab
Research Brief
The VIZLAND project is one part of a comparative methodology research initiative
that contributes to the cataloguing and mobilization of common visual analytics,
visualization methods, information technologies, and tools.
The
Visualization
Landscape
The ability to query keywords associated to
these visualizations is to give the user quick
access to matching keywords that relate to
the visuals. This is done by the user typically
to match functions that are prominent in
selected visualizations.
Data Source:
Severino Ribecca
Data Visualisation Catalogue
The Visualization Landscape
Overview
The purpose of this project is to build a queryable and visual database of over 60+ data
visualizations. Amidst an upcoming design charrette, my goal was to find the quickest and
simplest way to expose our participants to the variety of data visualization options at their
disposal. Most importantly, it was necessary for them to have an undesrtanding of the most
common types out there, in order to facilitate decision making in their respective groups.
patterns SEARCH
The Visualization Landscape
In this case, I chose Severino Ribecca’s Data Visualisation Catalogue.
Why? Most specifically because he tasked himself to find to make a
comprehensive descriptions of common visualization methods.
Locate a source for the info
This was manually done by transcribing all 60 definitions
and include Ribecca’s dataviz clip art.
Create the dataset
To visualize with a method that anyone can see and read,
that was quick to absorb and quick enough to put together.
Visualize the data
Steps to 1.0
These are the high level steps to prototype
VIZLAND v.1.0.
Step 1
Step 2
Step 3
The Visualization Landscape
The Visualization Landscape
The Visualization Landscape
The Visualization Landscape
The Visualization Landscape
VIZLAND
on mobile
Works on multiple mobile platforms including Android, iOS, and desktop
platforms MacOS and Windows.
The Visualization Landscape
VIZLAND
on tablet
The Visualization Landscape
Works on multiple mobile platforms including Android, iOS, and desktop
platforms MacOS and Windows.
VIZLAND
on laptop
Works on multiple mobile platforms including Android,
iOS, and desktop platforms MacOS and Windows.
The Visualization Landscape
VIZLAND
on desktop
Works on multiple mobile platforms including Android,
iOS, and desktop platforms MacOS and Windows.
The Visualization Landscape
Thinking mostly in terms of navigation, selection, and deep
dive capabilities.
Isolate prototype limitations
Determine web solutions to the listed limitations.
Design the web version
Learn enough about Node.js to create a self-sustained
application for web and desktop platforms.
Deploy new prototype
Step 4
Step 5
Step 6
The Visualization Landscape
Web Version
Moving VIZLAND from a mind map to a new
visualization method and interface on the web.
New VIZLAND
Prototype
The Visualization Landscape
The prototyping process that I took to start this, was very much influenced
by my desire to increase my use of the SVG file format for images (and
more), and the D3 visualization library. As a vector format and XML format,
its scalable and customizable like any other markup code. The fragment
test files here are numbered by the steps taken to do this:
Conversion
The Visualization Landscape
Research Question: Can a workable data structure be transferred from a portable
document format file (PDF) that is converted to a scalar vector format file (SVG),
that allows for it to be amendable by user interaction?
Data URI + SVG
The Visualization Landscape
Graphics are converted to a Data URI, like the Stream Graph thumbnail you see
here. This is a result of the conversion process.
Meteor Cloud
A work in progress, the meteor cloud visualization concept is, and, appears 2D, but is calculated in a volumetric way.
The idea is to have the aesthetic of this work in progress to be the center of VIZLAND’s new prototype interface.
The Visualization Landscape
Thank You
VIZLAND Research Overview

Contenu connexe

Similaire à VIZLAND Research Overview

literature survey for presentation in project
literature survey for presentation in projectliterature survey for presentation in project
literature survey for presentation in project
varayu2006
 
20130117 - Big Data Architectures
20130117 - Big Data Architectures20130117 - Big Data Architectures
20130117 - Big Data Architectures
BlueMetalInc
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
RapidValue
 
Alok Resume
Alok ResumeAlok Resume
Alok Resume
Alok Singh
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
jameswillweb
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
Melvin Thambi
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Debra Shapiro
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
Jack Molisani
 
InSight Studio LinkedIn.pdf
InSight Studio LinkedIn.pdfInSight Studio LinkedIn.pdf
InSight Studio LinkedIn.pdf
marketingEofactory
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Antonio De Pasquale
 
Q6
Q6Q6
Report_Wijaya
Report_WijayaReport_Wijaya
Report_Wijaya
Kimberly Wijaya
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience Cloud
Philipp Engel
 
GraphTour 2020 - Neo4j: What's New?
GraphTour 2020 - Neo4j: What's New?GraphTour 2020 - Neo4j: What's New?
GraphTour 2020 - Neo4j: What's New?
Neo4j
 
Sandeep-portfolio-2016
Sandeep-portfolio-2016Sandeep-portfolio-2016
Sandeep-portfolio-2016
Sandeep Zechariah George
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
Nate Walton
 
Big Data BizViz Analytics Platform Introduction
Big Data BizViz Analytics Platform IntroductionBig Data BizViz Analytics Platform Introduction
Big Data BizViz Analytics Platform Introduction
Big Data BizViz LLC
 
Geonode introduction
Geonode introductionGeonode introduction
Geonode introduction
Tek Kshetri
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
Lizzie Hodgson
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
Wenzhu Zou
 

Similaire à VIZLAND Research Overview (20)

literature survey for presentation in project
literature survey for presentation in projectliterature survey for presentation in project
literature survey for presentation in project
 
20130117 - Big Data Architectures
20130117 - Big Data Architectures20130117 - Big Data Architectures
20130117 - Big Data Architectures
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
Alok Resume
Alok ResumeAlok Resume
Alok Resume
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
 
InSight Studio LinkedIn.pdf
InSight Studio LinkedIn.pdfInSight Studio LinkedIn.pdf
InSight Studio LinkedIn.pdf
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Q6
Q6Q6
Q6
 
Report_Wijaya
Report_WijayaReport_Wijaya
Report_Wijaya
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience Cloud
 
GraphTour 2020 - Neo4j: What's New?
GraphTour 2020 - Neo4j: What's New?GraphTour 2020 - Neo4j: What's New?
GraphTour 2020 - Neo4j: What's New?
 
Sandeep-portfolio-2016
Sandeep-portfolio-2016Sandeep-portfolio-2016
Sandeep-portfolio-2016
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Big Data BizViz Analytics Platform Introduction
Big Data BizViz Analytics Platform IntroductionBig Data BizViz Analytics Platform Introduction
Big Data BizViz Analytics Platform Introduction
 
Geonode introduction
Geonode introductionGeonode introduction
Geonode introduction
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 

Dernier

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 

Dernier (20)

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 

VIZLAND Research Overview

  • 1. VIZLAND RESEARCH Marcus A. Gordon, MFA OCAD University © 2017 OCAD University Visual Analytics Lab
  • 2. Research Brief The VIZLAND project is one part of a comparative methodology research initiative that contributes to the cataloguing and mobilization of common visual analytics, visualization methods, information technologies, and tools.
  • 3. The Visualization Landscape The ability to query keywords associated to these visualizations is to give the user quick access to matching keywords that relate to the visuals. This is done by the user typically to match functions that are prominent in selected visualizations. Data Source: Severino Ribecca Data Visualisation Catalogue
  • 4. The Visualization Landscape Overview The purpose of this project is to build a queryable and visual database of over 60+ data visualizations. Amidst an upcoming design charrette, my goal was to find the quickest and simplest way to expose our participants to the variety of data visualization options at their disposal. Most importantly, it was necessary for them to have an undesrtanding of the most common types out there, in order to facilitate decision making in their respective groups.
  • 6. In this case, I chose Severino Ribecca’s Data Visualisation Catalogue. Why? Most specifically because he tasked himself to find to make a comprehensive descriptions of common visualization methods. Locate a source for the info This was manually done by transcribing all 60 definitions and include Ribecca’s dataviz clip art. Create the dataset To visualize with a method that anyone can see and read, that was quick to absorb and quick enough to put together. Visualize the data Steps to 1.0 These are the high level steps to prototype VIZLAND v.1.0. Step 1 Step 2 Step 3 The Visualization Landscape
  • 11. VIZLAND on mobile Works on multiple mobile platforms including Android, iOS, and desktop platforms MacOS and Windows. The Visualization Landscape
  • 12. VIZLAND on tablet The Visualization Landscape Works on multiple mobile platforms including Android, iOS, and desktop platforms MacOS and Windows.
  • 13. VIZLAND on laptop Works on multiple mobile platforms including Android, iOS, and desktop platforms MacOS and Windows. The Visualization Landscape
  • 14. VIZLAND on desktop Works on multiple mobile platforms including Android, iOS, and desktop platforms MacOS and Windows. The Visualization Landscape
  • 15. Thinking mostly in terms of navigation, selection, and deep dive capabilities. Isolate prototype limitations Determine web solutions to the listed limitations. Design the web version Learn enough about Node.js to create a self-sustained application for web and desktop platforms. Deploy new prototype Step 4 Step 5 Step 6 The Visualization Landscape Web Version Moving VIZLAND from a mind map to a new visualization method and interface on the web.
  • 16. New VIZLAND Prototype The Visualization Landscape The prototyping process that I took to start this, was very much influenced by my desire to increase my use of the SVG file format for images (and more), and the D3 visualization library. As a vector format and XML format, its scalable and customizable like any other markup code. The fragment test files here are numbered by the steps taken to do this:
  • 17. Conversion The Visualization Landscape Research Question: Can a workable data structure be transferred from a portable document format file (PDF) that is converted to a scalar vector format file (SVG), that allows for it to be amendable by user interaction?
  • 18. Data URI + SVG The Visualization Landscape Graphics are converted to a Data URI, like the Stream Graph thumbnail you see here. This is a result of the conversion process.
  • 19. Meteor Cloud A work in progress, the meteor cloud visualization concept is, and, appears 2D, but is calculated in a volumetric way. The idea is to have the aesthetic of this work in progress to be the center of VIZLAND’s new prototype interface. The Visualization Landscape
  • 20.