Export actual HTML, CSS, JS files from a Notebook.

Community Help
1

Hi! I just saw this tutorial on ‘The Coding Train’ YT Channel.

Coding Challenge #19

But it is made using p5.js .

But I want to make it using d3.js.

I also saw this notebook on ObservableHQ.

Superellipse.

It is made using d3.js.

But I want the actual code,

I don’t want to download the code and embed it using runtime.

I want it plain So, Can anyone help me!

I don’t want extra Observablehq scripts.

Please Help me!

I am trying to make some generative art I want plain html, css and js files.

Please Help!

Thanks!!!

2

The ‘superellipse’ function there is ‘the actual code’ that handles the math, and the cell with the drawing has ‘the actual code’ that handles the drawing. It uses DOM.svg which is part of the Observable standard library, but you could make your own svg element some other way (e.g. by putting it in your html).

If you want to use sliders to adjust a, b, and n, you need to make input elements on your page, and then write your own code to hook up the sliders to trigger re-drawing and set the relevant parameters. Observable makes this nicer by handling the reactivity in a convenient way.

For a fixed value of a, b, and n, you could just set those directly in your code (and also w, h, for the width and height of the plot).

If you just want one function outputting points on the superellipse when you pass in a, b, n, and a parameter t in [0, 1], here is a single-function version cut down to just that:

function superellipse(a, b, n, t) {
  t = 2 * Math.PI * t;
  const x = Math.cos(t), y = Math.sin(t),
        sx = Math.sign(x), sy = Math.sign(y);
  return [a*sx * (x*sx)**(2/n),
          b*sy * (y*sy)**(2/n)];
}
2 Likes
3

Can you please Explain it, like just like the video on YouTube I attached in my Question.
With Sliders (All of then are not necessary, but only the ‘n’ slider).

Please Help, as I am a newbie to d3.js.

I don’t know how to integrate sliders and to draw a superellipse in d3.js.

Please Help!!!

THANKS FOR THE REPLY!!!

4

I want it like this!

Superellipse p5.js

But, I want it in d3.js.

It is in p5.js.

Thanks!!!

5

What is the context? Do you have a website where you are trying to add a drawing of a superellipse?

D3 is a library that can help with the drawing (as seen in Torben’s notebook), but D3 doesn’t set up your html and javascript files or hook sliders up to code.

You could also take a look at https://bl.ocks.org or https://vizhub.com to find examples of plain javascript and html with sliders hooked up to dynamic drawings. Perhaps there is an example at one of those sites you could fork to apply Torben’s superellipse drawing code.

1 Like