https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok/1957/2 back to Observable The Observable Forum I want to learn D3. I don`t want to learn Observable. Is that ok? Community Help TigerZhao007 May 7, 2019, 1:21pm #1 Both D3 and Observablehqcom are excellent product. Thanks to the authors! I want to learn D3. However a lot of D3 official examples are coding in Observablehq.com. I don`t want to learn Observable, because I mainly use D3 for off-line academic Chart. Could Mike Bostock give every D3 official examples a common Javascribe environment code? Or ? Forcing everyone who want to learn D3 must learn how to use Observablehq.com first? 11 Likes thoughts from someone who liked using bl.ocks to learn D3 Use of download code ? Converting Indented Tree chart to pure Javascript. How? aaronkyle May 13, 2019, 12:03pm #2 Hi there TigerZhao007, Welcome to Observable. I hope that you find this platform useful and the community welcoming. I empathize with the difficulties of encountering links to Observable notebooks via blocks.org examples. I too was surprised to find links to 'standard' blocks have started to point to Observable, such as with the Sankey, radial stacked bar, and Diamonds II... among others. I also often wish to use visualizations offline, in locally-hosted papers. As shown by my activity on this forum, I've encountered a lot of questions and challenges trying to move between Observable and standard / traditional JS. As a newcomer to JS in general myself, I would encourage you to stick with Observable for a time. Observable's helped me to understand how pieces of a script play together... to be able to see more clearly which elements can be separated out, which must stay together, etc. Hopefully you'll also find that your knowledge of D3 will improve more rapidly by tinkering with it in Observable. Otherwise, except for Mike's blocks, few (if any) of the bl.ocks.org examples link to Observable. I agree it would be cool of we could also see the original bl.ocks.org examples where they now link to Observable (and maybe Mike can figure out a way to do this), but barring that, there's still an expansive world of examples online... so hopefully you don't feel forced into a learning approach that doesn't fit you. Sorry if this isn't much help. The Observable community has been really caring and helpful toward me. I encourage you to ask questions where you do have difficulties. And again - welcome! 8 Likes TigerZhao007 May 8, 2019, 1:58am #3 Dear aaronkyle, Thanks so much for your reply. You not only answered my question, but also expressed exactly what i want to say. Thanks again. And yes, I am a newcomer to JS and my major is not CS or Programmer. So it is a little bit difficult to learn D3 and JS. And it turned out a lot D3 examples are linked to Observable. I was like "What the f***", confused and helpless. Thanks for your encouragement, I would stick with Observable for a while and try to understand. 4 Likes bumbeishvili May 13, 2019, 8:10am #4 I think you'll learn d3 faster using observable, than other online sandbox environments out there 9 Likes shastabolicious May 13, 2019, 5:07pm #5 It's important to realize that Observable is just javascript. It's not magic, it just adds reactivity to the language. I don't think the canonical examples of D3 figures here really exploit Observable-specific features very heavily. But if you really want vanilla-only D3 instruction, there's a lot out there. I'd recommend Interactive Data Visualization for the Web by Scott Murray, which has a free online edition. 4 Likes Fil June 13, 2019, 8:48am #6 Hello! As we've been creating more D3 documentation and examples on observable (and more is coming...), I agree we have to be careful about this issue. First, note that there is a lot of fantastic learning material out there -- in very different forms (blocks, codepens, independent web pages, etc) -- and a lot of them are linked from D3's gallery and READMEs. But many authors are moving to Observable and creating exciting new stuff (testimony to how useful and productive the system is), so it's unavoidable that more links will be made with these new examples. Strictly speaking about the series of examples at https:// observablehq.com/@d3 that are linked to from the API documentation: Ideally, one should be able to read them statically (as if in a book), and copy-paste to a web page or a node script without needing too many adaptations. In general, we're trying to avoid Observable's facilities, and prefer e.g. d3.create("svg").attr("width", width).attr("height", height).node() over DOM.svg(width, height) so that the code works almost immediately in the browser or in node. However, sometimes it would add too much complexity not to use them: -- viewof t = slider() might help people mess around with the values more than an editable cell with t = 300. The primary goal is to help people understand what the documented functions do. -- asynchronous loading of data in its own cell is much simpler & easier to understand than promises and callbacks -- using the built-in width to make the notebook responsive -- etc. A separate issue is that the code in observable is fragmented into independent cells, which makes it difficult to copy / paste all in one swoop. Again, it helps to understand when you're reading it, but gives you more work when you just want to reuse it. I have no good solution for this at the moment. Maybe a tool, or a tutorial, could help with the necessary changes -- things like replacing require by