Using Observable

This post explores the use of Observable (OJS) for data visualization, particularly using the plot library. We will use the penguins dataset from the palmerpenguins package.

Setting up OJS Packages

//Import `aquero`, a `dplyr` equivalent in Observable:
import {aq, op} from "@uwdata/arquero"

  import {aq as aq, op as op} from "@uwdata/arquero"

Reading the Data

Let’s import and view the penguins dataset:

penguins = FileAttachment("palmer-penguins.csv").csv({ typed: true })

penguins = Array(344) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

//df_penguins = aq.from(penguins)
//Inputs.table(df_penguins)
//
Inputs.table(penguins)

	species	island	bill_length_mm	bill_depth_mm	flipper_length_mm	body_mass_g	sex	year
	Adelie	Torgersen	39.1	18.7	181	3,750	male	2,007
	Adelie	Torgersen	39.5	17.4	186	3,800	female	2,007
	Adelie	Torgersen	40.3	18	195	3,250	female	2,007
	Adelie	Torgersen	NA	NA	NA	NA	NA	2,007
	Adelie	Torgersen	36.7	19.3	193	3,450	female	2,007
	Adelie	Torgersen	39.3	20.6	190	3,650	male	2,007
	Adelie	Torgersen	38.9	17.8	181	3,625	female	2,007
	Adelie	Torgersen	39.2	19.6	195	4,675	male	2,007
	Adelie	Torgersen	34.1	18.1	193	3,475	NA	2,007
	Adelie	Torgersen	42	20.2	190	4,250	NA	2,007
	Adelie	Torgersen	37.8	17.1	186	3,300	NA	2,007
	Adelie	Torgersen	37.8	17.3	180	3,700	NA	2,007
	Adelie	Torgersen	41.1	17.6	182	3,200	female	2,007
	Adelie	Torgersen	38.6	21.2	191	3,800	male	2,007
	Adelie	Torgersen	34.6	21.1	198	4,400	male	2,007
	Adelie	Torgersen	36.6	17.8	185	3,700	female	2,007
	Adelie	Torgersen	38.7	19	195	3,450	female	2,007
	Adelie	Torgersen	42.5	20.7	197	4,500	male	2,007
	Adelie	Torgersen	34.4	18.4	184	3,325	female	2,007
	Adelie	Torgersen	46	21.5	194	4,200	male	2,007
	Adelie	Biscoe	37.8	18.3	174	3,400	female	2,007
	Adelie	Biscoe	37.7	18.7	180	3,600	male	2,007
	Adelie	Biscoe	35.9	19.2	189	3,800	female	2,007

Discovering plot library in OJS

Let’s create a slider for making variable histograms with facetting:

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen"], 
    label: "Islands:"
  }
)

Bill length (min):

bill_length_min = 35

Islands:

TorgersenBiscoeDream

islands = Array(1) ["Torgersen"]

Put a interactive filter on the data:

filtered = penguins.filter(function(data) {
  return bill_length_min < data.bill_length_mm &&
         islands.includes(data.island);
})

filtered = Array(46) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    title: "Facetted Histogram",
    caption: "Figure 1. A chart with a title, subtitle, and caption.",
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)

Facetted Histogram

Figure 1. A chart with a title, subtitle, and caption.

Plot.plot({
  grid: true,
  inset: 10,
  //aspectRatio: 0.05,
  color: {legend: true},
  marks: [
    Plot.frame(),
    Plot.rectY(df_penguins, 
      Plot.binX({y: "count"}, {x: "body_mass_g"}, 
                {color: "species"}, {fill: "species"})
              ),
    Plot.ruleY([0])
  ],
  title: "TITLE: Histogram of Body Mass of Penguins",
  subtitle: "SUBTITLE: Using OJS",
  caption: "Figure 1. A chart with a title, subtitle, and caption.",
})

TITLE: Histogram of Body Mass of Penguins

SUBTITLE: Using OJS

Figure 1. A chart with a title, subtitle, and caption.

Figure 1

Figure 1 is a histogram.

Trying to master the syntax, step by step:

Plot.boxX(
// Data 
  df_penguins, 
  
// Aesthetics
          {x: "body_mass_g", y: "species", fill: "species", sort: {y: "x"}}
)
// Plot options, concatenated
  .plot({
    title: "Box Plot in Observable",
    subtitle: "Getting hold of the Syntax",
    caption: "Box Plot on Log scale",
    height: 400,
    marginLeft: 100,
    
// scales
    x:{type:"log",}})

Box Plot in Observable

Getting hold of the Syntax

Box Plot on Log scale

Let’s try the same plot with facetting, AND with change in colour palette:

Plot.boxX(
// Data 
  df_penguins, 
  
// Aesthetics
          {x: "body_mass_g", y: "species", fy: "island", 
          fill: "species", 
          sort: {y: "x"},
          }
)
// Plot options, concatenated
  .plot({
    title: "Box Plot in Observable",
    subtitle: "Getting hold of the Syntax",
    caption: "Box Plot on Log scale",
// scales
    x:{type:"log"}})

Box Plot in Observable

Getting hold of the Syntax

Box Plot on Log scale

Plot.plot({

//plots to overlay, inside "marks". Pass data for each! No inheritance!
  marks: [
    Plot.ruleY([0]), // x-axis intercept!!
    Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.2}),
    Plot.lineY(aapl, {x: "Date", y: "Close"})
  ],
  y: {
    type: "log",
    domain: [50, 300],
    grid: true
  }
})

RuntimeError: Failed to fetch

OJS Runtime Error

Failed to fetch

Scatter Plot

Plot.plot({
  grid: true,
  inset: 10,
  color: {legend: true},
  x: {labelAnchor: "center"},
  y: {labelAnchor: "center"},
  //title: "Scatter Plot for Penguins",
  marginLeft: 40,
  marks: [
    Plot.frame(),
    Plot.dot(penguins, 
      {x: "bill_length_mm", y: "bill_depth_mm", 
      stroke: "black", fill: "species", strokeWidth: 0.2})
  ]
})

AdelieChinstrapGentoo

Grouping and Aggregation within Plot

Plot.plot({
  marginLeft: 80,
  marginRight: 80,
  aspectRatio: 0.05,
  x: {labelAnchor: "center", domain: [0, 200]},
  marks: [
    Plot.barX(penguins, Plot.groupY({x: "count"}, {y: "species"})),
    Plot.ruleX([0])
  ]
})

Trying Counts and Summaries with aquero

df_penguins = aq.from(penguins)
df_penguins.groupby("species").count().view()

df_penguins = Table: 8 cols x 344 rows {_names: Array(8), _data: Object, _total: 344, _nrows: 344, _mask: null, _group: null, _order: null, _params: undefined, _index: null, _partitions: null}

species	count
Adelie	152
Gentoo	124
Chinstrap	68

df_penguins
  .groupby("species")
  .rollup({ mean: (d) => op.mean(d.body_mass_g) })
  .view()

species	mean
Adelie	NaN
Gentoo	NaN
Chinstrap	3733.088235