I want to thank everyone for taking the time to participate in this discussion, whether articulating the source of their frustrations, returning to share new knowledge gained or contributing solutions and perspectives.
We are now closing this thread for further discussion.
The thread has become very long and deserves both a summary and an official response. I hope that the following adds clarity and contributes to productive discussion in future (more specific) threads.
As both an Observable employee and as a long-time member and organizer of the D3 community I’d like to reflect on what I’ve heard from this thread and share some official responses.
First, I want to begin by answering the original question, it is ok. D3 is a lot to learn, it has a huge surface area, it already requires you to learn JavaScript as well as browser standard technologies like DOM and networking. D3 also has a large global community with many generous contributors sharing their knowledge and experience for almost 10 years, so if you’re new to data visualization development you aren’t alone.
Clarifying the relationship between D3 and Observable
A number of concerns seem to stem from the way people arrive at Observable, namely being redirected from a google search or d3 block and landing in a new and unfamiliar environment. Here are a few statements I’ve extracted from the various posts:
- I go to the official D3js webpage, it points me to observable. No where is it clear that Observable and D3js are in fact completely separate entitites
- I am not given any alternative when I come here from the d3 site
- I would like to have a usable and up-to-date documentation of the visualization library I use
- 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
- all of d3 documentation is in Observable
It is true that there is no clear map of what D3 is and where you can go to learn about it. It is also true that all of D3’s API documentation lives on GitHub, that there are dozens of books and hundreds of tutorials written by community members outside of Observable.
As part of my job at Observable I’m helping to organize a community-lead effort to map out all of the resources for learning D3 culminating in a redesign of the d3js.org homepage. The community and it’s learning resources have grown up organically around the library over the years, with many mature sub-communities. For example as React, Vue and Svelte have grown in popularity people have made numerous tutorials, books and examples around integrating them with D3. As we’ve heard here, people come from all kinds of backgrounds to D3, with all kinds of different goals. Creating a comprehensive map to guide people to where they want to go will hopefully alleviate a large amount of the frustration for those new to the space.
Clarifying the future of official D3 examples
Closely related to documentation and learning resources are the D3 examples, and they demand special consideration.
There are over 400 official D3 examples maintained largely by Mike Bostock and Philippe Rivière. There are also 40,000+ blocks created and shared by the D3 community over the last 10 years. In more ways than one, Mike has lead by example and the community has followed. This brings us to a question raised numerous times in this thread:
- Why can’t I have the old blocks & new examples to reference and compare?
The answer is simple: it takes too much work. Mike’s vision for Observable comes in part from almost a decade of making data visualization examples! As someone who’s tried to make it easier to make examples, I can wholeheartedly say that Observable is a better way to do it. We will absolutely not stop anyone from translating or making examples elsewhere, however we want to make it clear that bl.ocks.org will continue in maintenance mode but will not be updated.
Clarifying how to use work done on Observable outside Observable
Another common desire expressed in this thread is some variation of:
- I want to copy paste code out of Observable but its hard / tedious / confusing
Copy-pasting code can mean very different things in different situations. I believe the source of frustration for many here is the desire to bring unfamiliar code into a familiar environment and tinker with it there. To that end, several community members have provided tutorials and examples for doing just that:
- Convert observable code to normal Javascript / David B. / Observable
- Observable vs Regular Flavor Javascript / Carlos Sandoval Olascoaga / Observable
- Learning from D3 in Action - in Observable / Tom MacWright / Observable
As others have pointed out, Observable is actually designed to help you understand the concepts and techniques central to working and thinking with data. We admittedly have some ground to cover to flatten the learning curve even further, and it is at the core of our team’s focus to do so. Since this thread started we have published new Tutorials and Documentation to help with everything from starting out with Observable to embedding or exporting your work into other environments.
Conclusion
I hope these responses give some clarity around the ways both the D3 community and Observable as a team plan to improve the overall data visualization ecosystem. It’s very encouraging to see the contributions from everyone here and I hope you’ll reach out to me with any further concerns.