4 ms·

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

74 points by oulipo 13y ago

couchand 13y ago
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));
acomjean 13y ago
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?
- eshvk 13y ago
  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.
- couchand 13y ago
  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.
nathancahill 13y ago
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 13y ago
  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
munaf 13y ago
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 13y ago
  Framer: "Sorry, only WebKit based browsers like Chrome and Safari are supported for now."
isnotchicago 13y ago
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 13y ago
  Thanks!

74 points by oulipo 13y ago

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

acomjean 13y ago

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?

eshvk 13y ago
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.
couchand 13y ago
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.

nathancahill 13y ago

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 13y ago
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

munaf 13y ago

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 13y ago
Framer: "Sorry, only WebKit based browsers like Chrome and Safari are supported for now."

isnotchicago 13y ago

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 13y ago
Thanks!