JavaScript InfoVis Toolkit Overview - Featured Visualizations and Future Plans

•

4 likes•3,151 views

philogb

An overview of the JavaScript InfoVis Toolkit and some of the theory behind the implemented visualizations.

Technology

JavaScript InfoVis Toolkit

Nicolas Garcia Belmonte - Dec. 2009

Agenda

• JavaScript InfoVis Toolkit Overview
• Featured Visualizations
• What’s Next for the JIT

JavaScript InfoVis Toolkit

• Web Based Interactive Data
Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based

Modular
Grab only what you need

HyperTree
SunBurst
TreeMap
JavaScript InfoVis
ForceDirected
Toolkit
RGraph
Icicle
SpaceTree

Extensible
• Deﬁne custom Nodes and Edges

• Add Custom Animations (linear, Elastic, etc.)

Composable
Add Visualizations as Node/Edge rendering functions to
other visualizations

Featured Visualizations

• TreeMap
• RGraph
• HyperTree
• SpaceTree

TreeMap

Squariﬁed TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing

Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben
Shneiderman, Martin Wattenberg

TreeMap
SliceAndDice Squariﬁed Strip

order ordered unordered ordered
aspect ratios very high lowest medium
stability stable medium medium

RGraph

Animated Exploration of Dynamic Graphs with Radial Layout -
Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst

RGraph

• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and
Ordering
• Linear Transitions vs. EaseIn/Out Transitions

RGraph
Polar vs. Rectangular Interpolation

RGraph
Node Constraints:
Parent - Child angle

HyperTree

A focus+context technique based on Hyperbolic Geometry for
Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

HyperTree
Poincare Disk Model of
Hyperbolic Geometry

Circle Limit IV - Escher

SpaceTree

SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution
and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.
Bederson

SpaceTree
Only show Context-Related Nodes

What’s Next?
• SunBurst
• Force-Directed
• Icicle
• MultiTrees
• etc.

Questions?

Mail: philogb@gmail.com
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb

Similar to JavaScript InfoVis Toolkit Overview - Featured Visualizations and Future Plans

Evolution of the Graph SchemaJoshua Shinavier

GNO Code: Geospatial Visualization in the Browser - An OverviewRob Schley

Apache Giraph: start analyzing graph relationships in your bigdata in 45 minu...rhatr

Mike Goodchild's keynote - GISRUK 2010GISRUK conference

BigdataAbhishek Pamecha

Hide the Stack:Toward Usable Linked Dataaba-sah

AgensGraph: a Multi-model Graph Database based on PostgreSqlKisung Kim

A Graph is a Graph is a Graph: Equivalence, Transformation, and Composition o...Joshua Shinavier

Ling liu part 01：big graph processingjins0618

About Scanning and Metadata Standards - NEMO 2010University of Connecticut Libraries Map and Geographic Information Center - MAGIC

Spark summit europe 2015 magellanRam Sriharsha

Apache con big data 2015 magellanRam Sriharsha

(DAT203) Building Graph Databases on AWSAmazon Web Services

Cheetah:Data Warehouse on Top of MapReduceTilani Gunawardena PhD(UNIBAS), BSc(Pera), FHEA(UK), CEng, MIESL

Easing embedding learning by comprehensive transcription of heterogeneous inf...paper_reader

Graph Databasesthai

Navigating the Wide World of Data Visualization LibrariesKrist Wongsuphasawat

Bigdata analyticsKeshav Tripathy

RTree Spatial Indexing with MongoDB - MongoDC Nicholas Knize, Ph.D., GISP

Grails goes Graphdarthvader42

Similar to JavaScript InfoVis Toolkit Overview - Featured Visualizations and Future Plans (20)

Evolution of the Graph Schema

GNO Code: Geospatial Visualization in the Browser - An Overview

Apache Giraph: start analyzing graph relationships in your bigdata in 45 minu...

Mike Goodchild's keynote - GISRUK 2010

Bigdata

Hide the Stack:Toward Usable Linked Data

AgensGraph: a Multi-model Graph Database based on PostgreSql

A Graph is a Graph is a Graph: Equivalence, Transformation, and Composition o...

Ling liu part 01：big graph processing

About Scanning and Metadata Standards - NEMO 2010

Spark summit europe 2015 magellan

Apache con big data 2015 magellan

(DAT203) Building Graph Databases on AWS

Cheetah:Data Warehouse on Top of MapReduce

Easing embedding learning by comprehensive transcription of heterogeneous inf...

Graph Databases

Navigating the Wide World of Data Visualization Libraries

Bigdata analytics

RTree Spatial Indexing with MongoDB - MongoDC

Grails goes Graph

Recently uploaded

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein

Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA

Decarbonising Buildings: Making a net-zero built environment a realityIES VE

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica

MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar

How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe

Data governance with Unity Catalog PresentationKnoldus Inc.

How to write a Business Continuity PlanDatabarracks

Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3

Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple

Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Recently uploaded (20)

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24

Long journey of Ruby standard library at RubyConf AU 2024

Decarbonising Buildings: Making a net-zero built environment a reality

The Ultimate Guide to Choosing WordPress Pros and Cons

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure

MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes

How AI, OpenAI, and ChatGPT impact business and software.

Data governance with Unity Catalog Presentation

How to write a Business Continuity Plan

Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration

TeamStation AI System Report LATAM IT Salaries 2024

Zeshan Sattar- Assessing the skill requirements and industry expectations for...

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024

React Native vs Ionic - The Best Mobile App Framework

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx

A Deep Dive on Passkeys: FIDO Paris Seminar.pptx

Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...

Design pattern talk by Kaya Weers - 2024 (v2)

The State of Passkeys with FIDO Alliance.pptx

JavaScript InfoVis Toolkit Overview - Featured Visualizations and Future Plans

1. JavaScript InfoVis Toolkit Nicolas Garcia Belmonte - Dec. 2009

2. Agenda • JavaScript InfoVis Toolkit Overview • Featured Visualizations • What’s Next for the JIT

3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based

4. Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree

5. Extensible • Deﬁne custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)

6. Composable Add Visualizations as Node/Edge rendering functions to other visualizations

7. Featured Visualizations • TreeMap • RGraph • HyperTree • SpaceTree

8. TreeMap Squariﬁed TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg

9. TreeMap A B C D E F

10. TreeMap A B C D F E

11. TreeMap SliceAndDice Squariﬁed Strip order ordered unordered ordered aspect ratios very high lowest medium stability stable medium medium

12. TreeMap Examples

13. RGraph Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst

14. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions

15. RGraph Polar vs. Rectangular Interpolation

16. RGraph Node Constraints: Parent - Child angle

17. RGraph Node Constraints: Child Ordering

18. RGraph Slow-in, slow-out Transitions

19. RGraph Examples

20. HyperTree A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

21. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher

22. HyperTree Examples

23. SpaceTree SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson

24. SpaceTree A B C D E F

25. SpaceTree Only show Context-Related Nodes

26. SpaceTree Examples

27. What’s Next? • SunBurst • Force-Directed • Icicle • MultiTrees • etc.

28. What’s Next? SunBurst Visualization

29. What’s Next? Force-Directed Layout

30. What’s Next MultiTrees

31. Questions? Mail: philogb@gmail.com Project Page: http://thejit.org Blog: http://blog.thejit.org GitHub: http://github.com/philogb