My first observable 🎉

Community Help
1

Hi!
I’ve done my first observable and I’m super in love with this platform, thanks!
Hope not to be off topic.

https://beta.observablehq.com/@nkint/one-circle-one-point-and-two-tangents
Any hints? Is there something I’m doing wrong at first look?

First question: Is there a way to fire the mutable initial state when page is loaded to have the initial state settled up?

It is super weird because I have set my mutables variables to default values and it works as soon as the user click around and drag the black point BUT the initial state (anche the captured thumbnail when I share it) seems broken because the computation are not executed (they are executed only on the dra event).

I have some mutable variables that represents my state, I have:

  1. an init function where I define a viewof where I build a piece of the DOM,
  2. a function that mutate on an event (on d3.drag ) where the important computation are,
  3. a function that handle side effects where I do d3.select the already created elements of the view and change them consequentially based on mutation.

In the view (1) I have to read mutables but without reactiveness so I use

const p = mutable P

In the reaction (2) set the mutables
and in (3) I need reactivity so I use mutables.

My background is from React and Mobx soI am influenced by it flow (but it’s ok because I like a lot it).
The problem is that if I want to add views I have to add a lot of boring code to the 3rd function that handle side-effects (reading mutables).
But I like to keep separate DOM creation and manipulation/side effect (because I can do something in illustrator/whatever and just copy&paste the SVG and manipulate it).

Is my approach correct? Do I use mutable in the right way?
Any kind of advice?

1 Like
2

It looks like you are trying to make something like @tmcw/using-the-power-of-a-point-to-create-teardrops
Maybe some answers from there.