
Fast interactive prototyping with D3.js II – Tricks of the trade - oulipo
http://snips.net/blog/posts/2014/05-04-fast-interactive_prototyping_with_d3_js_II.html
======
nathancahill
Sorry, you lost me at "Doesn't work in Firefox". d3 is compatible with
Firefox, and so it JavaScript and SVG. So what's breaking here?

Edit: Dove into the code. Looks like Chrome and IE improperly implement the
DOM spec for insertBefore(). insertBefore requires two arguments: newChild and
refChild [0] Only one is being passed in these examples.

[0]
[https://bugzilla.mozilla.org/show_bug.cgi?id=964212](https://bugzilla.mozilla.org/show_bug.cgi?id=964212)

~~~
oulipo
Author here, I developed it in Chrome and had not checked in Firefox before I
saw your comment -- I will try to debug later tonight what is going on with
Firefox, but I haven't used any special API apart from d3 so I'm not sure why
it does not display the content intended

------
couchand
That's a neat article, with a number of good examples.

In the sorting example, I don't think you need either of your `each`s. Almost
every D3 method operates in bulk.

So this example:

    
    
        circles.each(function (d, i) {
            d3.select(this)
                .transition()
                .delay(i*250)
                .each(animateGrowingCircle(10, 20));
        });
    

could be simply:

    
    
        circles.transition()
            .delay(function(d, i) { return i*250; })
            .call(animateGrowingCircle(10, 20));

------
isnotchicago
Unrelated: the "Jobs" link in the footer results in a 404 error. It links to
snips.net/jobs instead of snips.net/jobs.html.

    
    
      404 Not Found
      
      Code: NoSuchKey
      Message: The specified key does not exist.
      Key: jobs
      RequestId: E4C72F651DB2691D
      HostId: nVfBKmpulx+ustWYBLz5z/LvOtALcpAN5YVE4rOTDwSWa6I1yfPlJrIubcU5OjZW

~~~
oulipo
Thanks!

------
munaf
Using D3 adds a lot more power, but this approach seems far more complicated
than Framer (which integrates with Photoshop and Sketch).

[http://www.framerjs.com/start/](http://www.framerjs.com/start/)

~~~
zo1
Framer: "Sorry, only WebKit based browsers like Chrome and Safari are
supported for now."

------
acomjean
I've started looking at using d3. It seems great, but a lot of stuff just
seems not to work in firefox (mac), this example doesn't work gor me as well.

Anyone know if this cross browser breaking is normal for d3?

~~~
couchand
There are a few things that Firefox doesn't do very well, notably rendering
large numbers of SVG elements (thousands to tens of thousands on my little
laptop). Using a `use` instead of repeating the elements literally makes this
somewhat better.

There are also some things that Chrome doesn't do very well, though offhand I
can't think of any good examples.

Right now I'm fighting with a weird cross browser issue somewhere in the
interaction of `axis`, `scale`, and `zoom`, but this is the first time I've
ever had a really major persistent cross browser problem with D3 (other than
performance concerns).

I think the mistake many D3 programmers make is to not take advantage of the
tools D3 gives you; doing everything "the D3 way" is much more efficient.
Witness the code sample in my other comment on this article: In the initial
version, we have to break out of the declarative model and drop down to an
iterative one. Practically speaking that means D3 invokes the first `each`
handler, the first line of which is go back to D3 to recreate the selection we
just lost. Likewise, using `each` instead of `call` for the animation tween
requires an invocation of the tweening function for every element in the data.

One of my favorite parts about D3 is that the cleanest looking code is almost
always the most efficient.

