Skip to content

plot.md

Latest commit

 

History

History
79 lines (67 loc) · 5.14 KB

plot.md

File metadata and controls

79 lines (67 loc) · 5.14 KB
Raw

Plot

Introduction to Observable Plot

intro

  • What is Plot?

    Observable Plot is a free, open-source, JavaScript library for visualizing tabular data, focused on accelerating exploratory data analysis. It has a concise, memorable, yet expressive API, featuring scales and layered marks in the grammar of graphics style.

  • Why Plot?

    Observable Plot is for exploratory data visualization. It’s for finding insights quickly.

    • Plot has a well-designed API that builds on D3, which makes it remarkably extensible.
  • Getting Started
    • This link provides installation instructions for various web technologies (e.g., React, Svelt, Vue, etc.)
    • The first two sections tell you to about using Plot in Observable and in vanilla HTML -- we'll use both of these.
    • We won't use React, Svelt, Vue, etc. -- these are for app development (they show up in the web-dev course).
  • Plot -- github

theory

  • A Layered Grammar of Graphics
    • Hadley Wickham defines a graphical grammar as the fundamental principles of the art/science of statistical graphics
    • It builds on previous work and describes the implentation in R's ggplot2
  • grammar of graphics (summary)
    • This web page is a concise summary of Hadley Wickham's article
    • Plot from ggplot2 -- compares Plot and ggplot2
  • Introducing D3-scale
  • D3 (D3.js) -- github

    D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics.

basic elements

This is mostly just a summary of the API reference docs

  • Plot Main page links to key sections in the API reference docs
    • Plot API reference docs
    • The topics in the left-hand navigation bar are the features (basic elements)...
  • plots
    • Typically, calling Plot.plot() with the desired options will render a plot
  • marks
    • marks are geometric shapes
      • Plot doesn’t have chart types; instead, you construct charts by layering marks.
      • the mark constructor takes two arguments: data, options (each mark has its own data)
    • marks have "channels"
      • Commonly used channels include horizontal position "x" and vertical position "y"
      • Other optional channels: fill, fillOpacity, stroke, strokeOpacity, strokeWidth, opacity, title, href, ariaLabel
      • channel values can be column names, functions of data or arrays
      • channel values can also be an object with a transform method that is passed the data array and returns an array
    • marks are layered
      • you can use multiple marks to construct various kinds of plots
      • "the big advantage over chart types is that you can compose multiple marks of different types into a single plot
      • Plot.marks() is a convenience method for composing marks
    • each mark object has a "plot" method for rendering a plot
  • Scales
    • "Scales convert an abstract value such as time or temperature to a visual value such as x→ or y↑ position or color."
    • Demo using gistemp
  • Projections
    • "A projection maps abstract coordinates in x and y to pixel positions on screen."
  • Transforms
    • Transforms derive data as part of the plot specification.
  • Interactions
    • This section has documentation for pointing (e.g. tooltips)
    • It also has sections on experimental functionality such as zooming & animation
    • Documentation points to github issues and community discussions.
    • You can also see the experiments by Mike & Fil!
    • And you can upvote the things you'd like them to add in the future!

Explorations

Explorations collection has two semi-guided tutorials -- weather & penguins