Infographics
General
This is a WIP resources page.
See also Data, Open data, Organisation#Knowledge, JS scripts#Graphics, Mapping, Graphics
- https://en.wikipedia.org/wiki/Data_and_information_visualization - data viz or info viz) is the practice of designing and creating easy-to-communicate and easy-to-understand graphic or visual representations of a large amount of complex quantitative and qualitative data and information with the help of static, dynamic or interactive visual items. Typically based on data and information collected from a certain domain of expertise, these visualizations are intended for a broader audience to help them visually explore and discover, quickly understand, interpret and gain important insights into otherwise difficult-to-identify structures, relationships, correlations, local and global patterns, trends, variations, constancy, clusters, outliers and unusual groupings within data (exploratory visualization). When intended for the general public (mass communication) to convey a concise version of known, specific information in a clear and engaging manner (presentational or explanatory visualization), it is typically called information graphics.
Data visualization is concerned with visually presenting sets of primarily quantitative raw data in a schematic form. The visual formats used in data visualization include tables, charts and graphs (e.g. pie charts, bar charts, line charts, area charts, cone charts, pyramid charts, donut charts, histograms, spectrograms, cohort charts, waterfall charts, funnel charts, bullet graphs, etc.), diagrams, plots (e.g. scatter plots, distribution plots, box-and-whisker plots), geospatial maps (such as proportional symbol maps, choropleth maps, isopleth maps and heat maps), figures, correlation matrices, percentage gauges, etc., which sometimes can be combined in a dashboard.
Information visualization, on the other hand, deals with multiple, large-scale and complicated datasets which contain quantitative (numerical) data as well as qualitative (non-numerical, i.e. verbal or graphical) and primarily abstract information and its goal is to add value to raw data, improve the viewers' comprehension, reinforce their cognition and help them derive insights and make decisions as they navigate and interact with the computer-supported graphical display. Visual tools used in information visualization include maps (such as tree maps), animations, infographics, Sankey diagrams, flow charts, network diagrams, semantic networks, entity-relationship diagrams, venn diagrams, timelines, mind maps, etc.
- https://en.wikipedia.org/wiki/Infographic - a clipped compound of "information" and "graphics", are graphic visual representations of information, data, or knowledge intended to present information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system's ability to see patterns and trends. Similar pursuits are information visualization, data visualization, statistical graphics, information design, or information architecture. Infographics have evolved in recent years to be for mass communication, and thus are designed with fewer assumptions about the readers' knowledge base than other types of visualizations.
- https://en.wikipedia.org/wiki/Statistical_graphics - also known as statistical graphical techniques, are graphics used in the field of statistics for data visualization.
- https://en.wikipedia.org/wiki/Mathematical_visualization - phenomena can be understood and explored via visualization. Classically this consisted of two-dimensional drawings or building three-dimensional models (particularly plaster models in the 19th and early 20th century), while today it most frequently consists of using computers to make static two or three dimensional drawings, animations, or interactive programs. Writing programs to visualize mathematics is an aspect of computational geometry.
- https://en.wikipedia.org/wiki/List_of_information_graphics_software - software to create any kind of information graphics: either includes the ability to create one or more infographics from a provided data set; either it is provided specifically for information visualization
- https://en.wikipedia.org/wiki/Visual_analytics - an outgrowth of the fields of information visualization and scientific visualization that focuses on analytical reasoning facilitated by interactive visual interfaces.
Quotes
From the Keller Paper;
Ware says “power of a visualization comes from the fact that it is possible to have a far more complex concept structure represented externally in a visual display than can be held in visual and verbal working memories". In this regard, visualizations are cognitive tools aiming at supporting the cognitive system of the user. Visualizations can make use of the automatically human process of pattern finding (Ware, 2004). They can draw both on the visual and the spatial working memory system (Baddeley, 1998; Logie, 1995).
COX;
Compared with an informationally-equivalent textual description of an information a diagram may allow users to avoid having to explicitly compute information because users can extract information ‘at a glance’ (p. 2). “Such representations work best when the spatial constraints obeyed by representations map into important constraints in the represented domain in such a way that they restrict (or enforce) the kinds of in- terpretations that can be made” (Rogers & Scaife, 1997, p. 2). They can help to ex- ploit the rapid processing capabilities of the human visual system and very easy per- ceptual judgements are substituted for more difficult logical ones (Paige & Simon, 1966). Chabris and Kosslyn (in this book) suggest the principle of ‘representational correspondence’ as a basic principle of effective diagram design. According to this principle visualizations work best if they depict information in the same way that our internal mental representation do.
- Get the above academic details for bibliography
Info and news
- http://spatialanalysis.co.uk
- http://www.oii.ox.ac.uk/vis
- http://chartporn.org
- http://flowingdata.com
- http://datavisualization.ch
- http://informationisbeautiful.net
Charts
- HCi: Flowcharting
- Kroki! - provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag), C4 (with PlantUML), Ditaa, Erd, GraphViz, Mermaid, Nomnoml, PlantUML, SvgBob and UMLet... and more to come!
Graphviz
- https://en.wikipedia.org/wiki/DOT_(graph_description_language) - graph description language. DOT graphs are typically files with the file extension gv or dot. The extension gv is preferred to avoid confusion with the extension dot used by early (pre-2007) versions of Microsoft Word.
- http://magjac.com/graphviz-visual-editor
- https://github.com/magjac/graphviz-visual-editor - A web application for interactive visual editing of Graphviz graphs described in the DOT language.
ditaa
- ditaa - a small command-line utility written in Java, that can convert diagrams drawn using ascii art ('drawings' that contain characters that resemble lines like | / - ), into proper bitmap graphics. This is best illustrated by the following example -- which also illustrates the benefits of using ditaa in comparison to other methods :)
blockdiag
- blockdiag - and its family generate diagram images from simple text files
- nwdiag - generates network-diagram images from .diag files (similar to graphviz’s DOT files).
Web
- Webgraphviz - Graphviz in the Browser
- https://github.com/knsv/mermaid - Generation of diagram and flowchart from text in a similar manner as markdown [5]
- https://github.com/shd101wyy/markdown-preview-enhanced - One of the 'BEST' markdown preview extensions for Atom editor!
Other
- https://live.gnome.org/Dia
- http://www.umlet.com/
- http://staruml.sourceforge.net/en/
- http://alexdp.free.fr/violetumleditor/page.php
- http://www.bouml.fr/
- http://www.websequencediagrams.com/
- https://cacoo.com/
- http://yuml.me/diagram/scruffy/class/draw
- https://github.com/ArsMasiuk/qvge - a multiplatform graph editor written in C++/Qt. Its main goal is to make possible visually edit two-dimensional graphs in a simple and intuitive way.
D2
Mermaid
- Mermaid - a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
Systems
to totally rework
See also JS scripts
Karma
- Karma is an information integration tool that enables users to quickly and easily integrate data from a variety of data sources including databases, spreadsheets, delimited text files, XML, JSON, KML and Web APIs. Users integrate information by modeling it according to an ontology of their choice using a graphical user interface that automates much of the process. Karma learns to recognize the mapping of data to ontology classes and then uses the ontology to propose a model that ties together these classes. Users then interact with the system to adjust the automatically generated model. During this process, users can transform the data as needed to normalize data expressed in different formats and to restructure it. Once the model is complete, users can published the integrated data as RDF or store it in a database.
SIMILE
- SIMILE Widgets - an open-source “spin-off” from the SIMILE project at MIT. Here we offer free, open-source web widgets, mostly for data visualizations. They are maintained and improved over time by a community of open-source developers.
- Exhibit enables web site authors to create dynamic exhibits of their collections without resorting to complex database and server-side technologies. The collections can be searched and browsed using faceted browsing. Assorted views are provided including tiles, maps, etc.
Other
- http://plotti.co/ - svg streaming microservice [9]
- v.kernel - GRASS GIS manual - Generates a raster density map from vector points map.Density is computed using a moving kernel. Optionally generates a vector density map on a vector network.
- Kibana - lets you visualize your Elasticsearch data and navigate the Elastic Stack, so you can do anything from learning why you're getting paged at 2:00 a.m. to understanding the impact rain might have on your quarterly numbers.
- https://github.com/kantord/just-dashboard - Create dashboards using YAML/JSON files
- VTK - The Visualization Toolkit - an open-source, freely available software system for 3D computer graphics, image processing, and visualization. It consists of a C++ class library and several interpreted interface layers including Tcl/Tk, Java, and Python. VTK supports a wide variety of visualization algorithms including scalar, vector, tensor, texture, and volumetric methods, as well as advanced modeling techniques such as implicit modeling, polygon reduction, mesh smoothing, cutting, contouring, and Delaunay triangulation. VTK has an extensive information visualization framework and a suite of 3D interaction widgets. The toolkit supports parallel processing and integrates with various databases on GUI toolkits such as Qt and Tk. VTK is cross-platform and runs on Linux, Windows, Mac, and Unix platforms. VTK is part of Kitware’s collection of commercially supported open-source platforms for software development.
- Tulip - an information visualization framework dedicated to the analysis and visualization of relational data. Tulip aims to provide the developer with a complete library, supporting the design of interactive information visualization applications for relational data that can be tailored to the problems he or she is addressing.
- ParaView - an open-source, multi-platform data analysis and visualization application. ParaView users can quickly build visualizations to analyze their data using qualitative and quantitative techniques. The data exploration can be done interactively in 3D or programmatically using ParaView’s batch processing capabilities. ParaView was developed to analyze extremely large datasets using distributed memory computing resources. It can be run on supercomputers to analyze datasets of petascale size as well as on laptops for smaller data, has become an integral tool in many national laboratories, universities and industry, and has won several awards related to high performance computation.
- leather - he Python charting library for those who need charts now and don’t care if they’re perfect.Leather isn’t picky. It’s rough. It gets dirty. It looks sexy just hanging on the back of a chair. Leather doesn’t need your accessories. Leather is how Snake Plissken would make charts.
Apparatus
- Apparatus is a hybrid graphics editor and programming environment for creating interactive diagrams. The Apparatus Editor runs in the browser and interactive diagrams created with Apparatus can be shared and embedded on the web. Apparatus is free, open-source software. [10]
Idyll
- Idyll - a tool that makes it easier to author interactive narratives for the web. The goal of the project is to provide a friendly markup language — and an associated toolchain — that can be used to create dynamic, text-driven web pages.Idyll helps you create documents that use common narrative techniques such as embedding interactive charts and graphs, responding to scroll events, and explorable explanations. Additionally, its readable syntax facilitates collaboration between writers, editors, designers, and programmers on complex projects.
manim
- https://github.com/3b1b/manim - Animation engine for explanatory math videos
GGobi
- GGobi - an open source visualization program for exploring high-dimensional data. It provides highly dynamic and interactive graphics such as tours, as well as familiar graphics such as the scatterplot, barchart and parallel coordinates plots. Plots are interactive and linked with brushing and identification.
Vega
- Vega - a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.
Plotly
- Plotly - graphing library makes interactive, publication-quality graphs online. Examples of how to make line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, polar charts, and bubble charts. https://github.com/plotly/plotly.py
PEX
- PEX - a collection of JavaScript modules the combination of which becomes a powerful 3D graphics library for the desktop and the web.Pex is build by Variable – a generative design studio in London – and friends.Pex is open-source.
Inviwo
- Inviwo - a software framework for the rapid prototyping visualizations. It is written in C++, exploits modern graphics hardware, and is available under BSD license, which permits free use in any setup - also commercially
Visdom
- https://github.com/fossasia/visdom - A flexible tool for creating, organizing, and sharing visualizations of live, rich data. Supports Torch and Numpy.
Charming
- https://github.com/yuankunzhang/charming - a powerful and versatile chart rendering library for Rust that leverages the power of Apache ECharts to deliver high-quality data visualizations. Built with the Rust programming language, this library aims to provide the Rust ecosystem with an intuitive and effective way to generate and visualize charts, using a declarative and user-friendly API.
g9
- http://omrelli.ug/g9 - With g9, making an interactive visualization is as easy as making a visualization that isn't. Just write a function which draws shapes based on data, and g9 will automatically figure out how to manipulate that data when you drag the shapes around. [11]
netgraph
- https://github.com/paulbrodersen/netgraph - a Python library that aims to complement existing network analysis libraries such as such as networkx, igraph, and graph-tool with publication-quality visualisations within the Python ecosystem. To facilitate a seamless integration, Netgraph supports a variety of input formats, including networkx, igraph, and graph-tool Graph objects. Netgraph implements numerous node layout algorithms and several edge routing routines. Uniquely among Python alternatives, it handles networks with multiple components gracefully (which otherwise break most node layout routines), and it post-processes the output of the node layout and edge routing algorithms with several heuristics to increase the interpretability of the visualisation (reduction of overlaps between nodes, edges, and labels; edge crossing minimisation and edge unbundling where applicable). The highly customisable plots are created using Matplotlib, and the resulting Matplotlib objects are exposed in an easily queryable format such that they can be further manipulated and/or animated using standard Matplotlib syntax. Finally, Netgraph also supports interactive changes: with the InteractiveGraph class, nodes and edges can be positioned using the mouse, and the EditableGraph class additionally supports insertion and deletion of nodes and edges as well as their (re-)labelling through standard text-entry.
Tutorials
Design, data and vis basics;
- graphdrawing.org - This site is a collection of resources mostly related to the annual International Symposium on Graph Drawing, but we anticipate the inclusion of, e.g., an overview of software tools in the future.
D3
- http://blog.visual.ly/using-selections-in-d3-to-make-data-driven-visualizations/
- http://www.youtube.com/playlist?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p
- http://www.youtube.com/watch?v=C-_Lwm-2Hsg
- http://www.youtube.com/watch?v=ZEJR7ANcjMA
- D3 for Beginners Part I: Joe Golike on Thinking in D3
Reactive.js
Learning
See also Learning
Journalism
Examples
- http://www.guardian.co.uk/news/datablog
- http://www.guardian.co.uk/news/datablog+politics/mps-expenses
- http://www.guardian.co.uk/news/datablog/2010/apr/25/uk-public-spending-1963
- http://www.guardian.co.uk/news/datablog/2013/apr/26/brie-bin-food-waste-value
People
- http://simonrogers.net/ - Data journalism and other curiosities
Creating
See JavaScript, JS scripts#Visualisation
- http://raw.densitydesign.org/ - d3 to create svg from pasted data
- Google I/O 2008 - Visualize your Data: Visualization API
- Google's Public Data Explorer: A New Tool for Visualizing Information
Gap Minder
Other
- Grap is a language for typesetting graphs specified and first implemented by Brian Kernighan and Jon Bentley at Bell Labs. It is an expressive language for describing graphs and incorporating them in typeset documents. It is implemented as a preprocessor to Kernigan's pic language for describing languages, so any system that can use pic can use grap. [16]
- Asymptote is a powerful descriptive vector graphics language that provides a natural coordinate-based framework for technical drawing. Labels and equations are typeset with LaTeX, for high-quality PostScript output.
- Grafana - allows you to query, visualize, alert on and understand your metrics no matter where they are stored. Create, explore, and share dashboards with your team and foster a data driven culture.
Programming
See also Computing#Data science and stats
Miro
- Miro - your team's visual platform to connect, collaborate, and create — together.