TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

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

155 点作者 throwawaybutwhy将近 4 年前

28 条评论

gjm11将近 4 年前
It seems as if everyone in that thread is too polite to make what seems to me to be the obvious comment:<p>This all seems like exactly the behaviour you would expect if having D3 users is <i>not profitable</i> and having Observable users is <i>profitable</i>. This would explain why the Observable team&#x27;s explanations don&#x27;t entirely make sense: the <i>real</i> explanation is &quot;we are making things worse for you because we hope to make money by doing so&quot;. It would explain why they&#x27;re unmoved by users&#x27; complaints that something allegedly meant to make things easier for them is making them harder: the <i>real</i> goal is profit, not making things easier.<p>On the other hand, (1) using Observable is free (at present, at least), and (2) in other respects mbostock has always seemed genuinely interested in providing good things for everyone to use. So I <i>hope</i> the cynical view in the previous paragraph is wrong. But it does seem like it explains what&#x27;s happening better than &quot;we just want to make things better for everyone, and Observable is so awesome we can&#x27;t help using it for everything&quot; which is pretty much the official line.
评论 #27493698 未加载
评论 #27496274 未加载
评论 #27493616 未加载
评论 #27493286 未加载
fouronnes3将近 4 年前
I&#x27;ve had the goal to learn modern JS and D3 for a few years now. And I struggled with finding a good ressource as well.<p>Over the past year I&#x27;ve done it finally, and I can recommend the book &quot;D3 for the impatient&quot;. It&#x27;s written for D3 v4.x, but I wanted to write my project with D3 v6, obviously. Luckily, just going for it and googling the error message when I got the inevitable &quot;foo is not a function&quot; was easy enough. Now I&#x27;m confident enough with it that just reading the github readme of a new D3 module is usually enough to get me going.<p>But the API has quite a bit rough edges (like the difference between select and selectAll, the selection.merge(enter) pattern), that a good book is really nice. Especially since online tutorials are a complete mess - because of Observable non-sense and severe API rotting.
评论 #27492837 未加载
评论 #27491798 未加载
评论 #27496637 未加载
kesor将近 4 年前
I don&#x27;t get what the author is complaining about, D3 has great documentation on GitHub; With or without Observable the way to use D3 is pretty much the same.<p>Yes, the best tutorials for D3 are on Observable; But translating these to pure JavaScript is trivial for anyone who knows some basic javascript syntax.<p>Those who have zero experience with using JavaScript in the first place should first learn the language, and only then try and attempt at using the more advanced libraries such as D3. It is going to be a real pain to try and get anything done with D3 without understanding some basic JavaScript syntax first.
评论 #27493458 未加载
borrowcheckfml将近 4 年前
I was in this exact same situation a year ago. Learning d3 had always been on my list of things to do but I never got around to it. When I finally found some time I realized that all their resources and tutorials had moved to this heavy interactive thing called &quot;observable&quot; - I was furious because I spent hours trying to find old tutorials. Maybe Observable is a good product for some use cases, but I don&#x27;t want to deal with it. I want to have plain HTML with plain JS so that I can actually <i>understand</i> what&#x27;s going on. No layers upon layers of magic. Eventually I gave up.<p>We need to stop forcing all this unnecessary complexity upon users.
评论 #27494144 未加载
评论 #27492471 未加载
评论 #27492470 未加载
评论 #27508410 未加载
评论 #27495587 未加载
cube2222将近 4 年前
If anyone is having this problem, just use the tutorial series&#x27; on Observable. They really are great and provide a nice environment for learning. Later, when you want to productionize it or create self-contained applications, nothing&#x27;s stopping you. A quick google will show you how to build your D3 chart as a React component. You&#x27;re not learning any non-transferable skills by learning on Observable.<p>If I&#x27;m already writing a comment, I&#x27;d like to say that D3 is so awesome and magical! It&#x27;s surprisingly easy to create nice-looking animated visualizations.<p>After going through the Observable tutorials for fun I quickly found ways to use it at my employer[0] and create various useful and well-looking animations, you can see one here: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;N9haFA_MwdM" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;N9haFA_MwdM</a><p>FWIW the tutorial series I used myself was <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@sxywu&#x2F;introduction-to-d3-js" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@sxywu&#x2F;introduction-to-d...</a> , I recommend it very much.<p>[0]:<a href="https:&#x2F;&#x2F;spacelift.io" rel="nofollow">https:&#x2F;&#x2F;spacelift.io</a>
评论 #27497453 未加载
ptr2voidStar将近 4 年前
I&#x27;m glad to hear that others are equally frustrated with the tight coupling between D3 and Observable.<p>For me, it just wasn&#x27;t worth the effort of learning D3 AND Observable (especially, not being particularly fond of JS to start with) - in the end, it was too much, and I ended up using a simpler third party javascript charting library instead - which was a real shame, because I really loved what D3 could achieve.<p>Mike Bostock is clearly a genius, but I think his brain is wired differently from the rest of us mere mortals - and unfortunately, he seems to have the knack of making simple things terribly complicated.
评论 #27492789 未加载
评论 #27493927 未加载
tlarkworthy将近 4 年前
ObservableHQ has the tightest feedback loops because of the reactive runtime. It&#x27;s a better way to program visual things. I prefer non-sequentially executing programs. It&#x27;s better.<p>Code changes are local operations, so your running program state is generally preserved . This is an amazing boost for iterative development. This is Smalltalk level productivity boosts<p>Sucks if you want to do something legacy but I want to move forward with programming and breaking the sequential execution model is the right step IMHO.
dmitriid将近 4 年前
I find @mbstock&#x27;s answer slightly disheartening: <a href="https:&#x2F;&#x2F;talk.observablehq.com&#x2F;t&#x2F;i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok&#x2F;1957&#x2F;16" rel="nofollow">https:&#x2F;&#x2F;talk.observablehq.com&#x2F;t&#x2F;i-want-to-learn-d3-i-don-t-w...</a><p>Instead of &quot;we should make this more approachable without buying into Observable&quot; it&#x27;s &quot;we should spend effort on helping you learn Observable and explaining why you need it&quot;.<p>@sanjalot&#x27;s final comment is somewhat better <a href="https:&#x2F;&#x2F;talk.observablehq.com&#x2F;t&#x2F;i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok&#x2F;1957&#x2F;63" rel="nofollow">https:&#x2F;&#x2F;talk.observablehq.com&#x2F;t&#x2F;i-want-to-learn-d3-i-don-t-w...</a><p>But instead of links in a forum somewhere to someone else&#x27;s Observable explaining how to turn Observable&#x27;s into plain JS code, this info should be front and center on the first page of official docs.
评论 #27494393 未加载
wirthjason将近 4 年前
How much of it this problem is the difference between I want to understand this code vs I want to copy-paste some code to get my plot&#x2F;chart done?<p>This problem would exist with productionizing any notebook style code. E.g. Jupyter notebooks.
评论 #27493573 未加载
DataCrayon将近 4 年前
Mentioned on an earlier thread, but this is part of the reason I started my book &quot;Visualisation with D3.js&quot;[1]... it&#x27;s early access and I&#x27;m trying to find more time to work on it. It&#x27;s entirely separate from Observable, and it&#x27;s my way of formalising my D3.js learning journey whilst producing something I can refer to in future.<p>[1] <a href="https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;" rel="nofollow">https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;</a>
kowlo将近 4 年前
As others have pointed out: it&#x27;s simply because Observable is where they will eventually make money. Both belong to the same author, so their coupling has incentives.<p>If you could entirely self-host the whole Observable experience it wouldn&#x27;t be so bad. But you can&#x27;t.
stolenmerch将近 4 年前
It&#x27;s such a small thing but I can&#x27;t stand having the output of a cell evaluate above the cell. I get that it&#x27;s part of the Observable reactive environment, but it breaks what we&#x27;re used to with the command line and other notebook applications.
评论 #27498286 未加载
评论 #27493278 未加载
throwawaybutwhy将近 4 年前
Already posted 22 days ago but did not get any traction.<p>Inspired by <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27485123" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27485123</a>
评论 #27491654 未加载
5cott0将近 4 年前
The learning curve for d3 is so steep that people are starting to confuse it for observablehq.
javierluraschi将近 4 年前
I sympathize with the comments, as a software engineer, this comment from Mike really describes my frustration with Observable&#x27;s runtime:<p>&gt; 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.<p>However, I do think many others will prefer their reactive runtime; so this is by no means a criticism to Observable, they are doing great work. They are just not targeting JS-purists and that might be the right call.<p>As a software engineer, I love D3 but don&#x27;t want to be stuck with a reactive runtime that is not vanilla JavaScript.<p>I got myself to build <a href="https:&#x2F;&#x2F;hal9.ai" rel="nofollow">https:&#x2F;&#x2F;hal9.ai</a>, an integrated environment to do data analysis based of JavaScript. Is not a D3 learning environment but you can certainly use it for that purpose. If someone is interested in providing feedback or helping with D3 examples, please do so at <a href="https:&#x2F;&#x2F;github.com&#x2F;hal9ai&#x2F;hal9ai" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hal9ai&#x2F;hal9ai</a> or shoot me an email at javier at hal9.ai
jwilber将近 4 年前
This thread is literally people complaining about the free software used to host free documentation for a free library.<p>The onus is absolutely not on anyone to improve things for you just because you find them difficult.<p>Consider how lucky you are that d3 is even documented so well to begin with.<p>Insane level of entitlement in this thread.
jojo2000将近 4 年前
I learnt d3 with &lt;script&gt; tags.
timdaub将近 4 年前
Recently I needed a simple chart for my startup. I looked online and all I could find was bloated libraries that were increasing the bundle size by many KBs. But then they also started rendering in the browser. Considering that it was possible to cache the request for a full day for all users, I wrote a small library that renders an svg on the server: <a href="https:&#x2F;&#x2F;github.com&#x2F;rugpullindex&#x2F;svg-line-chart" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rugpullindex&#x2F;svg-line-chart</a><p>Chart in action: <a href="https:&#x2F;&#x2F;rugpullindex.com" rel="nofollow">https:&#x2F;&#x2F;rugpullindex.com</a>
FormFollowsFunc将近 4 年前
I’ve figured out how to go the other way - from a JS framework to Observable. I put all the D3 code in a reusable chart [1] which can be copied and pasted into an Observable cell. And have the JS framework handle things like loading data which is modified slightly when transferred to Observable. I don’t want to be too dependent on a proprietary service but it’s nice to share your work on it occasionally.<p>[1] <a href="https:&#x2F;&#x2F;bost.ocks.org&#x2F;mike&#x2F;chart&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bost.ocks.org&#x2F;mike&#x2F;chart&#x2F;</a>
nkmnz将近 4 年前
Slightly off topic, but is anyone aware of a collection of examples or best practices for using d3 in a Vue application? I just started with d3 and I‘m not sure how to find the sweet spot regarding which DOM-operations are done by d3 and which should be handled by vue (and if that, how).
评论 #27509117 未加载
protoduction将近 4 年前
As someone building an in-browser notebook I have a lot of opinions on notebook environments. Notebooks serve different purposes, sometimes the notebook itself is the end-goal because the author is creating an interactive tutorial or explaining a complex concept with a bunch of visualizations. Observable is a fantastic tool for that, and the kind-of-Javascript reactive programming system it is built on is a great fit for that.<p>Outside of that use-case, I think notebooks are great for the first 20% of the effort that gets 80% of the work done. If it turns out one also needs to do the other 80% of the effort to get the last 20%, it is time to &quot;graduate&quot; away from a notebook. For instance if I am participating in a Kaggle machine learning competition I may train my first models in a Jupyter notebook for quick iteration on ideas, but when I settle onto a more rigid pipeline and infra, I will move to plain Python files that I can test and collaborate on.<p>This &quot;graduation&quot; from notebook to the &quot;production&#x2F;serious&quot; environment should be straightforward, which means there shouldn&#x27;t be too much magic in the notebook without me opting into it. Documentation in my eyes is not so different, I should be able to copy the examples easily into my JS project without knowing specifics of Observable and adapt it to my problem. Saying &quot;don&#x27;t be lazy and just learn Observable&quot;, or &quot;you must learn D3 itself properly to be able to use it anyway&quot; is not helpful. Observable being a closed, walled garden doesn&#x27;t help: not being able to author notebooks without using their closed source editor is a liability that I can totally understand makes it a non-starter for some companies and individuals.<p>I think it&#x27;s ok to plug my own project: It&#x27;s called Starboard [1] and is truly open source [2]. It&#x27;s built on different principles: it&#x27;s hackable, extendable, embeddable, shareable, and easy to check into git (i.e. I try to take what makes the web so great and put that in a notebook environment). You write vanilla JS&#x2F;ES&#x2F;Python&#x2F;HTML&#x2F;CSS, but you can also import your own more advanced cell types. Here&#x27;s an example which actually introduces an Observable cell type [3] which is built upon the Observable runtime (which is open source) and an unofficial compiler package [4]. I would be happy for the D3 examples to be expressed in these really-close-to-vanilla JS notebooks, but I doubt I can convince the maintainers to do so.<p>[1]: <a href="https:&#x2F;&#x2F;starboard.gg" rel="nofollow">https:&#x2F;&#x2F;starboard.gg</a><p>[2]: <a href="https:&#x2F;&#x2F;github.com&#x2F;gzuidhof&#x2F;starboard-notebook" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gzuidhof&#x2F;starboard-notebook</a><p>[3]: <a href="https:&#x2F;&#x2F;starboard.gg&#x2F;gz&#x2F;open-source-observablehq-nfwK2VA" rel="nofollow">https:&#x2F;&#x2F;starboard.gg&#x2F;gz&#x2F;open-source-observablehq-nfwK2VA</a><p>[4]: <a href="https:&#x2F;&#x2F;github.com&#x2F;asg017&#x2F;unofficial-observablehq-compiler" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;asg017&#x2F;unofficial-observablehq-compiler</a>
hashkb将近 4 年前
The question is about lock-in and choice. You can see on the thread the Observable authors seem almost proud of the fact that their tooling is so good that it couldn&#x27;t possibly ever be made to be more compatible with everyone else&#x27;s way of working. In the rapidly moving JS world, this is arrogant and shows poor foresight.<p>I love learning new tools, but this notebook craze is alarming. When I pay a python contractor I have to specify &quot;a runnable script&quot; or I get a jupyter notebook as a deliverable. I hate to think D3 is going the same way. It&#x27;s no good to make your tool so hard that it needs a dedicated, incompatible (and morally superior) development environment.
bboreham将近 4 年前
I had this exact problem myself two weeks back. All the pre-Observable examples I found were for D3 v4, while D3 is now at v6.<p>Some great resources in the thread, which I hadn’t found by Googling. Thanks!
评论 #27491813 未加载
hungryforcodes将近 4 年前
This may sound like a weird question -- but is there any reason not to use an older version if you feel comfortable with it?
da39a3ee将近 4 年前
Here&#x27;s what&#x27;s really going on, and what I think the observable team should have said:<p>d3 was born ~10 years ago, before the rise of vue and react. Today, the community is split into two groups that we shall call &quot;data viz&quot; and &quot;software engineers&quot;. The crux of that whole comment thread is that large portions of the d3 API have now been superseded by React&#x2F;Vue&#x2F;Svelte, for the software engineering crowd.<p>You can even see Mike Bostock and the Observable team in places recommending the book and blog post of Amelia Wattenberger. But look at her blog post on using d3 with react: <a href="https:&#x2F;&#x2F;wattenberger.com&#x2F;blog&#x2F;react-and-d3" rel="nofollow">https:&#x2F;&#x2F;wattenberger.com&#x2F;blog&#x2F;react-and-d3</a> If you read that you&#x27;ll see that the Tl:DR is basically<p>&gt; Don&#x27;t use d3 any longer for anything other than the axis objects: use react&#x2F;vue to build and update the SVG elements.<p>I suspect that Mike Bostock&#x27;s (radical) decision to move d3 entirely into the Observable world was a completely rational decision explicitly addressing the fact that he knows that, when it comes to building and updating the DOM, d3 has now been replaced by component-based libraries with HTML-like JSX syntax, i.e. Vue&#x2F;React etc. At least for software engineers; there is still a community of dataviz people with their center of gravity more in academia and data science who don&#x27;t use Vue&#x2F;React and for whom it makes sense to use the entire d3 API (DOM updates as well as utilities like axis functions etc)<p>I think that it would help if the Observable team just stood up and said that explicitly. Maybe even say on the d3 README:<p>&gt; If you are a software engineer, bear in mind that things have moved on from 8 years ago and that you may in fact be best served by using utilities from d3 but using React or Vue for your DOM building.<p>Also, I think that the Observable team did themselves no favours by their slightly evangelical insistance on encouraging people to try Observable because they&#x27;ll find that they like it once they try. I am a software engineer. I am open minded. I have tried Jupyter many times and I have tried Observable. I cannot use those tools for one simple reason: I use git to navigate my code state. If I am debugging, I make small commits, and use stash and revert and cherry-pick etc to experiment with different code states. I think in git and I work in git. Observable (and Jupyter) are completely antithetical to Git. So I also think that the Observable team would do better to say:<p>&gt; Look. If you&#x27;re a professional software engineer who is used to working in a sophiisticated fashion with version control, then honestly this stuff might not be your cup of tea. I&#x27;m sure you can see what we&#x27;re trying to do, and that it&#x27;s really cool, but we understand if you just want to enter lines of code into a git repo using your text editor. And for you, here&#x27;s a quick summary&#x2F;pointer to docs on how to use d3 in that way, with Vue&#x2F;React, and some pointers on how to make use of the Observable docs for non-Observable users.<p>Mike Bostock if there&#x27;s any chance you read this, d3 is one of the most impressive open source libraries I&#x27;ve known and I have been a fan of yours for years! Observable looks amazing and very forward-thinking too and I think I understand that it&#x27;s aiming to democratize javascript visualization. I hope the above comments came across as constructive. (It would be awesome to have more pointers in the future on ways to make use of portions of the d3 API with other DOM-building APIs such as Vue&#x2F;React.)
jordache将近 4 年前
what the hell is observable? tried to figure it out via their site, it&#x27;s vague as hell
评论 #27493169 未加载
d3problem将近 4 年前
Hopefully I&#x27;m not completely out of place asking this here, but does anyone have any suggestions for why a d3 animation inside React might be a bit janky? Looks smooth as butter on my old computer, but for some reason on my better performing computer it looks janky!
m_rpn将近 4 年前
I understand the will to bring people to your new project(Observable) using something succesful that you already made(D3), but i think this move will be detrimental to both projects, since everything fundamental for the newcomers is being moved to Observable (Github docs, examples, ...), making the process of learning and integrating the project way more difficult and full of pointless time wasting garbage. This is the exact opposite of open source culture, as an old contributor and advocate of D3 i&#x27;m quite pissed. At the same time the big contributors have obvioulsy the right to steer the project in the direction they deem best.