Learning Observable JS

Author

Camilo José Torres Jiménes

Section

Text.

// This control is named N; anytime we refer to N in our code, we get the value of the slider
viewof N = Inputs.range([1, 32], { value: 5, step: 1, label: tex`N:` })

Plot.plot({
  x: { domain: [-1.1, 1.1] },
  y: { domain: [-1.1, 1.1] },
  width: 400,
  height: 400,
  marks: [
    Plot.line(
      // Use d3.range to generate a list of t values and then map an anonymous
      // function over over that list to return the points to plot.
      d3
        .range(0, 2 * Math.PI + Math.PI / (50 * N), Math.PI / (50 * N))
        .map(t => [
          Math.sin(N * t) * Math.cos(t),
          Math.sin(N * t) * Math.sin(t)
        ])
    ),
    Plot.ruleX([-1.1]),
    Plot.ruleY([-1.1])
  ]
})