d3 instead of JQuery as DOM builder

[Tony Fast]

Does anyone have any opinions on using d3 to replace JQuery/Zepto DOM tools?  Are there any pros/cons?

I have come to d3 as a domain data scientist.  Managing data with Jquery is too complicated for the unstructured 

datasets I work with.  React and Riot do a better job at managing it, but naming is still a huge problem.  In larger

projects I find that the current web-design tools are just not built for high-variety data.

I have found that d3 as a DOM builder has some nice benefits.

- Code is much more modular, reusable

- Less modifications to data structures

- More readable code

- Substantially less naming

Instead of having d3 build svg's, which it does very well, I will pass the structured data to templating tools like Handlebars, Riot, or React to build coarse pieces of the page.

Here are some small ideas I have tried:

Pagination with d3

Use a YAML manifest to create a webpage using d3 and Handlebars

Modular "Bootstrap Affix"-like behavior

There are some other little hacks on bl.ocks.org.

I have not see much use of d3 in this manner.  I am wondering if it is frowned upon.  

[gabriel]

In both my previous and current jobs (in finance, for very large IBs) we use D3 instead of jQuery, etc. for all our DOM manipulation.

We use it for the most basic stuff (interactivity, etc.), building lists, sections, all the way up to "apps", which become just hierarchy of D3 components, pretty much in the "reusable charts" tradition.

As browsers become more modern, the necessity for a _compatibility layer_ such as jQuery lessens.

And the D3 API is so much nicer and flexible.

[Eric Forgy]

I also use d3 as a DOM builder instead of jQuery.

[Owen]

Glad to hear that, as I was considering using D3  this way as well.

[Frank Guerino]

Hi,

I've also used D3 to control pieces of the DOM, especially when pieces of the DOM are tied to Data traits.  In this Filterable Component View, clicking on a color-coded legend keys allows users to filter data by Data Type, which shifts the visualization and then rebuilds the HTML Table to maintain synchronization of the data, both, in the visualization and in the table.

While this may not be as complex as some of the examples listed above, I find that it's easier to maintain synchronization between both the visualization and DOM constructs like tables when I just use D3.

My Best,

Frank

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Forgy]

Cool stuff. I started by building apps (including widgets) using just d3 and SVG (almost just to prove to myself it could be done). The results were fun and educational, but for the real world, I guess having a div here and there isn't too bad :) Now, I've got more typical apps using things like Bootstrap (which unfortunately has jQuery dependency), but I'm still using d3 for managing all data, e.g. when a model runs, I update all HTML tables, charts, etc using d3.

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/sT1nk_POpWA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Elijah Meeks]

I use D3 for all my DOM manipulation, too. I never picked up jQuery, and only use it when a specific library (like Select2 or Ember) requires it, as I've never needed to code for older browsers.

Gabriel, have you or anyone on your team written up or open-sourced anything related to that d3.app pattern?

[Frank Guerino]

Another thing to consider is how much library code you're loading into your browser.  If you know you already need D3, why also load in JQuery if you can get away with one library and keep things a bit more streamlined?

Frank

[Ulrich Sinn]

A former flash developer, and the last 3 years mostly doing canvas stuff, I just finished:

http://www.visitdallas.com/exploredallasnow/

(Thanks Elijah for your terrific book!)

jQuery free, mostly because of size limitations, had to stay around 1MB total. A first for me, and in all honesty still a bit of a bumpy ride and the whole thing could probably be more in a d3 way of thinking.

Just discovered d3 events and that I can actually add a payload to the dispatch. Love it!