- Animation (Assignment 03 solution)
- Telling a story (projects)
- Dashboards with Observable Plot
- America's Cup
- America's cup animation -- discuss how it works
- View source -- shows that it uses an early version of D3 to animate an SVG (not canvas)
- Visualizing chaos (SVG vs 2d Canvas vs WebGL)
- Canvas
- Animation with Canvas has been around for a while. It's fairly verbose with "vanilla" JavaScript.
- Introduction to Canvas -- MDN
- Advanced Animations -- MDN
- window.RequestAnimationFrame() -- MDN
- WebGL is more difficult still
- Animation is easier with Observable
- You can dig into the details, but it starts becoming subtle
- Pause a generator
- technique for pausing a generator (in Observable)
- uses "this" from the standard library to access the previous value
- standard library
- Vanilla generators aren't any easier
- Pause a generator
- Assignment03 solutions
- My solution (after completing the exercise below)
- Introduction to Mutable State
- Look the cell called "mutableWalls"
- Reproduce this cell with an SVG
- the solution
STOPPED HERE
The purpose of the projects -- tell a story with data
- Dashboards vs Insights
- What is data visualization anyway?
- Case study: NYTimes article on the America's Cup
- Case study: http://pbogden.com/single
- Case study: Myth debunked
- Engaging stakeholders for your project -- some options...
- Update on stinky
- Smell data
- Meteorological data
- Update on Service-Learning
- Update on observable-jupyter
- Do you have an idea for a project?
- Think about it...
- Update on stinky
animation.md -- additional (advanced) comments about animation and Observable.
- 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
- Shows how to create a Dashboard with imported cells
- How do you create an interactive Dashboard (i.e., dashboard with interactive charts)?
- Earthquake Dashboard
- Responsive design
- describes this evolution of web page layouts to accommodate mobile devices
- explains the purpose of
<meta name="viewport" content="width=device-width,initial-scale=1">
- introduces CSS Grid Layout
- CSS Grid Layout
python -m http.server
- browse to http://localhost:8000/index3.html
- With Observable Dashboard
- How do you set the width?
- How do you set the height?
- Start with https://observablehq.com/@mbostock/dashboard
- Replace one of the charts with https://observablehq.com/@d3/world-airports
- Solution
- Plot Early Bird
- Plot.brush()
- My Dashboard with Plot.brush()
- note the use of "viewof"
- 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