An Interactive Scatterplot Using Observables

Introduction

It is not hard to learn to use Observables to perform data anlysis and produce interactive graphs like the one shown below.

If you would like to enhance your project website with Observables, give it a try! Setting up an account is free.

The Plot

The plot below is based on data from the 2005 Cherry Blossom Race. For documentation see here.

The user can choose the sex of the runners plotted, and the opacity of the points. (The latter feature is useful, as over-plotting is an issue in this dataset.)

race = {
  const race = await FileAttachment("TenMileRace.csv").csv({typed: true});
  race.forEach(function(runner) {runner.timeMinutes = runner.time / 60;});
  return race;
}

minTime = d3.min(d3.map(race, d => d.timeMinutes))

maxTime = d3.max(d3.map(race, d => d.timeMinutes))

minAge = d3.min(d3.map(race, d => d.age))

maxAge = d3.max(d3.map(race, d => d.age))

viewof sex = Inputs.select(["F", "M"], {label: "Sex of runner: "})
viewof opacity = Inputs.range([0, 1], {label: "Opacity: ", step: 0.01})

Plot.plot({
  inset: 8,
  grid: true,
  marks: [
    Plot.dot(
      d3.filter(race, d => d.sex == sex), 
      {x: "age", y: "timeMinutes", fill: "black", fillOpacity: opacity}
    )
  ],
  x: {domain: [minAge, maxAge]},
  y: {label: "time (minutes)", domain: [minTime, maxTime]},
})

Non-interactive Alternatives

To investigate the relationship of age, time and sex all at once, it might be preferable to include sex as an aesthetic property in the graph. The over-plotting could also be addressed by a different sort of glyph: density contours, for example, rather than points. Below is a non-interactive graph of the data:

Plot.plot({
  marks: [Plot.density(
    race.map(d => ({age: d.age, timeMinutes: d.timeMinutes, sex: d.sex == "M" ? "male" : "female"})), 
    {x: "age", y: "timeMinutes", stroke: "sex"}
  )],
  y: {label: "time (minutes)"},
  color: {legend: true}
})

Since the density contours of the two sexes overlay each other somewhat, it may be best to facet by sex rather than making it an aesthetic property of our glyphs:

Plot.plot({
  marks: [
    Plot.frame(),
    Plot.density(
      race.map(d => ({
        age: d.age, 
        timeMinutes: d.timeMinutes, 
        sex: d.sex == "M" ? "male" : "female"
      })), 
      {x: "age", y: "timeMinutes", fx: "sex"}
    )],
  y: {label: "time (minutes)"},
  facet: {label: null},
  nice: true
})

Notes

This work was first done as a Notebook on the Observable site. It is often easiest to do one’s development there, then transfer the code to Quarto for publication.

The version of Plot provided with Quarto often lags well behind the latest version as documented by Observables. In order to keep your Quarto project current with what works in your Observables notebooks, it is advisable to import the latest version of Plot, like this:

Plot = import("https://esm.run/@observablehq/plot")