Command-Line Interfaces

• Let's return to the era of mainframe computing
• Programs were 'sequential'
• Program prompts for input, person waits on program

 
while true {
    print "Prompt for Input"
    input = read_line_of_text()
    output = do_work()
    print output
}
 

Event-driven Programming

• As interaction increased in complexity...
• Program waits for input
• Input is queued, then acted on in order of entry
• (e.g., mousedown, key press, etc)

 
do {
    e = read_event(); //<- input
    displatch_event(e); //<- Processing
    if (damage_exists()){
        update_display(); //<- output
    }
}while (e.type != WM_QUIT);
 

What's behind a button click?

• Set X and Y boundaries
• Check if mousedown is within boundaries
• Check if mouseup is also within boundaries
• If so, then raise click event

We build and use tools to reduce repetitive work

• Identify common or important practices
• Package those practices in a framework or toolkit
• Make it easy to follow those practices
• Put focus back on building the application

What is a user interface tool?

• Bootstrap (make responsive design easier)
• Angular, React, Svelte, and other web frameworks

The difficulty of tool design

• Explored in seminal paper by Myers, Hudson, and Pausch
• 1. Need to understand the core practices and problems
  2. Tools always evolving with technology and design
  3. The tasks people use tools to solve change quickly, tools struggle to keep up

The difficulty of tool design

• Myers, Hudson, and Pausch - Key terms:
• 1. Threshold: Difficulty to learn tool
  2. Ceiling: How much can be achieved with tool
  3. Path of least resistance: Tools influence what is created
  4. Moving targets: Changing needs make tools obsolete

Threshold

• Some tools are harder to learn
• Depends on what a person knows already
• Ex: A new programming language adds to threshold
• Ex: Tools that leverage existing concepts, easier to pickup

Ceiling

• Tools restrict what's possible
• Ex: Your program could do much more if it had direct access to the bits on your computing device

Path of least resistance

• "Linguistic Relativity"
• Some thoughts in one language cannot be expressed or understood in another language (a.k.a., Sapir-Whorf Hypothesis)
• In UI, our tools frame how we think about interaction and design (e.g., Bootstrap, Figma)

Moving targets

• Codification eventually constrains design
• Ex: Our understanding of how people interact with technology improves
• Ex: New technology changes the needs of tools (e.g., AR/VR)

Threshold and ceiling

• It's all relative; no absolute measure
• In general:
  • Tools should be low threshold
  • Tools should also be high ceiling
  • The best tools are both

Microsoft Paint

Adobe Photoshop

Visualization Tools

• All visualization tools are governed by the same principles
• Must render graphics on a display according to a set of rules
• The approach taken changes threshold and ceiling

Scalable Vector Graphics (SVG)

 
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-="" width="4" fill="yellow"></circle>
</svg>
 

SVG

High ceiling, but high threshold

Microsoft Excel

Low threshold, but low ceiling

Charting tools

• Excel, Google Charts

Declarative languages

• Visualization analysis grammars(ggplot, VisQL)
• Visualization Grammars (Protovis, D3.js, Vega-Lite)

Programming languages

• SVG, Processing, OpenGL

Declarative Languages

• Programming by describing what, not how
• Separate specification (what) from execution (how)

 
<main class="container">
	<div class="row">
		<div class="col-3">A</div>
		<div class="col-6">B</div>
		<div class="“col-4"">C</div>
		<div class="“col"">D</div>
		<div class="col">E</div>
	</div>
</main>
 

 
var array = ['1', 'fish', 2, 'blue'];
array[5] = 'dog';
array.push('2');
array[2] = array[array.length - 1] - 4;
array[0] = typeof array[2];
array[4] = array.indexOf('blue');
 
console.log(array.join('*'));
 

• Faster iteration, less code, lower threshold
• Can be generated programmatically
• Generally, easier to learn compared to imperative languages

Protovis

• Marks (specify how content is rendered) serve as graphical primitives
• e.g., Bar (for bar chart)
• Compared to Excel, high-ish ceiling, but high threshold

D3

• More expressive than Protovis, no marks, similar to SVG
• Add interactivity (mouse and keyboard events)
• Compared to Excel, high-er ceiling, but high threshold

• Data: input data to visualize
• Mark: Data-representative graphics
• Transform: filter, aggregate, bin, etc.
• Encoding: mapping between data and mark properties
• Scale: map between data values and visual values
• Guides: axes & legends that visualize scales

 
[
    {
        "date": "2015/01/01", 
        "weather": "sun", 
        "temperature": 1.1999999999999997
    }, 
    {
        "date": "2015/01/02", 
        "weather": "fog", 
        "temperature": 2.8
    }, 
    {
        "date": "2015/01/03", 
        "weather": "fog", 
        "temperature": 3.35
    }, 
    {
        "date": "2015/01/04", 
        "weather": "fog", 
        "temperature": 6.949999999999999
    }, 
    {
        "date": "2015/01/05", 
        "weather": "fog", 
        "temperature": 10.8
    },
... 

• Bin records by their temperature
• Count how many records fall into each bin
• Render those bins as vertical bars

 
{
    data: {url: "weather-seattle.json"},
    mark: "tick", //<- set mark as a tick
    encoding: {
        x: {
            field: "temperature", //<- Encode x according to the temperature field
            type: "quantitative", //<- Set the type to quantitative (numerical)
        }
    }
}
 

Other types include: temporal (time), ordinal (ordered), and nominal (categorical)

 
{
    data: {url: "weather-seattle.json"},
    mark: "tick", 
    encoding: {
        x: {
            field: "temperature", 
            type: "quantitative", 
            bin: true, //<- bin the data
        },
        y: {
            aggregate: "count", //<- aggregate bins by counting values in each
            type: "quantitative", //<- set the type to quantitative
        }
    }
}
 

 
{
    data: {url: "weather-seattle.json"},
    mark: "bar", //<- change mark to a bar
    encoding: {
        x: {
            field: "temperature", 
            type: "quantitative", 
            bin: true, 
        },
        y: {
            aggregate: "count", 
            type: "quantitative",
        }
    }
}
 

 
{
    data: {url: "weather-seattle.json"},
    mark: "bar",
    encoding: {
        x: {
            field: "temperature", 
            type: "quantitative", 
            bin: true, 
        },
        y: {
            aggregate: "count", 
            type: "quantitative",
        },
        color: { // <- set the color to follow the weather field
            field: "weather",
            type: "nominal",
        }
    }
}
 

Sensible defaults: Vega-Lite chooses layout automatically (colors, bin width, labels, bar stacks)

 
{
  data: {url: "weather-seattle.json"},
  mark: "bar",
  encoding: {
        x: {
            field: "temperature", 
            type: "quantitative", 
            bin: true, 
        },
        y: {
            aggregate: "count", 
            type: "quantitative",
        },
        color: { // <- set the color to follow the weather field
            field: "weather",
            type: "nominal",
            scale: { // <- set a custom color scale
                domain: ["sun","fog","drizzle", "rain","snow"],
                range: ["#e7ba52","#c7c7c7","#aec7e8","#1f77b4","#9467bd"]
            }
        }
    }
}
 

Override the sensible defaults by adding some custom colors

 
{
    data: {url: "weather-seattle.json"},
    mark: "bar",
    encoding: {
        x: {
            timeUnit: "month", 
            field: "date", // <- field is a date string, but will bin and display by month
        },
        y: {
            aggregate: "mean", // <- aggregate by the mean
            field: "precipitation",
        },
    }
}
 

Create a new chart

• Threshold is lower
• Ceiling remains the same, but defaults can be overriden
• Path of least resistance: Vega-Lite visualizations look the same

• Tools influence what is created
• Vega-Lite defaults can be overwritten, but are they in practice?
• Similar to widespread adoption of grid frameworks

 
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

Vega-Lite is added to the demo via content delivery network (CDN)

Could also download directly and add to project

• Provide easy way to install packages
• Simplify process of updating to latest version
• Manage your packages dependencies
• Conceptually similar to app stores, but "free"

• NPM is a package manager for JavaScript
• Similar to PIP for Python

• package.json file used to track installed packages
• package-lock.json file used to track of package versions
• node_modules folder containing all installed packages

• .gitignore file specifies what not to commit to your repository
• Do commit package-lock.json
• Do not commit node_modules, redundant as package.json already tracks

 
npm install packagename //<- install packages to node_modules dir
 
npm update //<- update to latest packages
 

 
npm install -g typescript //<- install packages to node_modules dir
 

• Superset of JavaScript
• "Transpiles" to JavaScript
• Introduces static types, type checking, and objects

 
var courseNumber:number = 133; // <- type used in course.ts
 
// Transpile using tsc, generates course.js
 
var courseNumber = 133;
 

 
var courseNumber: number = 133;
var isCourse: boolean = true;
var courseName: string = "Software User Interaction";
var notSure: any = ""; //similar to JS var
// also 'void', 'null', 'undefined'
 

 
function area(shape: string, width: number, height: number): string{
    var area:number = width * height;
    return "I'm a " + shape + " of area " + area + "cm^2.";
}
 
var a = area(15, 15, 'square'); // will produce error since first param is not of type string
 

 
class Shape {
    area: number;
    color: string;
    name: string;
    
    constructor (name: string, width: number, height: number ) {
        this.name = name
        this.area = width * height;
        this.color = "pink";
    };
 
    shoutout() {
        return "I'm " + this.color + " " + this.name + " with an area of " +
        this.area + " cm squared.";
    }
}
var square = new Shape("square", 30, 30);
 

 
//shape.js
var Shape = /** @class */ (function () {
    function Shape(name, width, height) {
    this.name = name;
    this.area = width * height;
    this.color = "pink";
    };
 
    Shape.prototype.shoutout = function () {
    return "I'm " + this.color + " " + this.name + " with an area of
    " + this.area + " cm squared.";
    };
    return Shape;
}());
var square = new Shape("square", 30, 30);
 

• Indicates what files or folders to transpile
• Configure transpiler options
• Specify what version of ECMAScript to transpile to

Type Checking

• Transpiler shows warning/error before code is executed
• Editor can support autocomplete
• Easier to refactor code

Object-oriented

• Easier to manage/maintain large codebases
• Simple enough to use; leverage existing principles (Java/C++)

• Transpiling is an extra step, slow for larger projects
• Support lag for new JS libraries
• Many frameworks focus on JS until stable, then add TS support