Skip to content

Latest commit

 

History

History
141 lines (117 loc) · 7.02 KB

week04.md

File metadata and controls

141 lines (117 loc) · 7.02 KB

Week 4

Topics

  • Animation (Assignment 03 solution)
  • Telling a story (projects)
  • Dashboards with Observable Plot

Animation

Assignment03 solutions

Exercise

STOPPED HERE

Projects

The purpose of the projects -- tell a story with data

Animation

animation.md -- additional (advanced) comments about animation and Observable.

viewof

  • Introduction to views
    • In Observable, a view is a user interface element that directly controls a value in the notebook
    • A view consists of 2 parts:
      • the view itself, which is typically an interactive DOM element
      • the value, which is any JavaScript value
    • HTML input elements work by default as views for two reasons:
      • they have a value property
      • they emit input events when you interact with them
      • Input event -- MDN
        • this reference has a nice example that shows how it works in vanilla javascript
        • it's fairly cumbersome, but it works
    • Observable Inputs are more convenient than native HTML
      • Plus, you can create custom inputs
      • For example, the map that behaves like an input element when you click on it
        • It dispatches an "input" event when you do that (you can see it in the code)
      • The silly emoticon is also an input element, and counter
  • A Brief Introduction to viewof
    • This notebook provides a look under the hood of "viewof"
    • It discusses the extra logic for dealing with "idiosyncrasies"

Dashboard

Exercise

Interactive Plot in a Dashboard

Observable Plot (Take 2)

  • Learning goals
    • Practice with the Plot API
    • Show how D3 is used to add CSS styles to Plots elements
    • Explore where Plot is going
  • Plot II
  • Plot tooltip -- Mike Freeman
    • add a "title" attribute to any mark
    • addTooltips() is a function takes a chart as its first argument
    • Adds <style> to the chart to the chart to the chart to the chart (right before returning the chart)
  • Plot animation