10 ms·
Introduction to D3
- kickout 7y agoAny other libraries (that are as low of level) as d3.js? Is D3 still being used heavily in production by people's experience?
- suyash 7y agoVega lite comes to mind
- kulahan 7y agoI started a new project using it for a project I was working at my last job ~ a year or two ago. I got a few hits from recruiters interested in it once I added it to my resume. I liked it quite a bit. It's pretty fast and decently easy to use. Plus, all the examples Mike Bostock has thrown around online really helped for giving me examples of how to do various visualizations I was interested in.
- stared 7y agoI used to use D3.js as the default go-to for data. Now I start with Vue.js, and use D3.js only inside some components when I need, animations between transitions. D3.js, as someone else already noted, is "jQuery for data". And yes, it has its good parts, but the same as for jQuery) the problem is with: - mixing static HTML/SVG with generated - no modularization (every modularization is custom) For the latter, while it may not be a big deal for small projects, for bigger it sucks. For big stories, I created a game in D3.js. Modularization was... well, argument why I rewrote it a few years later to Vue.js.
- LysPJ 7y agoAm I right in thinking that you are using Vue.js to create/delete/update the DOM elements? If so, how does performance typically compare to using the usual D3 enter()/exit() etc methods for that?
- stared 7y agoI used to do performance-sensitive things in D3.js (e.g. many moving dots). For projects with Vue.js, the performance was not my concern. In any case, if needed, you can use D3.js rendering within a Vue component.
- LysPJ 7y agoThanks, that makes sense. I'm currently doing D3.js rendering within a Vue component. I suspect that my code will be cleaner if I switch to the Vue.js constructs for managing the DOM, rather than D3's enter()/exit()/update(), so even if the performance is ultimately the same, there should still be a maintainability win. It sounds like it's worth me doing a Vue implementation and running some benchmarks.
- paulgb 7y agoD3 is still a useful library for visualization even if you replace the DOM manipulation with React, Vue, Svelte, etc. I think the trend is to use D3 as a library but use a more modern framework to manage the DOM. I have a browser extension (treeverse.app) where the entire UI is D3. I probably wouldn't write it that way today, but the codebase dates back to ~2014 and it's held up fine.
- thibautg 7y agoI also mostly use d3 for its powerful helper functions nowadays: scales and axes, colors, svg path generation, geographic projections, array functions like d3.group (formerly d3.nest), csv/tsv parsing etc. I tend to leave DOM manipulation to Vue.js unless I need to animate transitions between states. I find it easier to reason about binding data to an html/svg template with Vue than to mess with d3 data joins and enter/update/exit pattern. d3 is and stays an impressive piece of work.
- LysPJ 7y agoDo you find there is any performance difference using Vue.js to do DOM manipulation rather than the D3 methods?
- thibautg 7y agoI haven't run benchmarks but I also haven't noticed a difference in performance. With Vue.js, I use computed properties + v-for in html template. With D3 I use the the enter/update/exit pattern with d3.selectAll(...).data(...).join(...). Both seem to only modify the needed DOM elements. Vue.js uses a virtual DOM while D3 attaches a __data__ property to DOM elements.
- LysPJ 7y agoThanks, that's helpful to know about how you implemented it in Vue vs D3, and that there wasn't a noticeable performance difference for your use case.
- sailfast 7y agoUsed in production? Yes. Alternatives at a low level? Hard to say - it really does allow you to do a lot at a very low level if you want BUT... - Vega Lite / Vega - HighCharts (paid) - ChartJS - Raphael (unsure if this is still used as much) - Leaflet / Turf for GIS visualizations - Server-side? PyGal? http://www.pygal.org/en/stable/ http://www.pygal.org/en/stable/ If you don't want to go so low-level there are a huge number of D3 abstractions that allow you to pick your chart and work with the data. Britecharts from EventBrite is one example of an actively maintained abstraction. http://eventbrite.github.io/britecharts/ http://eventbrite.github.io/britecharts/
- acomjean 7y agoVega is low level, but built on top of D3. https://vega.github.io/vega/about/vega-and-d3/ https://vega.github.io/vega/about/vega-and-d3/ Vega lite is what I use as my day to day web graphing driver (it exports to svg which is awesome...)
- kickout 7y agoThanks for this. Never seen HighCharts. Looks nice (pending $$$)
- inferiorhuman 7y agoHighCharts is very nice if you don't want to invest the time into honing your d3 skills.
- vosper 7y agoWe use Highcharts at work, and have for years. It's a really good library, definitely worth the money. We had a recent adventure with building new charts in Victory, but performance was not good and we came back to Highcharts and removed all our Victory code. We're still happy with that decision :)
- lmeyerov 7y agoWe end up using some of the d3 helpers, like on axis & scales, but go straight to chart libraries + custom DOM/SVG/webgl for the rest, and normal React framework for interactivity. The d3 functional helpers are still real gems and IMO under-appreciated. I think it was rewritten a few years to help expose those better (e.g., for tree shaking.) As soon as you go to react & friends, most of the d3 model does become redundant, and Yet Another Thing to burden the team. There's still a temptation to reuse beautiful d3 gallery items posted by others, but generally, they're annoying to patch up & now you must maintain them. Better to use dedicated maintained libs if that's what you want. There have been attempts to do Standard D3 Chart libs, but afaict it's a graveyard of abandonware, and I approach most efforts here with strong caution. (The trend for the last few years has been each bigco to release their own NIH framework and then abandon as the authors leave, and little incentive for D3 design consultants to maintain old projects.)
- simonsarris 7y agoHow low level? I make GoJS, a powerful diagramming library (the focus is more on diagrams and interactivity, than data). It's low level in that you can make a lot of different things with it, but higher level in that it has things like an undo manager. https://gojs.net/latest/index.html https://gojs.net/latest/index.html
- suyash 7y agoLink to the actual course that mentions all the details : http://vis.csail.mit.edu/classes/6.894/ http://vis.csail.mit.edu/classes/6.894/
- warpech 7y agoTechnically, D3 is a JavaScript library, but in reality it is much more than that. In this article, it is called "visualization grammar". I have heard it being called "jQuery of diagramming", "declarative DSL for data visualization" and so on. Since 2011, there were already numerous cycles of the best of breed JavaScript SPA frameworks and libraries (I'm talking everything from jQuery, through AngularJs, to React), but in data visualization, D3 seems to hold its position very well. What are the things that D3 did right to get the acclaim, and why does it keep it for so long? D3 is approaching 10 years since the initial release, did it stand the test of time and will it keep its power for the next 10 years?
- bauerd 7y agoDeclarative data binding?
- moron4hire 7y agoIn my mind, D3 is a DSL for ingesting structured data and outgesting DOM. While it has certainly been a few years since I touched it last, what I remember was that it basically didn't touch anything in the data or DOM, it just made the piping between the two super easy. So I think it was that approach: not introducing new idioms for existing things, but instead introducing the pipeline approach, with a very simple syntax, all made it very amenable to learning very quickly and rapidly iterating an idea, tweaking it until you get just the thing you want.
- curiousgal 7y agoI think of it as the assembly of data viz.
- deleted 7y ago[deleted]
- IshKebab 7y agoVega calls itself a "visualisation grammar" and I think it is much more worthy of that title. I just wish it was efficient. Sadly it represents every data point as a JavaScript object. In other words it uses array-of-structs style rather than struct-of-arrays which is an obviously bad choice in JavaScript if you want efficiency.
- stared 7y agoAs much I try to like ObservableHQ, this "updates happen above the code, sometimes a bit far, so you if you scroll too much, you don't see them" is one thing that makes it less intuitive than Jupyter Notebook style. It took me some time to realize that running cells actually change something in the country list.
- pphysch 7y agoIt's not just a Jupyter Notebook But In JS, though. Dynamically interacting with the DOM is perhaps the core feature of Observable, while Jupyter/iPython very much embraces the strict imperative style (ipywidgets etc being more a nice hack than anything) While I do think there could be UX improvements, I don't think this is a flaw in Observable.
- stared 7y agoI think that in JS there is much more potential for interaction (as frontend IS JavaScript; for Python and other languages, it is this language + JavaSript). Yes, ipywidgets are hacks (as many other interactive things). So, I am surprised that there is no standalone REPL in that style. The closest things I've found are ObservableHQ and RunKit (the other is much more Jupyter-like, but still - AFAIK runs code in the backend).
- kickout 7y agoAlways viewed this as a good feature, not a bug
- TeMPOraL 7y agoIt's a feature, not a bug. ObservableHQ notebooks are reactive - there's a DAG underneath. It's not a Jupyter-style execution log.
- K0SM0S 7y ago> there's a DAG underneath Would you or someone care to elaborate? Do we mean the 'linking' between 'nodes' (cells) as an interpreter/compiler would do over a file/object structure? Thus I assume, opening a world of options e.g. for vectorizing performance, type checking and all? If so, we have in one such notebook a true slice of "visual" IDE the kind of which Microsoft could only ever dream about! (so far) ;-) [Side-related note: I'm amazed at the emergence of the notebook paradigm over the last 10 years, accelerating for at least 2-4 now. See how they do it at Netflix. There's a case to be made that the notebook paradigm could really bridge wide open the "programming rift" between nerds and, well, everybody else, at least in skill-driven professional contexts. There's a short way from here to a slew of clever domain-driven script languages plugging straight into BI.]
- boringg 7y agoI really enjoyed d3 for the most impressive data viz products. However I always found the overhead to get d3 going and piping data to the explicit locations to be burdensome for most applications. My sense was that you would use d3 as a final polishing step for any data viz project/product or if you wanted to make a data product that had complicated requirements/display needs. I would be curious to hear if anyone uses it for data exploration or if the overhead has been lowered over the last couple years (its been 3 years since I've used it).
- Vaslo 7y agoUsed D3 for a grad data viz course project a year or two ago. Extremely powerful but unless you are doing custom visualizations or are excellent in JavaScript and Visualization it’s a bit overkill. Much easier to do monthly reporting or even one off stuff in Tableau, Power BI, or the like. Tableau or Power BI I could pass to other analysts and without experience they could figure it out. If I sent them my d3 code they would cry. Again if doing advanced visualizations for a large newspaper, commercial presentation, it’s extremely customizable and makes some really beautiful charts.
- sailfast 7y agoUsing a non-proprietary platform also has the distinct advantage of supporting whatever APIs you want to use and not having to deal with extracts of data. Having to wait for one of these platforms to support JSON from a web URL is really quite silly when you could write the query quickly (in python or whatever) and pass the values to your view. Or, you know, use PyGal or another server-side charting library: http://www.pygal.org/en/stable/ http://www.pygal.org/en/stable/
- inferiorhuman 7y agoOr, you know, use PyGal or another server-side charting library: http://www.pygal.org/en/stable/ http://www.pygal.org/en/stable/ Is there much of a market for server-side rendering? I've been putzing around with a d3-inspired charting library in Rust mostly as a brain teaser though.
- dreamcompiler 7y agoI very much prefer to generate svg charts on the server. Not only is this more sensible when you have a huge number of data points, but it even works with js turned off (unless you need interactivity).
- sings 7y agoNot disagreeing – I do this often too – but the downside can be having a very large dataset which in turn generates a very large response, which might be more efficiently sent as data and constructed client-side. Less importantly, Google’s lighthouse tests for a certain number of DOM elements, which a complex chart can easily exceed.
- mkchoi212 7y agoCool library! I like it when libraries don't have too many configurations set to a default. e.g. https://github.com/danielgindi/Charts https://github.com/danielgindi/Charts has so many default options set for a graph that 80% of code is doing something like chart.option.isEnabled = false
- factsaresacred 7y agoI switched from D3 to echarts[0] and never looked back. Still powerful and customizable but comes with a much easier API to reason about. [0] https://github.com/apache/incubator-echarts https://github.com/apache/incubator-echarts
- ggregoire 7y agoSame here. I still haven’t found anything I couldn’t do with echarts. D3 is always highly upvoted on HN, though it’s overkill in 99% of use cases in my opinion.
- jonathankoren 7y agoMaybe I'm the minority, but whenever I worked with D3 to do anything beyond the simple barcharts this shows, I ended up having to manipulate the SVG DOM manually, which quite frankly sucks.
- bhandziuk 7y agoThis is my experience too. Once you start wanting to do anything that is not just out of the box you need to know the ins and outs of SVG at which point you may as well just make your own SVGs in JS. Which is what I've ended up doing.
- artur_makly 7y agoWhen we launched https://VisualSitemaps.com https://VisualSitemaps.com, we decided to use D3 since it really showed the site-mapping DataViz[1] really well and even allowed for real-time manipulation ( try drag n droppin the nodes in the demo below ) However, it does have its performance degradation once you go beyond 3000 nodes of data. So we are now in the process of rebuilding our mapper in Canvas+WebGL via Pixi.js. [1]https://app.visualsitemaps.com/share/7b4fd8556b102ed739cc308efdf78c9f https://app.visualsitemaps.com/share/7b4fd8556b102ed739cc308...
- wattenberger 7y agoThere are tons of different d3 modules (40+). As someone who uses d3 extensively, but rarely uses its selection and data binding functionality, I put together a birds-eye view of the different modules. There is tons of great functionality that is usually skipped over in favor of the DOM-manipulation methods, like managing colors, dates, data munging, etc. https://wattenberger.com/blog/d3 https://wattenberger.com/blog/d3
- armonraphiel 7y agoIncredible resource
- lioeters 7y agoThat is an excellent set of articles for learning d3! I love how it gives an overview of all the d3 modules, then explains them in groups by related functionality. I just started exploring, and will study it over time. Thank you for sharing your knowledge, the articles are really well-done and high quality. I'm guessing the visualization of d3 modules is done in d3 itself. Beautiful in concept and presentation.
- gfxgirl 7y agoIf you get rid of the `width = 940` line then the charts become responsive. `width` is a preset observablehq variable. There's more work to do but it's a start
- gargarplex 7y agoWhile I'm sure the authors poured in a lot of effort, I found this tutorial difficult to follow despite the neat "notebook"-style webpage. This was remarkably more intuitive and clear and I breezed through https://alignedleft.com/tutorials/d3 https://alignedleft.com/tutorials/d3