Difference between revisions of "Visualization"

From BC$ MobileTV Wiki
Jump to: navigation, search
(SIMILE)
 
(10 intermediate revisions by the same user not shown)
Line 56: Line 56:
  
 
* [[wikipedia: Radar chart]]
 
* [[wikipedia: Radar chart]]
 +
 +
===== Kiviat Charts =====
 +
 +
* [[wikipedia: Radar_chart]]
 +
<ref>Kiviat Charts overview: http://www.westfallteam.com/sites/default/files/papers/Kiviat Charts.pdf</ref>
 +
<ref>What is a kiviat chart and when would you use it?: https://www.restaurantnorman.com/what-is-a-kiviat-chart-and-when-would-you-use-it/</ref>
 +
<ref>How to create a Kiviat Chart in Microsoft Excel: https://www.youtube.com/watch?v=kKCowSoU1a8</ref>
 +
<ref>Kiviat Diagramming: https://www.projectmanagement.com/contentPages/wiki.cfm?ID=233065&thisPageURL=/wikis/233065/Kiviat-Diagramming#_=_</ref>
 +
<ref>How to draw Kiviat Diagrams in Tex: https://tex.stackexchange.com/questions/10060/how-to-draw-kiviat-diagrams</ref>
 +
<ref>Kiviatt Charts: https://www.gristprojectmanagement.us/process-improvement/kiviatt-charts.html</ref>
  
  
 
==== Radial Graph ====
 
==== Radial Graph ====
  
 +
* '''TouchGraph - Ontology Visualization: https://web.archive.org/web/20120213184524/http://jowl.ontologyonline.org/TouchGraph.html'''
 
* Grahviz - Radial layout example: https://graphviz.gitlab.io/_pages/Gallery/twopi/twopi2.html
 
* Grahviz - Radial layout example: https://graphviz.gitlab.io/_pages/Gallery/twopi/twopi2.html
 
* D3 - Collapsible Force Layout: https://bl.ocks.org/mbostock/1093130 | [https://gist.github.com/karibot/dbcec6e57ed6c5df513316e028197773 SRC]
 
* D3 - Collapsible Force Layout: https://bl.ocks.org/mbostock/1093130 | [https://gist.github.com/karibot/dbcec6e57ed6c5df513316e028197773 SRC]
 +
* DHTeuMeuLeu -- Gerard Ferrandez - 3D Radial Graph Traversal: https://web.archive.org/web/20130307193257/http://www.dhteumeuleu.com/i-think/
  
 
== Projects ==
 
== Projects ==
Line 94: Line 106:
 
* SIMILE WidgetsFree, Open-Source Data Visualization Web Widgets, and More: http://www.simile-widgets.org/
 
* SIMILE WidgetsFree, Open-Source Data Visualization Web Widgets, and More: http://www.simile-widgets.org/
 
<ref>Simile 2.x examples: http://www.simile-widgets.org/exhibit2/</ref>
 
<ref>Simile 2.x examples: http://www.simile-widgets.org/exhibit2/</ref>
 +
<ref>Simile -- Exhibit - getting started tutorial: https://web.archive.org/web/20100123094952/http://simile.mit.edu/wiki/Exhibit/Getting_Started_Tutorial</ref>
 +
<ref>How to make an exhibit from a spreadsheet: https://web.archive.org/web/20100123122120/http://simile.mit.edu/wiki/Exhibit/How_to_make_an_exhibit_from_a_spreadsheet</ref>
  
 
=== NetGrok ===
 
=== NetGrok ===
Line 144: Line 158:
 
=== Projects/Applications ===
 
=== Projects/Applications ===
  
==== GraphML ====
+
==== Graphs ====
 +
 
 +
Graphing Tools allow you to visualize your data through easy to read and often times interactive Graphs, Pie Charts, Timelines, Timeplots, Scales, Plots or Combined and Mixed Charts.
 +
 
 +
* Simple PHP Charts (Free to Use, 45$ Developer License): http://www.maani.us/charts/index.php
 +
* Exporting data to EXCEL using PHP: http://www.codeplex.com/PHPExcel/Release/ProjectReleases.aspx?ReleaseId=9401
 +
* How to make charts with SVG: https://css-tricks.com/how-to-make-charts-with-svg/
 +
* Render dynamic graphs in SVG: https://www.ibm.com/developerworks/library/x-svggrph/index.html
 +
* Learn to create a line chart using D3.js: https://www.freecodecamp.org/news/learn-to-create-a-line-chart-using-d3-js-4f43f1ee716b/
 +
* Simple dynamically updating line chart generation using jqPlot: https://gayashan-a.blogspot.com/2012/08/simple-dynamically-updating-line-chart.html
 +
* CanvasJS -- Dynamically updating "spline chart": https://canvasjs.com/javascript-charts/dynamic-spline-chart/
 +
 
 +
===== GraphML =====
  
 
* The GraphML File Format: http://graphml.graphdrawing.org/
 
* The GraphML File Format: http://graphml.graphdrawing.org/
Line 158: Line 184:
  
 
* TLG View: http://www.tlgview.com/
 
* TLG View: http://www.tlgview.com/
 +
 +
 +
 +
 +
== EXAMPLES ==
 +
 +
* How Many Humans Have Ever Lived?: https://www.visualcapitalist.com/cp/how-many-humans-have-ever-lived/
 +
* Global Happiness Levels in 2022: https://www.visualcapitalist.com/mapped-global-happiness-levels-in-2022/
  
  
Line 166: Line 200:
  
 
* Visual Understanding Environment (VUE): http://vue.tufts.edu/
 
* Visual Understanding Environment (VUE): http://vue.tufts.edu/
 +
<ref>Understanding front-end data visualization tools ecosystem in 2021: https://cube.dev/blog/dataviz-ecosystem-2021/</ref>
  
 
=== Java ===
 
=== Java ===
Line 175: Line 210:
 
* DEX - Data EXplorer: https://github.com/PatMartin/Dex (data visualization tool written in [[Java]]/[[JavaFX]] capable of powerful [[ETL]])
 
* DEX - Data EXplorer: https://github.com/PatMartin/Dex (data visualization tool written in [[Java]]/[[JavaFX]] capable of powerful [[ETL]])
 
* jTableSaw: http://jtablesaw.wordpress.com  | [https://github.com/lwhite1/tablesaw SRC](Data Science in Java - the easy way)
 
* jTableSaw: http://jtablesaw.wordpress.com  | [https://github.com/lwhite1/tablesaw SRC](Data Science in Java - the easy way)
 
  
 
=== JavaScript ===
 
=== JavaScript ===
  
 
* 16 Javascript Libraries for Visualizations: http://datavisualization.ch/tools/13-javascript-libraries-for-visualizations<ref>Top 9 JavaScript Charting Libraries: https://dzone.com/articles/top-9-javascript-charting-libraries</ref>
 
* 16 Javascript Libraries for Visualizations: http://datavisualization.ch/tools/13-javascript-libraries-for-visualizations<ref>Top 9 JavaScript Charting Libraries: https://dzone.com/articles/top-9-javascript-charting-libraries</ref>
 +
* ngraph.path: https://github.com/anvaka/ngraph.path | [https://github.com/anvaka/ngraph.path.demo#ngraphpath-demo SRC] | [https://anvaka.github.io/ngraph.path.demo/#?graph=amsterdam-roads DEMO]
 +
* Apache ECharts - [[OSS]] JavaScript Visualization Library: https://echarts.apache.org/ | [https://github.com/apache/echarts SRC]
 +
 +
==== Processing JS ====
 +
 
* Processing.js: http://processingjs.org
 
* Processing.js: http://processingjs.org
  
Line 263: Line 302:
 
* 3D Step Count & Fitness Activity Graph: http://codepen.io/steveg3003/pen/wdBRZN/
 
* 3D Step Count & Fitness Activity Graph: http://codepen.io/steveg3003/pen/wdBRZN/
 
* Why I no longer use D3.js: https://medium.com/@PepsRyuu/why-i-no-longer-use-d3-js-b8288f306c9a (example hand-coding a linear graph in Preact + SVG + CSS)
 
* Why I no longer use D3.js: https://medium.com/@PepsRyuu/why-i-no-longer-use-d3-js-b8288f306c9a (example hand-coding a linear graph in Preact + SVG + CSS)
 +
* Java + Processing + HTML5 Canvas experiment: https://repl.it/@templates/Java-Processing-using-Processingjs
 +
* Abusing the Canvas -- Lesson 2 - Marquee: http://matthewekenstedt.com/173-03/abusing-canvas-lesson-2-marquee/
  
  
Line 278: Line 319:
 
* History of Sustainability - a visualization: http://archis.org/history-of-sustainability/
 
* History of Sustainability - a visualization: http://archis.org/history-of-sustainability/
 
* The Grammar of Graphics: http://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html
 
* The Grammar of Graphics: http://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html
* '''TouchGraph - Ontology Visualization: http://jowl.ontologyonline.org/TouchGraph.html'''
 
 
* 30 amazing (free) online magazines for graphic designers: http://blogof.francescomugnai.com/2008/09/best-online-magazines-graphic-designers/
 
* 30 amazing (free) online magazines for graphic designers: http://blogof.francescomugnai.com/2008/09/best-online-magazines-graphic-designers/
 
* CogSpace - Disciplines Visualization: http://www.cogspace.net/index2.html
 
* CogSpace - Disciplines Visualization: http://www.cogspace.net/index2.html
Line 308: Line 348:
 
* Demo -- Stunning data visualization in the AlloSphere: http://www.ted.com/index.php/talks/joann_kuchera_morin_tours_the_allosphere.html
 
* Demo -- Stunning data visualization in the AlloSphere: http://www.ted.com/index.php/talks/joann_kuchera_morin_tours_the_allosphere.html
 
* Infographic -- Olympic Medal Count: http://www.vizworld.com/2010/02/infographic-olympic-medal-count/
 
* Infographic -- Olympic Medal Count: http://www.vizworld.com/2010/02/infographic-olympic-medal-count/
 +
* The case against diverging stacked bars: https://blog.datawrapper.de/divergingbars/
 +
* Who We Spend Time with as We Get Older: https://flowingdata.com/2022/04/22/changing-who-we-spend-time-with-as-we-get-older/
  
  
Line 316: Line 358:
 
== See Also ==
 
== See Also ==
  
[[Web 3.0]] | [[Linked Data]] | [[Semantic Web]] | [[Database]] | [[Table]] | [[Menu]]
+
[[Web 3.0]] | [[Linked Data]] | [[Semantic Web]] | [[Database]] | [[Table]] | [[Menu]] | [[VRML]] | [[WebVR]]

Latest revision as of 00:58, 26 April 2022

Visualization is the act of creating pictographic or other visual cues that typically allow a viewer to physically look upon and analyze the relationships between different objects.


Visualization is a common need in many fields, ranging from Information Technology to Statistics, Engineering to Architecture, Biology to Astrophysics and Sociology to Computer Hardware/Software Design, among others.


Visualization Types

InfoGraphic

An InfoGraphic is a visualization tool used for summarizing large amounts of data and information into a small, concise, yet easily readable, translatable and understandable graphical representation. There are modern-day software packages available for creating InfoGraphics, though many of the best infographics are drawn by hand, whether electronically, on paper or created via another medium. Common infographics are bar-charts, pie-charts, global maps, universal maps, pictures of a specific locale or setting with data overlays, etc.

Maps

For geographical/navigational type, see Maps

TreeMaps

Perception Map

Relationship Map


Charts & Graphs

Linear Graph

Bar charts

Pie charts

Radar Charts

Kiviat Charts

[1] [2] [3] [4] [5] [6]


Radial Graph

Projects

Show Us A Better Way

Show Us a Better Way is a UK government-funded project challenging the public to "Tell us what you'd build with public information and we could help fund your idea!"

code_swarm

code_swarm is one of the leading projects for open visualization libraries:

VisualComplexity

  • VisualComplexity Project (a portal/collection of different visualization projects from all over the world): http://visualcomplexity.com

SIMILE

SIMILE is focused on developing robust, open source tools that empower users to access, manage, visualize and reuse digital assets.

[7] [8] [9]

NetGrok

Google Visualization

[10]

Asterisq

Gephi

Processing

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is an alternative to proprietary software tools in the same domain.

Processing is a language for displaying visualizations, animations and graphics. Processing.JS is a JavaScript port of the Processing language, designed to run in modern web browsers.

GeoCommons

dygraphs



Data Visualization

Data Visualization is the process of presenting information in an easy to understand, intuitive, typically aesthetically pleasing manner such that relationships between disparate objects and facts can be derived and visually infered.

[12]

Projects/Applications

Graphs

Graphing Tools allow you to visualize your data through easy to read and often times interactive Graphs, Pie Charts, Timelines, Timeplots, Scales, Plots or Combined and Mixed Charts.

GraphML

Spatial Key

TLG View

TLGView's objective is to enhance the exploration and navigation of data in the cloud. Whether the data is databases, search results, videos, or images - in short, any group of objects that reside somewhere in the internet cloud.



EXAMPLES



Tools

[13]

Java

JavaScript

Processing JS

D3

Raphael

SIM

Google Visualization

[17]

PHP

C++

Flash

Flex

R


Resources


Tutorials


External Links


References

  1. Kiviat Charts overview: http://www.westfallteam.com/sites/default/files/papers/Kiviat Charts.pdf
  2. What is a kiviat chart and when would you use it?: https://www.restaurantnorman.com/what-is-a-kiviat-chart-and-when-would-you-use-it/
  3. How to create a Kiviat Chart in Microsoft Excel: https://www.youtube.com/watch?v=kKCowSoU1a8
  4. Kiviat Diagramming: https://www.projectmanagement.com/contentPages/wiki.cfm?ID=233065&thisPageURL=/wikis/233065/Kiviat-Diagramming#_=_
  5. How to draw Kiviat Diagrams in Tex: https://tex.stackexchange.com/questions/10060/how-to-draw-kiviat-diagrams
  6. Kiviatt Charts: https://www.gristprojectmanagement.us/process-improvement/kiviatt-charts.html
  7. Simile 2.x examples: http://www.simile-widgets.org/exhibit2/
  8. Simile -- Exhibit - getting started tutorial: https://web.archive.org/web/20100123094952/http://simile.mit.edu/wiki/Exhibit/Getting_Started_Tutorial
  9. How to make an exhibit from a spreadsheet: https://web.archive.org/web/20100123122120/http://simile.mit.edu/wiki/Exhibit/How_to_make_an_exhibit_from_a_spreadsheet
  10. Visualizing Geographic Statistical Data with Google Maps: https://medium.com/@nholmber/gmaps-data-visualization-2b7cc685012d
  11. Twitter - MentionMap: http://apps.asterisq.com/mentionmap/
  12. 20 Free and Open-Source Data Visualization Tools: https://dzone.com/articles/20-free-and-open-source-data-visualization-tools
  13. Understanding front-end data visualization tools ecosystem in 2021: https://cube.dev/blog/dataviz-ecosystem-2021/
  14. Top 9 JavaScript Charting Libraries: https://dzone.com/articles/top-9-javascript-charting-libraries
  15. Loading "d3.js" data from a simple JSON string: http://stackoverflow.com/questions/15764698/loading-d3-js-data-from-a-simple-json-string
  16. Load and parse multiple csv files with D3.js: http://stackoverflow.com/questions/30766696/load-and-parse-multiple-csv-files-with-d3-js
  17. Bring Your Own Data - Google Opens Up Visualization API: http://www.readwriteweb.com/archives/google_opens_visualization_api.php
  18. Google Visualization API now in PHP: http://googlecode.blogspot.com/2008/08/google-visualization-api-now-in-php.html
  19. Flare tutorial: http://flare.prefuse.org/tutorial
  20. Flash Data Visualization Library -- Flare: http://www.webresourcesdepot.com/flash-data-visualization-library-flare/

See Also

Web 3.0 | Linked Data | Semantic Web | Database | Table | Menu | VRML | WebVR