Skip to content

Latest commit

 

History

History
executable file
·
213 lines (182 loc) · 10.1 KB

Flexible_Visualization.md

File metadata and controls

executable file
·
213 lines (182 loc) · 10.1 KB

Flexible Visualization

What is a visualization Builder?

Visual representations of abstract data to amplify cognition.

  1. General process of visualizing data
    1. Understanding Task
    2. Prepare Dataset
      • understanding dataset
      • data cleansing
      • aggregation, calculation
      • rank, filter
    3. Decide Representation
    4. Create Visualization
      • visual encodings
      • data binding
      • layout composition

Analysis vs. Presentation: explore the data or build visualization

Why flexibility matters?

Elegant design requires us to think about a theory of graphics, not charts.

How to make a bar chart?

  1. Template Editors: Choose a bar chart and bind data

    • Products: Excel, Wyn, ...
    • Less Expressivity: inevitably offer fewer charts than people want
    • More Complexity: hard to reuse objects that similarly in different charts

  2. Expressive Tools: Code or paint manually

    • Products: D3.js (for developer), Adobe illustrator (for designer), ...
    • High Skill Required: long time to learn
    • Slow & Tedious: long time to create a visualization

  3. Visual Builders: Composed by rectangles and two lines

    • Products: Lyra, Charticulator, Data Illustrator, ...
    • More Expressivity: compare to Template Editors
    • More Learnability: compare to Expressive Tools
    • More Efficiency: easy to create a visualization

Unified Terminology

Chart

  • Axes: These are the lines that go up and down (the vertical Y axis), or left and right (the horizontal X axis)

Dataset

  • Vector: Each row in the table
  • Dimension: Each column in the table, a named attribute whose values have a particular meaning

Data Types

  • Categorical: Represents characteristics. like person's gender, language etc.
    • Nominal: Represent discrete units and are used to label variables.(no order) ["Female", "Male"]
    • Ordinal: Represent discrete and ordered units. ["Elementary", "High School", "College"]
  • Numerical
    • Continuous: Values can’t be counted but it can be measured. like the number of heads in 10 coins.
    • Discrete: Values can’t be measured but it can be counted. like height of a person.

Visual

  • Scale
    • Just like the scale of a map, but more general
    • A function that transforms data variable values into visual property
    • With two scales (x and y), we have the basis for a scatter plot.
    • Scales can represent visual encoding, such as colors, shapes, or size
    • Axes refer to spatial scales and Legends refer to non-spatial scales
  • Mark
    • Marks are the basic visual building block of a visualization
    • Graphical elements such as shapes(rect, line), images and texts
  • Glyph
    • A group of marks to be repeated by data

Evaluate Existing Visual Builders

Chase the expanding horizon of what visualizations are capable of, and learn from other visualization design approaches to produce better products

Marks + Data Binding + Layout = Visualization

  • Marks
    • Rectangle: bar chart, stacked bar chart, ...
    • Line: line
    • Text: label
  • Data Binding
    1. Generating glyphs based on data.(repeat)
    2. Specify proper scales between data fields and mark properties.
  • Layout
    • Relative Layout: locate by drag and drop
    • Coordinate System: cartesian, polar, custom?

Lyra + Vega

An interactive, graphical Visualization Design Environment (VDE)

  1. About

    1. From UW Interactive Data Lab (began in 1990s, notable projects includes Tableau, D3.js)
    2. Vega
    3. Lyra Builder

  2. Features

    • Data transformations
    • Visible scales, scale inference
    • Uses the Vega grammar as both an internal model and external file format.

  3. Vega Grammar - Let's Make A Bar Chart Tutorial

    1. Scales: Mapping data to visual value. (mathematical function)
      • Quantitative Scales: continuous -> continuous.
      • Discrete Scales: discrete -> discrete.
      • Discretizing Scales: continuous -> discrete.
    2. Axes: Mapping data to Cartesian coordinates.(like scales)
    3. Transforms： Data Processor. (filter, sort, rank...)
      • Aggregate: sum, group, count, ...
      • Collect: sort
      • Filter: filter
      • Window: running/moving
      • Regression: trendline
    4. Marks: Encode data using geometric primitives
      • Area: area chart
      • Arc: pie chart
      • Line: line chart
      • Rect: bar chart
      • Rule: axis ticks, grid lines
      • Text: label, title

  4. Implementation

    1. Declarative JSON Specification
    2. Reactive Dataflow Graph (parser)
      1. Process Data
      2. Handle Interaction
      3. Construct Graph: bind -> build (one mark per vector) -> evaluate (encode mark)
    1. **Render**: Tree-structured scenegraph definition -> Graph in canvas ```json // a simple scenegraph definition { "marktype": "rect", "items": [ {"x": 0, "y": 0, "width": 50, "height": 50, "fill": "steelblue"}, {"x": 100, "y": 50, "width": 50, "height": 50, "fill": "firebrick"}, {"x": 50, "y": 100, "width": 50, "height": 50, "fill": "forestgreen"} ] } ```

Charticulator

Interactive Layout-Aware Construction of Bespoke Charts

  1. About

    1. From Microsoft Research
    2. Compatible with Power BI as a custom visual
    3. Site: Charticulator

  2. Features

    • Individual glyph editor
    • One vector per glyph
    • Implicit scale based on data type. (categorical -> group, numerical -> location)

  3. Implementation

    • Data Types
    **Marks** are primitive graphical elements **Glyph-level** specification includes **glyph elements** and **layout constraints** **Chart-level** specification includes **chart elements**, **layout constraints** between them, and **scales** * **Constraint-based Layout** A horizontal scaffold enforces the glyphs to be horizontally adjacent to one another. `equals` Converts layouts into mathematical constraints.

Data Illustrator (DI)

Create infographics and data visualizations without programming

  1. About

    1. From Adobe and the Georgia Institute of Technology
    2. Inspiration: Bret Victor - Drawing Dynamic Visualizations
    3. Site: Data Illustrator

  2. Features

    • Direct manipulation
    • Core Operations: repeat and partition

Compare

Product Scale Visibility A Glyph Represent
Lyra Visible One Vector
Charticulator Implicit One Vector
Data Illustrator Implicit One / More
  • Scale Visibility
    • Visible scales, are lack of learnability, bring more expressivity, and vice versa. (lyra, mapX in charticulator)
    • Implicit scales make new added scale more ambiguous - is it a new scale? or an existing one? (DI)
    • Generate scale function automatically during data binding would be helpful. (all three)
    • Shared scales link individual glyphs together to produce visualization. (y-axis in charticulator, proper label position in DI)
  • A Glyph Represent
    • A glyph represent one vector means dataset need to fit builder. (transform in Lyra, groupBy in Charticulator plotSegment)
    • A dynamic data table panel would be helpful (Lyra, DI)

Related Resources

  1. Data Types in Statistics
  2. Introducing d3-scale
  3. A Guide to Guides: Axes & Legends in Vega
  4. Bret Victor - Drawing Dynamic Visualizations
  5. Third Wave Data Visualization
  6. The Grammar Of Graphics
  7. Lyra: An Interactive Visualization Design Environment
  8. Reactive Vega: A Streaming Dataflow Architecture for Declarative Interactive Visualization
  9. Charticulator: Interactive Construction of Bespoke Chart Layouts
  10. Data Illustrator: Augmenting Vector Design Tools with Lazy Data Binding for Expressive Visualization Authoring
  11. Critical Reflections on Visualization Authoring Systems-PDF
  12. Critical Reflections on Visualization Authoring Systems-Table
  13. La Lettura - VISUAL DATA