Playing Around With Idyll

Experiment: Double Ascent

[var name:'currentStep' value:1 /]
[var name:'fullData' value: `[
  {complexity: 0, understanding: 30},
  {complexity: 1, understanding: 40},
  {complexity: 2, understanding: 50},
  {complexity: 3, understanding: 65},
  {complexity: 4, understanding: 75},
  {complexity: 5, understanding: 82},
  {complexity: 6, understanding: 86},
  {complexity: 7, understanding: 88},
  {complexity: 8, understanding: 87},
  {complexity: 9, understanding: 83},
  {complexity: 10, understanding: 75},
  {complexity: 11, understanding: 65},
  {complexity: 12, understanding: 50},
  {complexity: 13, understanding: 40},
  {complexity: 14, understanding: 35},
  {complexity: 15, understanding: 40},
  {complexity: 16, understanding: 50},
  {complexity: 17, understanding: 65},
  {complexity: 18, understanding: 80},
  {complexity: 19, understanding: 90},
  {complexity: 20, understanding: 95},
  {complexity: 21, understanding: 97},
  {complexity: 22, understanding: 98},
  {complexity: 23, understanding: 99},
  {complexity: 24, understanding: 99}
] ` /]
[derived name:'visibleData' value: `currentStep === 1 ? fullData.slice(0, 8) : currentStep === 2 ? fullData.slice(0, 14) : fullData ` /]
[div className:'chart-container']
  ###### The Shape of Understanding
  [Chart
    type:'line'
    data:visibleData
    x:'complexity'
    y:'understanding'
    range: `[0, 100] `
    domain: `[0, 25] `
  /]
  [div className:'button-container' style: `{textAlign: "center"} `]
    [em] Complexity [/em]
    [Button
      style: `{
        display: "inline",
        background: currentStep <= 1 ? 'gray' : 'white',
        cursor: currentStep <= 1 ? "not-allowed" : "pointer",
      } `
      disabled: `currentStep <= 1 `
      onClick: `currentStep = Math.max(1, currentStep - 1) `
    ]
      -
    [/Button]
    [Button
      style: `{
        display: "inline",
        background: currentStep >= 3 ? 'gray' : 'white',
        cursor: currentStep >= 3 ? "not-allowed" : "pointer",
      } `
      disabled: `currentStep >= 3 `
      onClick: `currentStep = Math.min(3, currentStep + 1) `
    ]
      +
    [/Button]
  [/div]
  [div className:'narrative-text']
    [Conditional if: `currentStep === 1 `]
      We used to think it was simple: add complexity, gain understanding.
      Until you hit the peak...
    [/Conditional]
    [Conditional if: `currentStep === 2 `]
      Then confusion sets in.
      More parameters, *less* understanding.
      The model memorizes but doesn't comprehend.
    [/Conditional]
    [Conditional if: `currentStep === 3 `]
      But keep going...
      Something beautiful emerges.
      A deeper kind of understanding.
      **The double descent.**
    [/Conditional]
  [/div]
[/div]  

Stepper

[var name:"stepperIndex" value:0 /]
[Stepper currentStep:stepperIndex]
[Graphic]
[img src:`"https://mathisonian.github.io/idyll/scaffolding-interactives/static/images/examples/" + stepperIndex + ".png"` /]
[/Graphic]
[Step]
1
[/Step]
[Step]
2
[/Step]
[Step]
3
[/Step]
[StepperControl /]
[/Stepper]