Donut charts in Graphviz

[GrahamHannington]

Hi @parrt,

Following your suggestion via email (20 July 2019):

donuts do look cool; maybe create an issue in repo so I can look at this when I have time?

here's an extract from my email to you:

I’m sending you this email in case:

• You’re using Graphviz to create pie charts (I gather you might be using matplotlib for this—for these nodes—not Graphviz) and
• You’d prefer donuts

Here’s a code pen I created yesterday, “Donut charts in d3-graphviz”, which overlays filled circles on the pies to make them like donuts.

Some background on this technique/hack, in a d3-graphviz GitHub issue: “image node attribute that refers to dynamically generated SVG (data URL)?”.

[parrt]

Does d3 imply it only renders in a browser? Can this donut thing work purely in mpl and graphviz?

[GrahamHannington]

| Does d3 imply it only renders in a browser? Yes. The specific example I give in the code pen only renders in a browser. | Can this donut thing work purely in mpl Yes. Setting Graphviz aside, mpl can do donuts: https://matplotlib.org/3.1.0/gallery/pie_and_polar_charts/pie_and_donut_labels.html Disclaimer: I have not used mpl for years. | and graphviz? Yes. The technique that I demonstrate in that browser-specific code pen—that is, using the image attribute to overlay a background-color-filled circle on the pie—should also work in the "original" Graphviz tool (as opposed to the Emscripten'd-to-JavaScript Viz.js used by d3-graphviz). The difference is that, where my example code uses a data URL to supply the SVG of the background-color-filled circle, for the original Graphviz tool I anticipate that you will supply a file path to a similar SVG file. Disclaimer: I haven't tried that. In recent times, my primary interest in Graphviz has shifted to visualizations in interactive web apps, rather than, say, PDFs.

[parrt]

Hmm...well,I don't hate the pie charts enough to really worry about this, particularly if it requires that I do some thinking or has anything requiring a browser. ;) if it's okay with you I'm going to close this for now

[GrahamHannington]

No worries, entirely your call. No browser required, but, yes, some thinking 😉.

I chose donuts for two reasons:

• In some circles 🙄, nothing says "20th century" quite like a pie chart. Donuts, apparently, are the dessert chart du jour.
• I wanted to overlay a label—a computer transaction ID—on each chart. I preferred the cleaner look of the label on the graph background color rather than on a multicolored pie.

My viz is rendered entirely in Graphviz. I investigated using a different library to render each node in the chart, as you've done, but I hit a roadblock: I couldn't capture mouse events for objects in such nodes. I think that's because Graphviz renders them using the SVG <image> element. This is important to me, because I want interactivity. At some point, I'll revisit that issue, and perhaps integrate the SVG for each node into the main Graphviz-generated SVG—as I've read you've done—rather than referring to it via the <image> element.

Here's an example of what I'm doing:

Essentially, I'm overlaying computer transaction performance data on transaction call structures. Each node (donut) represents a computer transaction. Each edge (arrow) represents a transaction calling another transaction. The size of each node represents the transaction CPU time relative to other transactions: so, the donuts are also "bubbles". I've deliberately omitted the legend because this viz is currently an inhouse project; I don't want to publicize the domain-specific details.

[parrt]

very impressive!