[HN Gopher] D3 7.0
___________________________________________________________________
D3 7.0
Author : cltsang
Score : 154 points
Date : 2021-06-12 15:27 UTC (7 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| spankalee wrote:
| > Adopt type: module. #3501
|
| Standard JS modules, very nice! D3 now works in all playgrounds
| and libraries even as dependencies without non-standard tooling!
|
| https://jsbin.com/ducosajehi/edit?html,output
|
| I do wish they didn't even publish UMD, that's a recipe for
| duplication if some libraries import the module and some import
| the UMD.
| kowlo wrote:
| Feels like less than a year ago that we had D3 v6!
| dang wrote:
| _D3 6.0_ - https://news.ycombinator.com/item?id=24288497 - Aug
| 2020 (86 comments)
| wongarsu wrote:
| D3 v6 was released on 27th Aug 2020, so your feeling is right.
| We seem to get a major release about every year now, compared
| to every two years before v5.
| whimsicalism wrote:
| The one critique I have of D3 is that it is becoming increasingly
| closely paired with Observable, such that when I'm searching for
| examples of how to make something in d3, I can only find
| Observable examples that require the Observable runtime in order
| to function properly.
|
| I think the examples should have a JS native version in addition
| to the Observable implementation.
| kowlo wrote:
| Indeed - I don't like the pairing with Observable. I don't like
| Observable in general because the full experience can't be
| self-hosted. However, both projects belong to Mike, and D3.js
| is free - so I can't complain.
| norswap wrote:
| Didn't they have an export function that allowed self-hosting
| something you developped on Observable? (Or is it the
| development part that you want to self-host for "full
| experience"?)
| jacobolus wrote:
| You can self-host the runtime, and use code from notebook
| cells in whatever context you like. The closed part is the
| "notebook chrome" (editor, history view, social features,
| etc.).
| DataCrayon wrote:
| That's part of the reason I started my book "Visualisation with
| D3.js"[1]... it's early access and I'm trying to find more time
| to work on it, but it's all JS native
|
| [1] https://datacrayon.com/shop/product/visualisation-with-d3/
| dimal wrote:
| What's the difference between the two? As someone who only dips
| into D3 every few years and just discovered Observable, I
| wasn't aware that they were different. I thought Observable was
| just a way of sharing D3 visualizations.
| j-pb wrote:
| Observable is like Jupyter for Javascript. A general JS
| notebook environment, with the added twist that it uses
| reactive dataflow ideas to evaluate cells in a "right" and
| deterministic order (a common footgun in Jupyter where cells
| might be reevaluated manually, resulting in unexpected
| state).
|
| D3 is a JS library for data visualisations.
|
| Both are the brainchild of Mike Bostock. That's the
| connection. :)
| tracyhenry wrote:
| https://observablehq.com/@observablehq/javascript-and-
| observ...
| j-pb wrote:
| That's a bit like complaining that there are examples on
| codepen.
|
| I'm super grateful that they provide such good documentation,
| which is second to none, in a nicely explorable environment.
| whimsicalism wrote:
| The difference is that examples in Codepen are easily
| reproducable in another environment.
|
| d3, on the other hand, has converted most of their examples
| to Observable, which requires extensive research to convert
| back to JS (in the best case) and in the worst case requires
| reverse engineering the runtime.
|
| I'm not the only one with this opinion, there are plenty of
| others who have struggled through similar issues and
| discussed it.
|
| "The process of converting an Observable notebook to
| standalone html and/or js is clearly not as simple and
| copying and pasting. The use of Observable notebooks for all
| D3 examples has made the introduction to the library much
| more challenging for this reason." [0]
|
| [0] https://stackoverflow.com/questions/53155957/convert-d3-o
| bse...
|
| [1]: https://talk.observablehq.com/t/i-want-to-
| learn-d3-i-don-t-w...
| macNchz wrote:
| Yeah I encountered this problem recently as someone who was
| once reasonably familiar with d3 and came back to it after
| several years away.
|
| I find myself wanting to start with a working example I can
| riff off of more in d3 than with many other tools I've
| used, so I totally understand the appeal of interactive
| examples in Observable but find it super frustrating and
| cumbersome when it comes to actually rolling what I'm
| working on into an existing application.
| j-pb wrote:
| I work with both D3 and Observable full time.
|
| The claim that one has to "reverse engineer the runtime" is
| simply absurd.
|
| The people that complain about D3 on observable always turn
| out to have taken neither the time to understand Observable
| nor D3 and are looking for a way to just copy paste
| something into their codebase, without understanding it,
| and without any willingness to really learn the tools they
| are using. Which would have never worked in the first
| place, because D3 is not a plotting library like vega or
| observables plot, it's a library library, building material
| from which you can build your own bespoke visualisations.
|
| Observable is in essence reevaluating the entire code with
| each "requestAnimationFrame", no fancy diffing a la react
| or other magic, if it runs in observable, it will also run
| in your code as a static thing. Copy paste the cells out of
| observable, prepend them with a "const" and you're done,
| not more work than removing and rewriting the boilerplate
| that's in every codepen.
| ronyeh wrote:
| > taken neither the time to understand Observable nor D3
| and are looking for a way to just copy paste something
| into their codebase, without understanding it, and
| without any willingness to really learn the tools they
| are using.
|
| That's how many of us learn, by dipping our toes into a
| new SDK by copying and pasting into our bare HTML/JS page
| and tweaking things to see what happens. Eventually we
| will get around to reading the full documentation.
|
| I have made d3 examples and played around with the
| toolkit since back when it was in its infancy (called
| protovis or something). It has definitely become more and
| more difficult over the years for a beginner to jump
| into.
|
| (Background: I have met Mike since I got my PhD from the
| hci/graphics lab at Stanford, but we did not overlap.)
| themulticaster wrote:
| This is my experience as well - when deciding whether to
| use a certain library or framework, I don't start reading
| the reference manual. Rather, I highly prefer looking at
| and tweaking existing examples, mostly to understand what
| the typical usage looks like and most importantly where
| the limitations lie.
|
| I feel like the last point is often overlooked by
| documentation authors: When evaluating whether to use a
| library, I'm not just interested in what it _can_ do, but
| also what it _can 't_ do! That's why I really enjoy the
| "you should use X if you want to do Y"/"you shouldn't use
| X if you want to do Z" sections present in some manuals.
| j-pb wrote:
| You make my point. What better environment to learn and
| twiddle, than a reactive, constantly reevaluating
| interactive notebook?
| hu3 wrote:
| Whatever environment each user prefers.
|
| Being softlocked into Observable is not a pro.
|
| That's like trying to force every vim user into Jetbrain
| IDEs (both are great, not trying to start a flamewar
| here).
|
| Sure an IDE will have more features (like Observable vs
| simple HTML file), but it's important to understand
| different people have different ways of doing things.
| j-pb wrote:
| We're talking about a javascript repl here, don't blow it
| out of proportion. The things transfer trivially between
| the envionments. If having a javascript repl is such a
| show stopper for learning D3 for you, maybe learn
| javascript first.
| themulticaster wrote:
| But if the example transfers trivially, why is there no
| convenient "download example project" button that offers
| an archive containing all the necessary files I need to
| run the example?
| j-pb wrote:
| There is such a button.
|
| Like I said, everyone I've seen complain so far, always
| turn out to not even want to learn basic stuff.
| duped wrote:
| I guess it depends on your goal. If your goal is to learn
| how to code a nice reactive environment like a notebook
| is great. If your goal is to learn how to take a library
| and use it in a piece of software to release to the
| world, the notebook is next to useless.
| j-pb wrote:
| If you think that the trivial differences between the two
| environments makes either of them useless to learn the
| other, franky I'll doubt you'll have the skill to learn
| D3 properly at all.
|
| Taking a dom node and hooking it into the dom is not
| magic in D3. All that obervable does is hook in any dom
| node you return for you.
| th0ma5 wrote:
| Someone should make an open source version of the Observable
| ecosystem or integrate it into Jupyter tooling better. The
| notebook format is not encrypted or anything.
| _dwt wrote:
| It's a real pain. I work with lots of "data science" types who
| are often trying to concurrently learn JavaScript and d3 -
| often with JS as their first or second programming language.
| It's difficult enough for an experienced programmer coming back
| to d3 after a few versions to pick out what's d3 vs. what's
| Observable - and very difficult to help a relative newbie
| through the process of turning what's shown in an Observable
| notebook into something that can run in an ordinary web page.
| vmception wrote:
| Even more difficult to deal with that _and_ conforming it to
| Vue /React SPAs
| terpimost wrote:
| Thank you Mike!
| nickreese wrote:
| This x1000. D3 is such a great tool. Just the
| scales/coloring/map project libraries would be impressive
| standalone. D3 is incredible.
| Vaslo wrote:
| Used this in a data viz class and I'd say it's overkill for most
| visualizations. Also very difficult to learn and frustrating to
| implement with all the "enter, exit" stuff. Excel, Tableau, etc
| so much easier and most of what you need to do visualizations in
| the corporate setting. Obviously it's excellent for very
| specialized unusual visualizations but it's rare those are really
| needed.
| mskullcap wrote:
| All the "enter, exit" stuff is what makes d3 beautiful. From a
| core handful of ideas, Mike is able to express a vast world of
| visualizations. I think it is the most amazing framework I have
| had the pleasure of using in my 30+yrs of software development.
| Ya, you could grab bar chart library and just give it data and
| get a graph out, or, you could spend a little time with d3 and
| actually learn something so powerful you can make bar charts -
| or virtually any other kind of visualization you will ever
| need. Well worth working past the frustration, imo.
| NelsonMinar wrote:
| You're comparing Paint to Photoshop.
| drewda wrote:
| If you want the polish of d3 and some of its power without all
| the complexity, try Vega Lite and related tooling:
| https://vega.github.io/vega-lite/
| HatchedLake721 wrote:
| Apples and oranges.
|
| D3 is a low level visualisation library where you write code.
|
| Excel/Tableau are business tools.
| javierluraschi wrote:
| Why can't we have both? -- I had a similar frustration and
| got to work on https://hal9.ai, you get prebuilt blocks to
| easily import/transform/visualize data, while also being able
| modify the D3/Plot sources to your hearts contempt.
| th0ma5 wrote:
| You actually don't have to use enter and exit and I agree it is
| cumbersome and unnecessary although I understand the desire for
| inband and out of band separation... https://medium.com/d3js-
| tutorials/d3-without-enter-91934575d...
| [deleted]
| azangru wrote:
| So, is d3 tree-shakeable yet? If I import { scaleLinear } from
| 'd3' in a webpack-built project, will I get only the scaleLinear
| code? As far as I remember, in v6 this will import a lot of (or
| perhaps the rest of) d3 as well.
| DataCrayon wrote:
| Great! Nice to see very few breaking changes, the Dreamcast intro
| animation still works
| https://datacrayon.com/posts/visualisation/visualisation-wit...
| mirekrusin wrote:
| Exciting to see ESM everywhere. It works so well with Observable.
| I'm trying to put live playgrounds at observable for my packages
| as part of docs [0] - just starting, nothing exciting to see
| there yet, but I think the concept of playground as part of docs
| is quite awesome.
|
| [0] https://observablehq.com/@mirek/tsql-examples
___________________________________________________________________
(page generated 2021-06-12 23:01 UTC)