7 ms·

D3 7.0

180 points by cltsang 5y ago

terpimost 5y ago
Thank you Mike!
- nickreese 5y ago
  This x1000. D3 is such a great tool. Just the scales/coloring/map project libraries would be impressive standalone. D3 is incredible.
mirekrusin 5y ago
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 https://observablehq.com/@mirek/tsql-examples
spankalee 5y ago
> 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 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 5y ago
Feels like less than a year ago that we had D3 v6!
- dang 5y ago
  D3 6.0 - https://news.ycombinator.com/item?id=24288497 https://news.ycombinator.com/item?id=24288497 - Aug 2020 (86 comments)
- wongarsu 5y ago
  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 5y ago
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.
- j-pb 5y ago
  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 5y ago
    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-observable-to-standalone-webpage-like-blocks-org https://stackoverflow.com/questions/53155957/convert-d3-obse... [1]: https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok/1957 https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-w...
    - macNchz 5y ago
      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.
DataCrayon 5y ago
Great! Nice to see very few breaking changes, the Dreamcast intro animation still works https://datacrayon.com/posts/visualisation/visualisation-with-d3/dreamcast-intro/ https://datacrayon.com/posts/visualisation/visualisation-wit...
Vaslo 5y ago
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 5y ago
  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.
- drewda 5y ago
  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/ https://vega.github.io/vega-lite/
- HatchedLake721 5y ago
  Apples and oranges. D3 is a low level visualisation library where you write code. Excel/Tableau are business tools.
  - javierluraschi 5y ago
    Why can't we have both? -- I had a similar frustration and got to work on https://hal9.ai 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 5y ago
  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-91934575d30b https://medium.com/d3js-tutorials/d3-without-enter-91934575d...
azangru 5y ago
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.
- jwilber 5y ago
  You can also just import it from d3-scale.
  - azangru 5y ago
    Yeah, I know. I am probably being unreasonable; but it's kind of nice to be able to have a single third-party dependency out of which you can pick what you need at the moment, rather than a host of small third-party dependencies. Kind of like lodash, from which you can at least import individual functions (import merge from 'lodash/merge') rather than installing all those functions as individual packages.
    - jwilber 5y ago
      I agree with you and wish that were an option, but I do think most build tools will tree shake for you nowadays.
deleted 5y ago
[deleted]

D3 7.0

180 points by cltsang 5y ago

terpimost 5y ago

Thank you Mike!

nickreese 5y ago
This x1000. D3 is such a great tool. Just the scales/coloring/map project libraries would be impressive standalone. D3 is incredible.

mirekrusin 5y ago

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 https://observablehq.com/@mirek/tsql-examples

spankalee 5y ago

> 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 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 5y ago

Feels like less than a year ago that we had D3 v6!

dang 5y ago
D3 6.0 - https://news.ycombinator.com/item?id=24288497 https://news.ycombinator.com/item?id=24288497 - Aug 2020 (86 comments)
wongarsu 5y ago
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 5y ago

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.

j-pb 5y ago
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 5y ago
  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-observable-to-standalone-webpage-like-blocks-org https://stackoverflow.com/questions/53155957/convert-d3-obse... [1]: https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok/1957 https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-w...
  - macNchz 5y ago
    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.

DataCrayon 5y ago

Great! Nice to see very few breaking changes, the Dreamcast intro animation still works https://datacrayon.com/posts/visualisation/visualisation-with-d3/dreamcast-intro/ https://datacrayon.com/posts/visualisation/visualisation-wit...

Vaslo 5y ago

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 5y ago
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.
drewda 5y ago
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/ https://vega.github.io/vega-lite/
HatchedLake721 5y ago
Apples and oranges. D3 is a low level visualisation library where you write code. Excel/Tableau are business tools.
- javierluraschi 5y ago
  Why can't we have both? -- I had a similar frustration and got to work on https://hal9.ai 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 5y ago
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-91934575d30b https://medium.com/d3js-tutorials/d3-without-enter-91934575d...

azangru 5y ago

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.

jwilber 5y ago
You can also just import it from d3-scale.
- azangru 5y ago
  Yeah, I know. I am probably being unreasonable; but it's kind of nice to be able to have a single third-party dependency out of which you can pick what you need at the moment, rather than a host of small third-party dependencies. Kind of like lodash, from which you can at least import individual functions (import merge from 'lodash/merge') rather than installing all those functions as individual packages.
  - jwilber 5y ago
    I agree with you and wish that were an option, but I do think most build tools will tree shake for you nowadays.

deleted 5y ago

[deleted]