What's new

Data Visualization

3 visualizations that changed my life

Best COVID-19 Visualizations

Reducing Visual Clutter

image-3-1024x594.png

https://www.researchgate.net/public...Parallel_Coordinates_Using_Aesthetic_Criteria
image-2.png

https://www.researchgate.net/public...f_Structure_and_Processes_on_Temporal_Networks
1-s2.0-S2468502X1930021X-gr5.jpg

https://www.researchgate.net/public...h_to_reducing_visual_clutter_in_parallel_sets
 

Related Paper: Vis-a-Vis: Visual Exploration of Visualization Source Code Evolution

Comparison of Visualization Techniques

Related Paper: Multi-Dimensional Comparative Visualization for Patent Landscaping

Enhancements over EZChooser

  • Bargrams have extra dimensions by having glyphs above bars in clusters similar to D-Maps
  • Glyphs inside the bars as well, such as unit-based visualizations such as waffles, beeswarms, etc.
  • Entries shown below can be shown in clusters
  • timeline slider option
  • moving bargrams up gives them more weight for entry clustering below
  • entries can be shown between bars instead of at bottom view
 

Virtually Clustered Small Multiples inspired by Dust and Magnet

image-1024x215.png

” D-Map: Visual Analysis of Ego-centric Information Diffusion Patterns in Social Media”
FireShot-Capture-008-infovis.cs_.vt_.edu_-1024x424.png

“Semantic Interaction for Visual Text Analytics” by Endart et al
http://va.gatech.edu/endert/

Maybe we can combine the small multiple aspect with a correlation exploration tool like SIRIUS or Dust and Magnet. Using the parallel bargrams, one can use color as in SellTrend or MapTrix (below) to show correlations. Or the bars could be made smaller and arranged as in SIRIUS with glyphs adding an extra dimension or two of information, such as invisible links (networked or clustered bargrams).

Conclusion: Using the parallel bargrams, o

ne can use color as in SellTrend. That way, more room for bars — which do not have to move around. The user can add or see different weights by having the parallel bargrams arranged by weight of importance or more associated attributes closer together. So the glyphs can seave

Related videos: https://infovis.cs.vt.edu/content/videos-0

FireShot-Capture-007-dlnext.acm_.org_.png

FireShot-Capture-005-www.researchgate.net_.png



FireShot-Capture-006-infovis.cs_.vt_.edu_-1024x451.png
 

D3 alternatives (Tableau, etc)

Related blogs, project pages, etc

Software Visualization Research

Selecting/brushing/highlighting

One option for selecting/browsiing is to use a slider. For example, if the horizontal axis represents time, then each dot in the beeswarm and each related/linked waffle is highlighted that relates to that time. The width of the slider can be easily changed.
 

Dashboard Design

For software viz:

Output of program on top or bottom of screen or additional monitor.

Scrolling horizontally highlights everything in each bargram in same time/value. Synced with program output view. When bargram is clicked, all dots in beeswarms are highlighted, similar to EZChooser. Difference is there is more info per bargram and more info in dashboard. Can also encode simply if component is visible or method is used

Screenshot_2019-10-02-Blockbuster-Visual-Explorer-for-Motion-Picture-Data-2007-YouTube.png

Blockbuster
Screenshot-2019-10-02-10.49.47.png

As with Blockbuster, saves vertical space by allowing one to
choose a subset of parallel bargrams for display.

Model in Adobe Sketch?

Individual bargrams can also be used to augment source code view or program output view.

Names of different views:

Feature Bargrams: Emphasizes method-output correlations and correlation of source code text with output. Works with Annotativ. Eases navigation and querying of source code. Focuses on software metrics/attributes. Can use by itself or activate from source code, such as by right clicking or activating from Annotativ. Focuses on generic software metrics for visualization such as last edited code, largest methods, existing structure of code, code similarity, and more emphasis on NLP. Most compatible view for chat bot commands. Most similar to EZChooser. Works with Annotativ.


Variable Bargrams: Shows values in beeswarms, bargrams, etc. for runtime values of data. Related work: Anteater and Omnicode.



old notes: In-sutu source code visualization. This is possibly even more important since software visualization activity is not often actively pursued. This more passive, ubiquitous feature is to help with that. Individual bargrams inside source code, e.g. shows hotspots for each line of code and also over time of program . Each method is converted to a bargram aesthetically by each line being a bar and each function having a beeswarm. The beeswarm lets one see how networked the code is .

to the right of each line and highlighting the code line with a heatmap density color. Each dot in each beeswarm can signify hotspot use, metrics such as similarity to rest of code,

old notes:So for each line of code, there is a bargram to the right that has bicluster information. Clicking expands the view but even without doing so one can get an idea of the information by comparing bargrams for each line.
 

Bicluster Research

Color Scheme Ideas

“By displaying color-coded values for transcript levels across different views, BirdsEyeView can assist users in developing hypotheses about their experiment results. ” (from BirdsEyeView paper co-authored by Prof. Berleant)

hierarchical-bargrams.png

Source: ” Hierarchical Difference Scatterplots” by Piringer et al
Screenshot-2019-10-01-13.12.53.png

FeatureLens
 

Possible Committee

Flexbox as D3 alternative

Sequential Patterns for Visualization

Examples:
Sentence patterns in document collections
Function calls in software



The result at the bottom of the parallel bargrams is a graphical depiction of each sequence.
 

What can we put inside/over the parallel bars?

  • beeswarms
  • scatter dots/plots
  • waffle plots
  • bars (bars inside bars)
  • sparklines
  • heat density text

Personally favor unit-based graphs/charts (beeswarms, scatter dogs, waffle plots) for clickability/linkability.
 

What goes in the beeswarms vs. waffles

matrix-gram3.png

matrix-gram-highlight-purple.png


Each bar is like a matrix but more loosely in order to compress horizontal space. and invisible links are more obvious. also better for smaller devices like smartphones.

Redundancy of bargrams is good if there are more bargrams than vertical space.

Novel? idea: have highlight done in different shades (light to dark) to another dimension such as aggregated sequential order or relative time. TODO: Annotate each highlight with label.
The beeswarms are similar to the glyphs of EZChooser except take up less horizontal space and can include an extra dimension of information (size of dot). The waffles are a way of finding patterns more easily.

Software visualization examples:

  • Topic-Based Word Groups in each waffle bar, with each parallel bargram being a different category of groups. Functions in beeswarm.
  • The waffles/beeswarm in each bar can represent GUI snapshots or keywords. The beeswarm/waffles can represent called functions. (D3 code of a swarmplot with images.)
  • To learn more, a second window can open. Each dot/square can represent associated methods/functions. Methods with greater association have more dots.


The color scheme for the beeswarms and waffles is an open question.


older notes:
Inside each bar can be a scatter plot or beeswarm or other chart/graph.

For example, with software visualization, each parallel bargram could represent a module. And the scatter plot inside each bar could represent associated methods by frequency and time. Patterns emerge by comparing bars/scatters to each other both horizontally and vertically.

Another exampple could be flight costs. So each parallel bargram can represent a different airline and each scatter plot inside each bar could represent price by another dimension (which can be selected among many).
 
Top