Idyll + Observable

Displaying chart from https://beta.observablehq.com/@mathisonian/d3-change-line-chart.

This code embeds two cells from an observable notebook, and binds the value of cells lineWidth and height to Idyll variables of the same name.

[Observable
  notebook:"https://beta.observablehq.com/@mathisonian/d3-change-line-chart"
  showCells:`['chart', 'height']`
  variables:`{
    lineWidth: lineWidth,
    height: height
  }` /]

Idyll Variable Controls:

Line Width: Height:

The variables property defines how Idyll variables should be hooked up to Observable. In this case, the notebook has cells named lineWidth and height, so we use our Idyll variables to set the value of the Observable cell of the same time.

This is still a work in progress - for example, it doesn’t actually pull the notebook from that URL yet, but requires a local copy. I’m working on fixes for this.

The interesting bits that connect Idyll’s reactive runtime to Observable’s can be found here.

Full example code below:

[var name:"lineWidth" value:5 /]
[var name:"height" value:300 /]

Idyll Variable Controls:

Line Width: [Range value:lineWidth min:0 max:100 /]
Height: [Range value:height min:0 max:1000 /]

[Observable
  notebook:"https://beta.observablehq.com/@mathisonian/d3-change-line-chart"
  showCells:`['chart', 'height']`
  variables:`{
    lineWidth: lineWidth,
    height: height
  }` /]