I want to learn D3. I don`t want to learn Observable. Is that ok?

observablehq is sure a genius project … but I was 100% fully satisfied with plain javascript. I can not do anything with observable. I am here to do and not to observe. D3.JS is so great, a fantastic tool. But whatever observable is usefool for some few, I am sure most of serious coders will blow a fuzz with this non sense. OR OR OR, simply add a raw script to be “observable” with not change, I mean the raw one, the source ready to be tested in plain javascript, raw and immediately useable. That would be great : a great step toward the glory useful past.
THANKS ! :slight_smile:

9 Likes

I can not do anything with observable […] I am sure most of serious coders will blow a fuzz with this non sense […] step toward the glory useful past

I can’t figure out what you are trying to say.

If you want to write javascript code down in a text file and run it in your browser, nobody is stopping you…

2 Likes

2 posts were merged into an existing topic: Copyright and software licenses

Well… I agree with the original poster (this frustration lead me to this thread as the first search result) so to put it other words what is being said through an example… currently the new tutorial of d3.js begins with a feature unique to observable javascript

All I was looking from a “getting started” tutorial was how to create a d3 element in a web page… Which is specifically not covered…

This seems not to be the case… import {chart as temperatureHistogram} with {temperatures as data, height} from “@d3/histogram”

So anyway, I wrote this just to let you know that probably many people who already know what
interactive data visualization means and have already developed websites will experience the kind of feelings expressed in this thread.

6 Likes

I’ve created an account just to express my frustration over this.

Why can we not simply download vanilla code examples without any “Observableness” in them?

Is that really too much to ask?

9 Likes

Observable notebooks are like spreadsheets, where cells run automatically whenever you edit or values change. That’s not how conventional (imperative) programming languages work, so sadly you can’t simply copy-paste a whole notebook into a vanilla JavaScript application.

We recognize that this is a change and a disruption: a new thing to learn. And we need to do a better job of helping you learn Observable (and explaining why you should bother).

Yet despite our shortcomings, we fundamentally believe that Observable is a better way to code: easier to understand, easier to tinker, easier to adapt and reuse, easier to collaborate and share.

You can download the vanilla JavaScript for any notebook by clicking Download Code in the notebook menu. (See Downloading and Embedding for details.) This code can be self-hosted so you can run whatever you create in Observable anywhere. And our embeds are much more powerful than iframes, allowing deep integration (e.g., with React). We’re making this easier; see Jeremy’s Handy Embed Code Generator for a start. This transpiled code isn’t intended to be edited directly; we recommend you edit on Observable.

As to the broader question of why go to the trouble to introduce a new language, a live editor, and a collaboration platform to accompany it: our goal is to help people help each other. We want to foster collaboration and creativity. For this to succeed, code must become more approachable, which means breaking a few eggs. There’s an incredible community of people on Observable that can help you (through comments and suggestions) and a wealth of techniques to learn from and reuse (through forks and imports). With the Observable community, the D3 examples can be so much better than what I could ever make on my own.

8 Likes

Thanks for taking the time to provide a detailed reply.

This is why I still think this is an issue: choice

It may really be the case that Observable is the next big thing but, as it stands, I am not given any alternative when I come here from the d3 site, for example, apart from going elsewhere. I already tried using the Download Code feature, however, Observable is still within the code that you get. In order to do what I needed to, which was present a very quick demo of what we could do with d3 using our data, I had to spend much longer on it than I originally thought I would need.

Now, you could probably argue that I could have done my demo using Observable and it would be easier, quicker, and more malleable, but as the OP says in the title of the post here, what if I don’t want to right now? Instead of using Observable as something I depend on for delivering my code, what if instead I wanted to sandbox some ideas and then move to using straight JS code? There are a multitude of reasons why people would not want to change up everything they’re doing today.

In my opinion not having an option to export an Observable notebook as regular code is severely limiting, and think I might have actually used it if it had this functionality. Without it, I’ve got a hell of a lot of buy in. For my demo, I ended up hacking around the d3 code from here to get what I wanted to work, which led to frustration and a desire for things to go back to how they used to be with the d3 example code.

Thanks,

Muhmud.

11 Likes

I greatly admire the Observable team and all the amazing work being done here, but I couldn’t agree more with @muhmud! Like many others, I found myself on this thread as a result of a lot of frustration.

I agree that Observable may be the way to go, and I do agree with a lot of the advantages being presented - but the problem is (and I think I see many others expressing similar views): why, oh why, can’t we have the copies of the ‘regular’ code that we are used to, in addition to the observable versions? I think that being able to compare old with new would drastically ease the learning process for so many people. Of course after Observable becomes more mainstream and understood, the old code can be removed. As it stands right now, I feel like I would have to suspend a lot of my work in order to fully dive into and embrace Observable - unfortunately that is just not an option for many programmers like myself.

If there is a reason why the Observable team does not want to provide ‘regular’ code with Observable code, it would be great to know what the reason is - part of the frustration comes from feeling that this is such a small ask, and yet we’re not getting it.

Thanks again for the awesome work.

6 Likes

Maintaining two parallel sets of examples, one Observable and one vanilla, is no small task. The D3 examples represent thousands of hours of work (418 notebooks on Observable and counting), and over the last few years we’ve committed to Observable because we think the examples will be better the community’s help and it’s a better way to learn D3.

There are plenty of vanilla D3 examples available on the web, such as the D3 Graph Gallery, and resources for using D3 with other frameworks, such as Amelia Wattenberger’s Fullstack D3 and Data Visualization. But these aren’t maintained by the D3 team as we are focusing our efforts on supporting the community at Observable.

3 Likes

Thank you very much, I appreciate the explanation.

But is it possible to leave the bl.ocks.org vanilla examples up after they are ported to Observable (with the caveat that they are no longer maintained and may even be slightly different from the new sample)? While it is true that there are many other D3 examples on the web, the bl.ocks.org examples that have been removed are the closest thing to the new Observable samples that we can use as a reference for understanding the transition.

2 Likes

All the blocks with D3 examples still exist as gists. If you find yourself trying to look at a block but being redirected to an Observable notebook, you can replace bl.ocks.org with gist.github.com in the example’s url. Then you can clone or download the gist and open it up locally.

5 Likes

Thank you very much, I did not know that - this is very helpful information.

And to play around with an example directly in the browser, check out blockbuilder.org. Simply append the gist path to the domain name, e.g.:

Please be aware though that many of the examples use old versions of D3, often with major API differences.

1 Like

Like others, I came to this thread hoping to find a basic HOWTO for running d3 code inside a simple web page.

Well, you’re wrong. It is a barrier to collaboration, because I won’t start until I know this thing is useful. I’m not convinced it is.

The whole point of having a javascript engine is so that we can use data from our web applications. I’m not interested in a dynamic view of static data, I’m interested in a dynamic view of dynamic data.

Before I do 10 minutes of work learning your new Matlab/Maple/Mathematica/Juypiter workbook engine, which I’m sure is very nice, I want to know if I can make a basic plot inside my web application, and how much work it will take to get there.

I don’t want to learn your software. I want to know if your software is any use to me. The official answer seems to be “No”.

Either give us a basic ‘getting started’ demo in pure HTML/Javascript, or stop calling yourself a library. Every response makes clearer that d3 is not a library, it’s a platform.

3 Likes

I guess it’ll take four lines of code, plus an import:

After that, just embed the code to get it into your application.

Why so easy? Because I imported functionality from this awesome Plotter notebook - collaboration at work! Need to incorporate that functionality into more advanced work? No problem. Need to use D3 for more complete control and flexibility? Again no problem. Here’s one of those embedded into a webpage.

For the record, I do understand the frustration as my first exposure to Observable was while trying to wrap my head around some D3 code I found in a Google search. Even though I had been programming with D3 for several years, it was hard to figure out the code since it seemed intertwined with new Observable functionality that was then unfamiliar to me.

If there’s one mistake made by the Observable team that this thread has uncovered it’s tying the D3 documentation too tightly to Observable. I guess that @Fil said as much in his response.

To be clear D3 and Observable are two totally different things. I think it’s fair to characterize Observable as a platform. D3 is certainly a library - one of many that the Observable platform makes it easy to use.

4 Likes

Hi Nathaniel,
In case you want to see a very simple example of how to use D3 code in a browser, here is a quick example. (I copied the code from this notebook, in the the section called “Coding a Chart, Automatically”). The only think I had to do was include the D3 library as instructed on the home page of D3 like so:
<script src="https://d3js.org/d3.v5.min.js"></script>
and then I copied the code from the notebook cell:

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 600]);

const div=d3.select("body").append("div")
    .style("font", "10px sans-serif")
    .style("text-align", "right")
    .style("color", "white");

div.selectAll("div")
    .data(data)
    .join("div")
      .style("background", "steelblue")
      .style("padding", "3px")
      .style("margin", "1px")
      .style("width", d => `${d * 10}px`)
      .text(d => d);

and it worked!
You can see it running in codepen here
I hope that helps get you started.

This method should work for most D3 examples you see posted around the web, including some of the examples on Observable, except of course if the notebooks were also showing some interactivity and other features that Observable adds to using D3. But even then, in most cases you can add the bits you need together to create something similar in your web page.

There is also obviously the embed method that @mcmcclur described above, but it sounded like you just wanted to see an example of vanilla D3 in a web page. Hope this was helpful.

Good luck and have fun exploring D3!

3 Likes

I also believe that Observables only adds an obstacle to newcomers. Perhaps advanced users have found purpose in it, but personally I find it’s a major turn off at this point in time.

Hi Nathaniel,

Have a look at D3 for the Impatient. It uses plain old JavaScript and it reads quite nicely.

3 Likes

Your last paragraph hits the spot. I’m learning d3js mostly from books and online tutorials. This was sufficient for some time but now even the latest book or tutorial isn’t up to date with the latest version of d3. Pretty much every book and tutorial uses the general update pattern which appears to be deprecated. It was replaced by sel.join() and if one desires to learn how to use the latter, it has to be through Observable. I can’t understand why even the basic functionality of d3 is tied to Observable. I’m now left with two options, either learn Observable or keep using Canvas/JS for my projects. I’m honestly not sure which way to go.

Props for your math animations, they’re very inspiring!

3 Likes

Thanks! I literally published a new one on solving ordinary differential equations minutes ago:

I will say that, while I could have built this in a web page, I find the integration of graphics, text, and code for this kind of project to be quite natural in Observable.

2 Likes

Superb! You’ve convinced me.

3 Likes