Multiple Pie Charts On a Page Using D3?

[Guerino1]

Hi,

Does anyone know where I might be able to find an example of how to best layout multiple pie charts on a single page?  All the examples I've been going through all just deal with a single chart per page.

I have a situation where, with each new page rendering, I may have a different number of pie charts, all stacked vertically over each other.  I'd like to understand how best to create them and lay them out in a very clean way that doesn't disrupt the rest of the page.

Thanks, in advance, for any help you can offer,

Frank

[Fan Mongxie]

Hi Frank,

You have the very nice example from Jim Vallandingham; the programming skills of Jim are far beyond the average level though - like mine -, and in this particular example, the core script is written in CoffeeScript.

An more accessible example prepared by Mike is http://bl.ocks.org/1305111.

HTH,

Fan

2012/3/12 Guerino1 <fgue...@gmail.com>

[Fan Mongxie]

Oops ... here is the Jim's example:  http://vallandingham.me/vis/church_by_state.html 

2012/3/13 Fan Mongxie <fan.m...@gmail.com>

[Mike Bostock]

> http://bl.ocks.org/1305111

This example comes from the wiki, where there are a number of other
pie-related examples you might find helpful:

https://github.com/mbostock/d3/wiki

Mike

[Frank Guerino]

Fan and Mike,

Thanks for the examples.  I'll take a look at both and get back with any questions.

Mike, I was already looking at your other example: "http://bl.ocks.org/1305337".  Two quick questions on this example:

1) How would I change the example to stack the pies "vertically" instead of horizontally?

2) What would be the best way to create a color coded legend/label key alongside each pie?

Thanks, again.  I appreciate the help and I'm learning a lot, very quickly.

Frank

[Kai Chang]

1) Use this CSS for to display svg elements vertically:

svg { display: block; }

2) Think of it as a visualization. The data are the keys. There is a
rect with a fill set to your coloring function. The y attribute is set
by the index.

[Guerino1]

Hi Kai,

I added your "display" suggestion to the "svg" css block (right after the font statement) in Mike's example, located at: http://bl.ocks.org/1305337.  It didn't work.

FG

[Ger Hobbelt]

On Tue, Mar 13, 2012 at 6:08 PM, Guerino1 <fgue...@gmail.com> wrote:

Hi Kai,

I added your "display" suggestion to the "svg" css block (right after the font statement) in Mike's example, located at: http://bl.ocks.org/1305337.  It didn't work.

That's due to 

        .style("display", "inline-block")

line in the JS code where the DIVs are constructed; that'll win the arm-wrestle match with any related CSS style section, so you might want to do it like:

      .style("display", "block")

instead (or nuke that line entirely and have the divs styled from a CSS <style> section or file.

(Inspect the rendered output in your browser and you'll see the result -- which made me look for a inline-block setting line. The browser's 'Inspect Element' tool is very useful for this sort of 'diagnostics'.)

Met vriendelijke groeten / Best regards,

Ger Hobbelt

--------------------------------------------------
web:    http://www.hobbelt.com/
        http://www.hebbut.net/
mail:   g...@hobbelt.com
mobile: +31-6-11 120 978
--------------------------------------------------

[Frank Guerino]

Hi Ger,

You nailed it!  This definitely worked.  I nuked it.  Thank you.

FG

[Laura Camellini]

Hi Mike, I'm trying to use your Updating pie chart http://bl.ocks.org/mbostock/1346410 to build two charts on a html page.

At the moment the two d3 generated svg interact with each other, this is the issue.

I'd like to know what's the best way to separate the data to be able to let each form interact with the correct svg.

I tryed naming the data "datasetA" and "datasetB" but it doesn't seem to change the result...

Here is my html page (under construction):

http://www.jeeltcraft.com/infographics/final_maps.html