Fast interactive prototyping with D3.js II – Tricks of the trade | Hacker News Reader

Fast interactive prototyping with D3.js II – Tricks of the trade

snips.net

74 pointsoulipo10 comments

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

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

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));

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

Thanks!

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/

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

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?

Not really, no. I haven't tested the examples in this specific article but I work with d3. Haven't had issues with FF and d3 to be specific.

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.

Reply on news.ycombinator.com