Alert - I have split up this Huge website into smaller ones. Please check out the new site URLs on the Home page for the latest course content. This website will not be updated anymore. Thanks for your patience and support! 🙏

Using PlotX3D with Observable in Quarto

Introduction

PlotX3D is a collection of Observable notebooks developed by Mark McClure, each of which defines functions that work well together. We need to import those notebooks into our work here and then use those functions to create the shapes we need.

Importing OJS packages

Import aquero, a dplyr equivalent in Observable:

import {aq, op} from "@uwdata/arquero"
//PlotX3D libraries
import {
  show_x3d,
  create_pointSet,
  create_indexedFaceSet,
  create_indexedLineSet,
  create_sphere,
  create_text,
  create_cylinder,
  create_torus,
  create_arrow,
  create_box,
  create_transform,
  style
} from "@mcmcclur/x3dom-primitives"
//
import { create_surface } from "@mcmcclur/parametric-surfaces"
//
import { create_tube } from "@mcmcclur/space-curves-and-tubes"
//
import { create_hollow_cylinder } from "@mcmcclur/hollow-cylinder"
  import {aq as aq, op as op} from "@uwdata/arquero"

Making Shapes with PlotX3D

hyperbolic_paraboloid = show_x3d([
  create_surface((x, y) => [x, y, x ** 2 - y ** 2], [-1, 1], [-1, 1])
])
OJS Runtime Error (line 44, column 3)

create_surface is not defined

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", "Biscoe"], 
    label: "Islands:"
  }
)
bill_length_min = 35
islands = Array(2) ["Torgersen", "Biscoe"]

Put a interactive filter on the data:

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

Failed to fetch

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)
OJS Runtime Error

Failed to fetch

Trying Counts and Summaries with aquero

df_penguins = aq.from(penguins)
Inputs.table(df_penguins)
OJS Runtime Error

Failed to fetch

OJS Runtime Error

Failed to fetch

df_penguins.groupby("species").count().view()
OJS Runtime Error

Failed to fetch

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

Failed to fetch

Discovering plot

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: "For charts, an informative title",
  subtitle: "Subtitle to follow with additional context",
  caption: "Figure 2. A chart with a title, subtitle, and caption.",
})
OJS Runtime Error

Failed to fetch

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",}})
OJS Runtime Error

Failed to fetch

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"}})
OJS Runtime Error

Failed to fetch

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
  }
})
OJS Runtime Error

Failed to fetch

Plot.plot({
  grid: true,
  inset: 10,
  aspectRatio: fixed? 1 : undefined, //works online ;-()
  color: {legend: true},
  marks: [
    Plot.frame(),
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"})
  ]
})
OJS Runtime Error (line 198, column 16)

fixed is not defined

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])
  ]
})
OJS Runtime Error

Failed to fetch

Back to top