🧪 DSCI 554 lab X

Accessibility, UX, responsive visualizations, frameworks

Dr. Luciano Nocera

PechaKucha presentation with Sozi

Sozi

Download and install from Sozi

Sozi Demo

Follow along in your project repository with the files under presentations/proposal
  • Editing the slides
  • Configuring the presentation
  • Presenting
  • Presenting with presenter view
💡 The presentation in your project repository is already set-up according to a5 ASSIGNMENT.md

Tools and techniques

  • Use tools to catch usability and accessibility problems, e.g., Lighthouse in Chrome
  • Techniques you can use to fix usability and accessibility problems include:
    • Use layout to organize content and clarify
    • Use CSS and HTML to clarify navigation and interaction (e.g., Interactive elements indicate their purpose and state)
    • Use colors scales, contrast and size fonts with CSS
    • Adapt the information displayed to varying screen size and resolutions (responsive)

Responsive web design for charts

Techniques typically include one or more of:
  • Resize chart continuously
  • Change and/or transition form
  • Adapt typography, legend and axes
  • Adapt the data

Frameworks

NB: the above svg image has width="45%" so it will resize according to 45% of the parent container when the browser window resizes

Web Components

Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. -- Wikipedia

Framework Model

Model View ViewModel (MVVM) also know as MV* or MVWhatever

🏋🏽‍♂️ lab/ex0: responsive bar chart with HTML

🏋🏽‍♂️ lab/ex1: responsive line/sparkline chart

🏋🏽‍♂️ lab/ex2: responsive bar chart

🏋🏽‍♂️ lab/ex3: responsive bar/lollipop chart

🏋🏽‍♂️ lab/ex4: d3 re-usable area chart

🏋🏽‍♂️ lab/ex5: bootstrap responsive grid layout

🏋🏽‍♂️ lab/ex6: Vue.js app, HTML chart with directives, d3 chart, d3 chart component

🚨 Make sure to commit & push by the deadline (15% of grade)