8 ms·
D3 6.0
- ncmncm 6y agoJust won't render, at all, for me. Lotta "Notebook not responding. There may be an infinite loop that has crashed this notebook, or a notebook open in another tab.". So why should something happening in another tab be allowed to mess anything up? (Not that there is anything.) No, sir, I didn't like it.
- ricardonunez 6y agoI use d3 in my map generator app. I’ll look into this update to add and rewrite some of the features. Labels have been an issue lingering around for too long.
- romanr 6y agoIt seems like a very versatile framework, but nowhere I can find any recipe or guide of a very simple case - how to combine different types of charts in one? Like simple line chart overlaying the bar chart. It seems to be only possible by rendering them as completely separate charts and then overlaying one on top of each other in DOM? Which seems hacky.
- bobbylarrybobby 6y agoCan’t you just add both the bars and the path to the SVG you’re rendering to? (I assume it’s the same for a canvas context, although I’ve never used one with d3.)
- fourthark 6y agoD3 is pretty low level - geometry and binding data to create DOM elements. It’s not really a charting library - look for libraries built on top of it for abstractions like “composite chart” or whatever. So yeah at the D3 level you would just draw one chart and then draw another chart on top, probably each wrapped in a <g> if you’re using SVG. Maybe they’d share X/Y scales.
- mbostock 6y agoHere's an example: https://observablehq.com/@d3/bar-line-chart https://observablehq.com/@d3/bar-line-chart
- dsdeur 6y agoLook into scales, you can put whatever you want in the same chart by positioning it using the same scales. https://github.com/d3/d3-scale https://github.com/d3/d3-scale You can use that same scale to draw just one set of axis. Need multiple Y axis? Create two Y scales with the same range, one X scale. Also I think it's good to understand that "chart" is not really a concept in D3. You just get all the elements of a chart which is why it is so awesome as you get to compose your own chart just the way you like it!
- vosper 6y agoFrom my experience, if you want standard charting (bar, line, pie, etc...) you’re better off using either a different library like Highcharts, or something higher-level that’s built on top of D3
- renewiltord 6y agoWhich wrapper library around d3 that's declarative would people recommend? I'm thinking something where I can swap the state in React between renders and it updates intelligently with animations etc.
- iaml 6y agoJust use d3 directly in react, rendering svg is ok for most cases. You would want to ignore all the dom manipulation parts of d3, but otherwise they work well together.
- yoran 6y agoIndeed. When you Google for "React/Vue/Ember D3", the tutorials always use the DOM manipulation layer of D3. But every front-end framework already comes with a great reactive system to ensure the DOM is in sync with the data. And those are a lot easier to use than D3's in my opinion. The only tutorial that doesn't do this and that "gets" it is one by Amelia Wattenberger: https://wattenberger.com/blog/react-and-d3 https://wattenberger.com/blog/react-and-d3. I recommend this tutorial to understand how to use D3 in React.
- canada_dry 6y agoI love D3, have been using it on and off for years. The biggest pain point I have coming back to it - esp after a release or two - are the scope of the changes!! Many methods and properties have changed thus most of the examples, blog posts, and stackoverflow assistance are outdated so it generally takes much longer than I had hoped - but the results are always worth it.
- jedbrown 6y agoFor those looking for higher level interfaces for interactive visualization via D3, check out Vega/Vega-Lite [1] and Altair [2] (a Python library based on Vega-Lite). [1] https://vega.github.io/ https://vega.github.io/ [2] https://altair-viz.github.io/ https://altair-viz.github.io/ [3] https://vega.github.io/vega/about/vega-and-d3/ https://vega.github.io/vega/about/vega-and-d3/
- domoritz 6y agoD3 started out as an academic project and Vega/Vega-Lite come from the same lab. Also, while Vega does not generate D3 code (Vega is a declarative visualization language and reactive runtime), it uses the D3 libraries internally and is heavily inspired by some of the core principles (e.g. data join).
- kqr 6y agoOne of the things I really like about D3 is how there's nothing it won't do, precisely because it's a lower level interface. With many higher level interfaces, things go great until I eventually run into a situation where I would like to do a tiny tweak that would improve readability a lot, and it turns out the higher level interface does not support that, so I'm out of luck. That said, I haven't tried Vega. What are your experiences in terms of that problem with Vega?
- gampleman 6y agoI think they serve different use cases. I love Vega-lite for exploratory analysis and for quick prototyping. You can get fantastically complex visualisations very quickly with it. But for building "production" visualisations, I think the low level approach is better: you'll get much smaller bundle sizes, you have much more control over the final look and that control tends to be expressed "naturally" rather than in convoluted configuration.
- awake 6y agoI would not even touch vega, it’s the engine vega lite is built on. Vega lite is a declarative json format for representing charts. The spec is very well thought out and you can rapidly iterate on prototypes. Altair is a python wrapper for vega lite
- yoran 6y agoI love D3. I tried plenty of other higher level libraries but very quickly you run into customization issues. So for Backtest (https://backtest.curvo.eu/ https://backtest.curvo.eu/), I moved all the charts to D3. It's a bit lower level and was more work to set up initially, but now I'm in full control and can easily extend any chart. D3 is a great piece of software!
- RocketSyntax 6y agoexciting to see event listeners drag, zoom. they make data come alive
- in9 6y agoFor me, a data scientist, learning D3 feels so far off since the background needed to learn it seems vastly connected with some notion of frontend concepts, which for me are very foreign. And honestly, I don't care much about UI programming. Is this impression correct? Is there a way around this? A learning source that covers both?
- vmception 6y agoI just wish all the cool animated examples of D3 were updated to use the latest version of the library. Mike had such cool and colorful ideas for the web 8 years ago which still wow supporters of any project. But I have had to spend significant time and money updating things to work with Vue or React while simultaneously trying to figure out what changed across versions of D3 while simultaneously trying to figure out what the inherited version of D3 was even doing. Mike seems to have opted for more practical designs in the latter half of the decade in his exploration of data visualizations. While other contributors lack inspiration of using this as an art form.
- mbostock 6y agoWe’ve updated hundreds of examples to the latest version. Here’s the gallery: https://observablehq.com/@d3/gallery https://observablehq.com/@d3/gallery We’re still in the process of republishing some of them and were hoping to announce tomorrow but it looks like someone noticed and here we are on HN.
- oatmealsnap 6y agoWow, thank you for sharing! I'm guessing those are all D3 5.x?
- mbostock 6y agoNearly all should be D3 6.0 now but there may be a few stragglers we haven’t republished yet.
- vmception 6y agoGood to see you here today, and glad to know that. Why ES2015 specifically? Like where are the compatibility issues or is this a necessary upgrade path for older versions and then you’ll phase into es6 or leapfrog that to something even newer? Or if ES2015 is “good enough”? Javascript can be a hot mess, there isn’t always a need to keep up and the troubles arise when you try to.
- Waterluvian 6y agoDoes the full adoption of ES6 modules result in trivial tree shaking? I’ve found that’s one of my favourite effects of libraries adopting the newer module styles Edit: it’s modular but the modules I peeked at have sideEffects set and look pretty clean. I’m excited to see what I can do and keep tiny bundles! (I’m obsessed lately with making neat gadgets that load instantly)
- mbostock 6y agoD3 has been written in ES modules since the beginning of 2016 when we adopted Rollup for bundling. The difference now is that we’re adopting ES2015 language features that can’t be transpiled (namely for-of). We didn’t get around to it for 6.0 (mostly for fear of breaking backwards-compatibility in Node), but we plan on adopting type: "module" for Node in the nearish future. In the meantime you can consume D3 as an ES module using Skypack if desired. https://cdn.skypack.dev/d3 https://cdn.skypack.dev/d3
- jakecopp 6y agoIs anybody else annoyed by how tightly coupled D3.js is with https://observablehq.com https://observablehq.com? It's basically impossible to get started with D3 without using the Observable online playground, I find it so frustrating.
- helaoban 6y agoWhat’s stopping you from just pulling d3 from a cdn or npm and just hacking away like any js lib?
- deleted 6y ago[deleted]
- deleted 6y ago[deleted]
- contrast 6y agoD3 was around for years before Observable, there’s plenty of books and tutorials around that don’t use Observable, it’s an open source library that doesn’t need Observable, and there must be plenty of people like me using D3 in production code today that didn’t learn it using Observable. It simply is not “tightly coupled”. It is very straightforward to get started without using Observable. Observable does exist, it is related to D3. It is “loosely coupled” in metaphorical terms because there are no dependencies in the code. It seems like a useful tool. Is the nature of your complaint that the team provided a learning environment alongside D3? That they recommend their learning & collaboration platform as well as their vis library? These strike me as good things to do. I’ve certainly thought of other people’s Observables as valuable resources.
- curran_k 6y agoTry https://vizhub.com/ https://vizhub.com/
- alphachloride 6y agoConversely, I just use a code editor, a web browser, and the refresh button. I've never felt the need to use something like ObservableHQ, before and after it came into being.
- jwilber 6y agoAwesome, I’m always shocked by how much D3 has to offer and the quality amount of time + effort Mike Bostock continues to invest into the project. On a different note, hoping the CORS issued I received when using a v6 version d3-fetch with local files got updated
- mbostock 6y agoThanks. Philippe Rivière has been helping substantially and making amazing contributions! If you think you’ve found a bug please file an issue on GitHub. (That said, d3-fetch is just a trivial wrapper on the native Fetch API, so any CORS error there is probably expected.)
- daemonk 6y agoAwesome. I am a huge fan of D3. I am still using v4. But I will definitely spend some time migrating on my next refactoring.
- mbostock 6y agoThe changes between v4 and v5 are tiny (adopting promises in d3-fetch instead of callbacks). The changes between v5 and v6 are also largely backwards-compatible, so hopefully your upgrade will be painless. A migration guide is here: https://observablehq.com/d/f91cccf0cad5e9cb https://observablehq.com/d/f91cccf0cad5e9cb
- ldd 6y agoOh, D3.js is awesome, and all the cool visualizations that I saw over the years makes me glad it exists. Let's share our creations here! Here's mine: a tech tree using D3.js made many years ago: https://github.com/ldd/tech-tree-js https://github.com/ldd/tech-tree-js
- d0m 6y agoWhat's the best resource(s) to learn D3 for an experienced dev? I find most books/tutorials to be overly verbose.
- edoceo 6y agoOfficial docs and examples with an objective of simple visualization you want to build. You can get through simple timeseries and bar charts with it in 4h. Worked for me, N=1
- mbostock 6y agoI published a new tutorial for D3 earlier this year: https://observablehq.com/@d3/learn-d3 https://observablehq.com/@d3/learn-d3
- cjv 6y agoI've always been curious on what Mike would do if he could completely rewrite D3. I saw some experiments with a declarative API [0] which seems really interesting. It seems like the main learning curve for learning D3 is deeply understanding the underlying web technologies (looking at you SVG), so could something D3-like have a more abstracted renderer? Anyway, once you use Observable - Jupyter notebooks are forever ruined, which is the highest praise I can give. Thanks for all your hard work Mike! [0] https://observablehq.com/@unkleho/introducing-d3-render-truly-declarative-and-reusable-d3 https://observablehq.com/@unkleho/introducing-d3-render-trul...
- anchpop 6y agoWow, that declarative API seems really cool. Exactly what I've been looking for recently. Thanks for sharing it!
- domoritz 6y agoCheck out Vega/Vega-Lite (https://vega.github.io/ https://vega.github.io/) for a fully declarative visualization grammar (including interactions).
- timwis 6y agoActually you can use d3's maths functions standalone and then use react or vue's declarative templating to render. It's not too dissimilar from what you'd have to know using d3 DSL directly. Here's an example: https://github.com/timwis/vizwit/blob/v2/src/components/charts/Bar.vue https://github.com/timwis/vizwit/blob/v2/src/components/char...
- rhodysurf 6y agoThis is what I do too for my site and app. Its soooo flexible
- _spoonman 6y agoWhile learning D3 I was stuck on a simple bar chart problem. Just could not figure it out. Asked on the D3 slack. None other than Mike himself took the time to look at my code and point out the error. Then he gave me some general tips that he noticed. The guy is so generous with his time and expertise and I admire him a great deal.
- quda 6y agoNo words about performance improvement on v6 ?
- tylerscott 6y agoAs a former Protovis user whose mouth hit the floor the day he discovered D3, I never cease to be amazed at the quality of work Mike does. Thanks, Mike!
- mbostock 6y agoThank you!
- motohagiography 6y agoSankey diagrams are still blowing enterprise minds in 2020. I don't know what award it would be, but it should be important, and the author should get it.
- FPGAhacker 6y agoI love sankey diagrams.
- jeffbee 6y agoDidn't the inventor of flow diagrams die in the 19th century?
- enjalot 6y agoWe are hosting a d3 meetup online Thursday 8/27 (tomorrow) more info here: http://meetu.ps/e/Jh8GY/1kwFr/d http://meetu.ps/e/Jh8GY/1kwFr/d Mike Bostock will be doing an AMA at the end if you have burning d3v6 questions (though you can expect some more documentation on upgrading to come very soon!) I'll also plug our other two speakers, Mike Freeman and Amelia Wattenberger who are amazing d3 educators & authors. It's exciting that this is the first big online d3 meetup since the pandemic put a stop to in-person events, and as a consequence of being online anyone can participate!
- azemetre 6y agooh man, I'd love to attend but that is such an awkward time for me. Will the talk be recorded and hosted anywhere?
- visnup 6y agoyup, our meetup recordings end up on YouTube at https://www.youtube.com/observablehq https://www.youtube.com/observablehq
- lbuchman 6y agoYes, the recording will be posted to the Observable to YouTube channel after the event. https://www.youtube.com/channel/UCCD2tAKN32ya7V639gkbWhg https://www.youtube.com/channel/UCCD2tAKN32ya7V639gkbWhg
- atonse 6y agoThe first few days I used d3, I really struggled. And I got very frustrated. I simply couldn’t understand why the library was so popular. But I powered through because people whose thought patterns I respected, swore by it. Then I read some blog post somewhere. I wish I could give that author the credit they deserved. It explained the fundamental building blocks of d3, the selection APIs, etc with such clarity. Once the light bulb went off, I was able to quickly iterate on some pretty awesome totally custom stuff quickly and have sung d3’s praises ever since (it’s been 5 years).
- wattenberger 6y agoSounds similar to this guide I put together - understanding how the different modules work together and who is responsible for what is really helpful. https://wattenberger.com/blog/d3 https://wattenberger.com/blog/d3
- swyx 6y agoi can confirm that i dreadfully wished for something like this when i muddled through the freecodecamp d3 curriculum in 2017! it was especially confusing as everyone was switching from v3 to v4 right then. also, hey :)
- summitsummit 6y agocan you share that post? im of the former camp as of right now
- infogulch 6y agoPresumably, gp has forgotten. > I wish I could give that author the credit they deserved.
- summitsummit 6y agoyes, i gathered as much. they showed enough desire to give credit and enough interest and skill in the matter that i find it hopeful they could find it again if they sought it out.
- zebraflask 6y agoI have several charts on my development list that I have been planning to use D3 for - this new release is perfect timing.