Getting D3 Show Reel working in JSFiddle

[Seth F]

Howdy D3ers!

I'm trying to get http://bl.ocks.org/1256572 working in a JSFiddle so I can build off of a piece of it, but I'm getting 404 errors when including the key D3 files in the header:

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.3.0"></script>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.3.0"></script>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.3.0"></script>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?2.3.0"></script>

I realize that those files refer to an older version of D3, but switching to the newer version (v3) might require other changes to the bl.ock.

Any advice on how to address this issue, and what url(s) I should include to get this example working in the Fiddle?  FWIW I'm referring to my own .CSV file, so that's not the problem...

Here's the link to the Fiddle I've been working with: http://jsfiddle.net/sethfam/Cd8z5/

Your help would be awesome!

Thanks,

Seth

[Chris Viau]

You can use the d3.v2 version from this url: http://d3js.org/d3.v2.js which includes all the external files.

--
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/groups/opt_out.
 
 

[Mike Bostock]

Please don’t.

The show reel exists to demonstrate different transitions that you can
implement with D3. That’s it. You should not use the show reel to
visualize your own data. The show reel itself is a horrible
visualization, missing proper axes and labels, and some of the
transitions don’t make much sense. For example, when converting
stacked bars to bars, the bars correspond to average stock price,
which is pretty meaningless.

The show reel still serves its purpose at demonstrating the breadth of
transitions that are possible in D3 as a framework, so I don't regret
making it. But please do NOT use it as an example, either to learn
from (it’s too complicated) or for real data (it’s not intended for
that).

Or do whatever you want, but I’m not helping, and you have been warned. :)

Mike

[Seth F]

Fair enough, Mike.  Thanks for the caution!

I'm trying to figure out an easy way to transition from a single stacked bar chart into a series of bar charts.  The reel does that with individual area charts (combining them into a single stacked area chart) and so I wanted to start with that code.

I couldn't find an example of this kind of transition in bl.ocks.org which is why I thought the show reel could be a good starting point.  But I understand how it's flawed.   Is there another example which would serve as a better starting point?

Thanks!

Seth

[Simon Russell]

NVD3 might have what you're looking for?

http://nvd3.org/ghpages/multiBar.html

--

[Mike Bostock]

> I'm trying to figure out an easy way to transition from a single stacked bar
> chart into a series of bar charts.

What do your before and after look like? It sounds a bit like this one
(which is also a bit fancier than may be necessary):
http://bl.ocks.org/3943967

I think you might have better luck with these two examples, which are
more intended to be used as starting points for real visualizations:

* http://bl.ocks.org/3887051 - grouped bar
* http://bl.ocks.org/3886208 - stacked bar

The structure of the two charts is fairly similar so I expect with a
little tinkering you could transition between them.

Mike

[Chris Viau]

You could also start from this example: http://bl.ocks.org/1363743 It was just an exercise to understand how to set the x-y-w-h component of data elements to transition between grouped and stacked bar chart.

Mike

[Seth F]

Thanks for the super fast and helpful replies, everyone.  This community is amazing!

I've seen many of the examples that you mentioned (except for the last one from Chris) but I don't think I'm doing a good enough of a job describing what I'm trying to accomplish.  Here's the gist:

1. Start with a stacked bar chart, like this:

2. Clicking a button "breaks out" the stacked bar chart into 4 different standalone bar charts:

I tried modifying the code on http://bl.ocks.org/3943967 to make that happen, but I couldn't figure out how to set the y-coordinates to effectively "fake" 4 individual bar charts (it also wasn't clear how to add three more axes to a modified stacked bar chart).  But now it seems like I should just set up a single stacked bar chart plus 4 regular bar charts, and transition from one to the other.

Can anyone provide guidance on how to do that transition?  I'd love to have the feel of the transition in http://bl.ocks.org/3943967 or in the demo reel--which is what got me interested in building off of that in the first place.

Looking forward to your thoughts, and thanks again to this community for being so incredibly helpful and responsive!  

Cheers,
Seth

[Mike Bostock]

I'd probably do something like this:

http://bl.ocks.org/4679202

I originally repeated the axes when using multiples, but that feels
redundant, so I removed them. Anyway, if you still want the axes, you
could add an opacity transition on the axes to fade them in and out.

Mike

[Seth Familian]

Thank you so much, Mike!! This is exactly what I was hoping for. I'll play with the axes from here.

With gratitude,
Seth