Difference between revisions of "Visualization"

From BC$ MobileTV Wiki
Jump to: navigation, search
 
(43 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
  
''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'' 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.  
  
  
  
== InfoGraphic ==
+
== 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.
+
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.
  
 
* [[wikipedia: Infographic]]
 
* [[wikipedia: Infographic]]
Line 14: Line 16:
 
* '''The rebirth of the infographic''': http://emediavitals.com/article/16/rebirth-infographic
 
* '''The rebirth of the infographic''': http://emediavitals.com/article/16/rebirth-infographic
 
* Top 10 - Odd Facts in Creative Charts: http://totallytop10.com/current-affairs/odd-news/top-10-creative-charts
 
* Top 10 - Odd Facts in Creative Charts: http://totallytop10.com/current-affairs/odd-news/top-10-creative-charts
 +
* 7 Interactive guides to the Gulf Coast oil spill: http://www.mediabistro.com/10000words/7-interactive-guides-to-the-gulf-coast-oil-spill_b509
  
 +
=== Maps ===
  
 +
For geographical/navigational type, see [[Maps]]
 +
 +
==== TreeMaps ====
 +
 +
* Treemap Visualisation: http://www.cs.umd.edu/hcil/treemap-history/
 +
* TreeViz - Visualization of Large Tree Structures: http://infosthetics.com/archives/2009/01/treeviz_visualization_of_large_tree_structures.html
 +
* 10 Lessons in Treemap Designhttp://www.juiceanalytics.com/writing/10-lessons-treemap-design/;
 +
 +
==== Perception Map ====
 +
 +
* [[wikipedia:Perceptual mapping]]
 +
* Perception map of a user's view of your website: http://goodgaze.com/ggx/products/perception-map
 +
 +
==== Relationship Map ====
 +
 +
* DebateGraph: http://debategraph.org/
 +
* DebateGraph is an initiative of Recovery.gov - the Stimulus "Government Accountability" site: http://www.recovery.gov/
 +
 +
 +
=== Charts & Graphs ===
 +
 +
==== Linear Graph ====
 +
 +
* [[wikipedia: Linear graph]]
 +
 +
==== Bar charts ====
 +
 +
* [[wikipedia: Bar chart]]
 +
 +
==== Pie charts ====
 +
 +
* [[wikipedia: Pie chart]]
 +
 +
==== Radar Charts ====
 +
 +
* [[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 ====
 +
 +
* '''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
 +
* 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 ==
 +
 +
* FFFFound -- find amazing images and visualizations: http://ffffound.com/
 +
* vi.sualize.us -- visualization sharing: http://vi.sualize.us/
 +
* WeHeartIt -- image sharing: http://weheartit.com/
 +
* Timetric: http://timetric.com/
  
 
=== Show Us A Better Way ===
 
=== Show Us A Better Way ===
Line 24: Line 87:
  
 
* What public data is already available?: http://www.showusabetterway.co.uk/call/data.html
 
* What public data is already available?: http://www.showusabetterway.co.uk/call/data.html
 
 
  
 
=== code_swarm ===
 
=== code_swarm ===
Line 33: Line 94:
 
* code_swarm - Project page: http://vis.cs.ucdavis.edu/~ogawa/codeswarm/
 
* code_swarm - Project page: http://vis.cs.ucdavis.edu/~ogawa/codeswarm/
 
* code_swarm demo - Eclipse (video): http://www.vimeo.com/1130828
 
* code_swarm demo - Eclipse (video): http://www.vimeo.com/1130828
 
 
  
 
=== VisualComplexity ===
 
=== VisualComplexity ===
  
 
* '''VisualComplexity Project''' (a portal/collection of different visualization projects from all over the world): http://visualcomplexity.com
 
* '''VisualComplexity Project''' (a portal/collection of different visualization projects from all over the world): http://visualcomplexity.com
 
  
 
=== SIMILE ===
 
=== SIMILE ===
Line 47: Line 105:
 
* SIMILE Project at MIT: http://simile.mit.edu/
 
* SIMILE Project at MIT: http://simile.mit.edu/
 
* 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 -- 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 53: Line 113:
 
* NetGrok - visualizing computer networks in real-time: http://pentestit.com/2009/09/06/netgrok-visualize-computer-networks-realtime/?wscr=1440x900
 
* NetGrok - visualizing computer networks in real-time: http://pentestit.com/2009/09/06/netgrok-visualize-computer-networks-realtime/?wscr=1440x900
  
 +
=== Google Visualization ===
  
 +
* Google Visualization API: http://code.google.com/apis/visualization/
 +
<ref>Visualizing Geographic Statistical Data with Google Maps: https://medium.com/@nholmber/gmaps-data-visualization-2b7cc685012d</ref>
  
=== Google Visualization ===
+
=== Asterisq ===
  
* http://code.google.com/apis/visualization/
+
* Visualizations by Asterisq: http://asterisq.com/products/constellation/custom/implementations
 +
* Implementations of Asterisq visualizer: http://asterisq.com/products/constellation/custom/implementations<ref>Twitter - MentionMap: http://apps.asterisq.com/mentionmap/</ref>
 +
* Constellation Roamer - Flash Graph Visualization: http://asterisq.com/products/constellation/roamer/demo
  
 +
=== Gephi ===
  
=== Timetric ===
+
* Gephi - Open Graph Viz Platform: http://gephi.org/
  
* http://timetric.com/
+
=== 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 [[visualization]]s, [[animation]]s and graphics. '''Processing.JS''' is a JavaScript port of the '''Processing''' language, designed to run in modern web browsers.
  
 +
* [[wikipedia: Processing]]
 +
* Processing: http://processing.org (java-based project to create visualizations)
 +
* '''HasCanvas''' - Full featured Processing IDE: http://hascanvas.com/
 +
* Processing.JS: http://processingjs.org/ | [http://processingjs.org/learning/ide Web IDE]
  
 +
=== GeoCommons ===
  
 +
* GeoCommons Maker!, Finder! launched: http://www.ogleearth.com/2008/10/geocommons_make.html
  
 +
=== dygraphs ===
  
=== Processing ===
+
* dygraphs JavaScript Visualization Library: http://www.danvk.org/dygraphs/
  
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]]
 
  
  
 +
=== 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.
  
 +
<ref>20 Free and Open-Source Data Visualization Tools: https://dzone.com/articles/20-free-and-open-source-data-visualization-tools</ref>
  
 +
=== Projects/Applications ===
  
=== GeoCommons ===
+
==== Graphs ====
  
* GeoCommons Maker!, Finder! launched: http://www.ogleearth.com/2008/10/geocommons_make.html
+
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 =====
  
=== dygraphs ===
+
* The GraphML File Format: http://graphml.graphdrawing.org/
  
* dygraphs JavaScript Visualization Library: http://www.danvk.org/dygraphs/
+
==== Spatial Key ====
  
 +
* SpatialKey: http://www.spatialkey.com/
 +
* GeoSpatial Data Mapping with SpatialKey: http://visualthinkmap.blogspot.com/2009/04/data-mapping.html
  
 +
==== TLG View ====
  
== Authoring Software ==
+
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.
  
* Visual Understanding Environment (VUE): http://vue.tufts.edu/
+
* 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/
  
  
  
  
== Visualization Types ==
 
  
=== TreeMaps ===
+
== Tools ==
  
* Treemap Visualisation: http://www.cs.umd.edu/hcil/treemap-history/
+
* Visual Understanding Environment (VUE): http://vue.tufts.edu/
* TreeViz - Visualization of Large Tree Structures: http://infosthetics.com/archives/2009/01/treeviz_visualization_of_large_tree_structures.html
+
<ref>Understanding front-end data visualization tools ecosystem in 2021: https://cube.dev/blog/dataviz-ecosystem-2021/</ref>
* 10 Lessons in Treemap Designhttp://www.juiceanalytics.com/writing/10-lessons-treemap-design/;
+
  
 +
=== Java ===
  
=== Perception Map ===
+
* Processing - Programming language for Data Visualization, implemented in Java: http://www.processing.org/
 +
* prefuse - visualization toolkit: http://prefuse.org/
 +
* InfoViz: http://ivtk.sourceforge.net/
 +
* Grappa - Java wrapper for GraphViz: http://www2.research.att.com/~john/Grappa/
 +
* 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)
  
* [[wikipedia:Perceptual mapping]]
+
=== JavaScript ===
* Perception map of a user's view of your website: http://goodgaze.com/ggx/products/perception-map
+
  
=== Relationship Map ===
+
* 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]
  
* DebateGraph: http://debategraph.org/
+
==== Processing JS ====
* DebateGraph is an initiative of Recovery.gov - the Stimulus "Government Accountability" site: http://www.recovery.gov/
+
  
 +
* Processing.js: http://processingjs.org
  
 +
==== D3 ====
  
 +
* D3.js -- Data Driven Documents: http://www.d3-js.org (has emerged as a leading JS data visualization lib)
 +
* '''D3.js -- How to handle dynamic JSON Data: http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/'''<ref>Loading "d3.js" data from a simple JSON string: http://stackoverflow.com/questions/15764698/loading-d3-js-data-from-a-simple-json-string</ref>
 +
* Data manipulation, munging, and processing in JavaScript: http://learnjsdata.com/read_data.html<ref>Load and parse multiple csv files with D3.js: http://stackoverflow.com/questions/30766696/load-and-parse-multiple-csv-files-with-d3-js</ref>
 +
* Over 2000 D3.js DEMOs: http://techslides.com/over-2000-d3-js-examples-and-demos
 +
* Making D3.js Maps from CIA World Factbook data:
 +
* Interactive Data Visualization for the Web (with D3) -- Chapter 12, Geomapping: http://chimera.labs.oreilly.com/books/1230000000345/ch12.html
 +
* D3 -- Simple Chloropleth Maps lib: http://code.minnpost.com/simple-map-d3/
 +
* D3 World Maps -- Tooltips, Zooming, and Queue: http://techslides.com/d3-world-maps-tooltips-zooming-and-queue
 +
* D3 Maps Starter kit: http://techslides.com/d3-map-starter-kit
  
 +
==== Raphael ====
  
 +
* Plotting Country Capitals on Raphael World Map: http://techslides.com/plotting-country-capitals-on-raphael-world-map
  
 +
==== SIM ====
  
 +
* [[wikipedia: Discrete event simulation]]
 +
* SIM.js - Discrete Event Simulation web library: http://simjs.com/ | [http://simjs.com/simulator.html DOCS]
 +
* Discrete Event Simulation (interactive tutorial): http://simjs.com/queuing/index.html
  
== VIDEO ==
+
==== Google Visualization ====
  
* A Stunning New Way to See Scientific Data: http://randomthougts101.blogspot.com/2009/04/stunning-new-way-to-see-scientific-data.html
+
* Google Visualization API: http://code.google.com/apis/visualization/
 +
* Google Public Data Explorer: http://www.google.com/publicdata/directory
 +
* Google Visualization API Gallery: http://code.google.com/apis/visualization/documentation/gallery.html
 +
<ref>Bring Your Own Data - Google Opens Up Visualization API: http://www.readwriteweb.com/archives/google_opens_visualization_api.php</ref>
  
 +
=== PHP ===
  
 +
* Opte: http://www.opte.org/
 +
* Tutorial - Graph Visualization: http://www4.wiwiss.fu-berlin.de/bizer/rdfapi/tutorial/visualization_tutorial.htm
 +
* Control Graphviz with PHP: http://www.cems.uwe.ac.uk/~cjwallac/viz/#php
 +
* Google Visualization PHP API: http://code.google.com/p/google-visualization-php-api/ <ref>Google Visualization API now in PHP: http://googlecode.blogspot.com/2008/08/google-visualization-api-now-in-php.html</ref>
  
 +
=== C++ ===
  
== Resources ==
+
* GraphViz: http://www.graphviz.org/
  
* '''Social-networking open source visualization aids''': http://www.ibm.com/developerworks/opensource/library/os-socialtools/index.html?ca=drs-
+
=== Flash ===
* 25 great free resources for making charts: http://blogof.francescomugnai.com/2009/04/25-great-free-resources-for-making-charts/
+
  
 +
* Flare: http://flare.prefuse.org/<ref>Flare tutorial: http://flare.prefuse.org/tutorial</ref><ref>Flash Data Visualization Library -- Flare: http://www.webresourcesdepot.com/flash-data-visualization-library-flare/</ref>
  
 +
==== Flex ====
  
 +
* Flex data visualization: http://www.adobe.com/devnet/flex/articles/data_visualization.html
  
== Examples ==
+
=== R ===
  
* Our Solar System (FLASH): http://www.gunn.co.nz/astrotour/?data=tours%2Fretrograde.xml
+
* GGobi: http://www.ggobi.org/
 +
* iPlots: http://rosuda.org/iplots/
 +
* Google Visualization API for R (Statistical Modelling) programming language: http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis_examples.html
  
  
 +
== Resources ==
  
=== Sites ===
+
* '''Social-networking open source visualization aids''': http://www.ibm.com/developerworks/opensource/library/os-socialtools/index.html?ca=drs-
 +
* 25 great free resources for making charts: http://blogof.francescomugnai.com/2009/04/25-great-free-resources-for-making-charts/
 +
* A Stunning New Way to See Scientific Data: http://randomthougts101.blogspot.com/2009/04/stunning-new-way-to-see-scientific-data.html
 +
* Our Solar System (FLASH): http://www.gunn.co.nz/astrotour/?data=tours%2Fretrograde.xml
 +
* Satellite photos show devastation in Japan: http://www.msnbc.msn.com/id/42052263/ns/technology_and_science-space
 +
* Japan Earthquake: http://www.cbc.ca/news/interactives/japan-earthquake/index.html
  
* FFFFound -- find amazing images and visualizations: http://ffffound.com/
+
* Visual Complexity: http://www.visualcomplexity.com/
* vi.sualize.us -- visualization sharing: http://vi.sualize.us/
+
* visualizing.org: http://www.visualizing.org/
* WeHeartIt -- image sharing: http://weheartit.com/
+
* Data Visualization: http://datavisualization.ch/
 +
* Information Architects: http://www.informationarchitects.jp
 +
* InfoSthetics: http://infosthetics.com/
 +
* 40 Maps That Will Help You Make Sense of the World: http://asheepnomore.net/2013/12/29/40-maps-will-help-make-sense-world/
  
  
 +
== Tutorials ==
  
 +
* Large-scale RDF Graph Visualization Tools: http://www.mkbergman.com/414/large-scale-rdf-graph-visualization-tools/
 +
* CSS3 Family Tree: http://thecodeplayer.com/walkthrough/css3-family-tree
 +
* HTML5 Genealogy Pedigree-Viewer: http://stuporglue.org/html5-genealogy-pedigree-viewer/
 +
* Pedigree chart using HTML5: http://bencrowder.net/blog/2009/10/pedigree-chart-using-html5/
 +
* Visualizing Geographic Data Using AngularJS and Mapbox: http://dzone.com/articles/visualising-geographic-data-using-angularjs-and-ma
 +
* 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)
 +
* 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 175: 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 188: Line 331:
 
* GOOD’s World Health info-graphic shows the money 12 countries spend on healthcare: http://files.gecompany.com/healthymagination/visualization/world_health/world_health_highres.html
 
* GOOD’s World Health info-graphic shows the money 12 countries spend on healthcare: http://files.gecompany.com/healthymagination/visualization/world_health/world_health_highres.html
 
* Graph Visualization tools: http://www.visualcomplexity.com/vc/community/tools.cfm
 
* Graph Visualization tools: http://www.visualcomplexity.com/vc/community/tools.cfm
* Constellation Roamer - Flash Graph Visualization: http://asterisq.com/products/constellation/roamer/demo
+
 
 
* Facebook friends visualization tool for many eyes: http://blog.sameerhalai.com/archives/facebook-friends-visualization-tool-for-many-eyes/
 
* Facebook friends visualization tool for many eyes: http://blog.sameerhalai.com/archives/facebook-friends-visualization-tool-for-many-eyes/
 
* 6 Ways to use Facebook as a Search Engine and Data Visualization tool: http://selvabalaji.wordpress.com/2010/09/04/6-ways-to-use-facebook-as-search-engine-and-data-visualization-tools/
 
* 6 Ways to use Facebook as a Search Engine and Data Visualization tool: http://selvabalaji.wordpress.com/2010/09/04/6-ways-to-use-facebook-as-search-engine-and-data-visualization-tools/
Line 194: Line 337:
 
* Enhancing Simulation Studies with 3D Animation: http://www.ecnmag.com/Articles/2010/09/Design-Talk/Enhancing-Simulation-Studies-with-3D-Animation/
 
* Enhancing Simulation Studies with 3D Animation: http://www.ecnmag.com/Articles/2010/09/Design-Talk/Enhancing-Simulation-Studies-with-3D-Animation/
 
* The Differences - Sunnis & Shiites: http://www.good.is/post/the-differences-sunnis-shiites/
 
* The Differences - Sunnis & Shiites: http://www.good.is/post/the-differences-sunnis-shiites/
 +
* Japan Radiation Maximum by Prefecture: http://www.targetmap.com/viewer.aspx?reportId=4870
 +
* Awesome visualizations of internet and web tech: http://royal.pingdom.com/2010/11/25/awesome-visualizations-of-internet-and-web-tech/
 +
* Visualization of US Government Bailouts: http://hosted.ap.org/specials/interactives/_business/bailout_tracker/index.html?SITE=GENERIC
 +
* Analyzing and graphing weather data with wview: http://www.techrepublic.com/blog/opensource/analyzing-and-graphing-weather-data-with-wview/4085
 +
 +
* '''Data Visualization''' - Modern Approaches: http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/
 +
* The Best Tools for Visualization: http://www.readwriteweb.com/archives/the_best_tools_for_visualization.php
 +
* A Brief 3D Tour of Classical Music History: http://anonymousprof.com/a-brief-3d-tour-of-classical-music-history/
 +
* Geospatial Visualization project - World Freedom: http://freedom.indiemaps.com/
 +
* 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/
 +
* 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 199: Line 355:
  
 
<references />
 
<references />
 
  
 
== See Also ==
 
== See Also ==
  
[[Web 3.0]]
+
[[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