Javascript newbie help

Community Help
1

Hi all!

I know this is a long shot & that I might be completely out of place, but here goes -
I’m a health economist who’s always been obsessed with better data visualization. I’m not a total newbie when it comes to coding – I have a fairly good understanding of HTML and CSS, and I use Stata and some R for work. But Javascript, except for some really basic courses, is new for me. And so is the concept of Observable.

However, I love the idea of this platform so much that I decided I’d try my best to get the hang of it and tailor it to my work. I want to (1) learn all I can about d3 (2) eventually be able to not only visualize data, but also dynamically create models on Observable (i.e. basic forecasts, etc).

Following Firefox’s developer course on Javascript, though, I noticed that Observable’s syntax is somewhat different from the normal way. I read through a few of the introductory posts, but I’m now turning to you for help. Given my objectives and my (in)experience, what do you guys think is the best path for me to learn Javascript aimed at d3 and Observable?

Thanks in advance!

blan

2

Hi Blan.

“What is the best path to learn JavaScript for d3?” is a question with many answers. There are books. There are blocks. There are tutorials. There are docs.

But, we are very much hoping to build Observable into a place where you can learn these things directly on Observable itself — a large part of the point is to build a community where folks can share notebooks, fork each other’s examples, and learn and import from other sketches.

Observable’s syntax is only slightly different from JavaScript, and is executed in only a mildly different way. Notebooks are largely compatible with all the existing JavaScript that’s out there. For the best information on the details, our Introduction series of notebooks is where it’s at.

So, with that said — what I’d recommend for you, with your particular programming/stats/modeling experience, is just to simply get started. Try something simple that you’d like to build for your health economics work, describe what you’re trying to achieve in your notebook, publish it frequently, and when you get stuck, feel free to ask for help with the code. That’s probably the fastest way to get up to full steam.

2 Likes
3

Thanks a lot for your help! I am now going through the book you suggested, and referring back to the examples within Observable to “translate” standard Javascript into Observable.

I have one important question: what is the logic for Observable’s simplified syntax? How does it work exactly, and do you suggest using it instead of the classic syntax? For example, this simple statement:

for (let i = 0; i <= 5; i++) {
yield i;
}

Can be written in observable more easily as:

{ for (let i = 0; i <= 5; i++) yield i }

Also, I don’t understand why using return(i) in the function above doesn’t list my output in Observable as it does in normal Javascript.

Thanks a lot for your help :slight_smile:

4

There’s not really much “simplified” syntax in Observable. Our notebooks are just JavaScript, with a few small changes, as outlined here: https://beta.observablehq.com/@mbostock/introduction-to-code

To be explicit, the differences:

  • Each cell in Observable is either a single expression, or a single block of code (with { }) that returns or yields a value. In both cases, the body of the cell implicitly becomes the body of a function. The cell is re-evaluated (the function is called) every time one of its inputs updates.
  • The other difference is the new keywords: viewof and mutable. These both are a way to have one cell definition create two values. With viewof, you define the JS value and its HTML view at the same time. With mutable you define both the reactive and non-reactive versions of a value.

As for your question, if you write:

{
  for (let i = 0; i <= 5; i++) {
    return i;
  }
}

… as I mentioned above, it becomes the implicit function body for the cell. Imagine something like this:

var cell1 = function() {
  for (let i = 0; i <= 5; i++) {
    return i;
  }
};

In both regular JavaScript, and Observable, calling that function will always return 0. Your loop never has a chance to run more than a single step before the function returns. And as you note, yield (creating a Generator function instead, that is capable of yielding multiple values), works differently.

1 Like