arc mark and pie transform

[Fil]

ref. #80

Todo:

• [ ] "grammar of graphics": how to make this work naturally with the other transforms (stackX, groupX) 🌶
• [x] pie mark
  • [ ] pie API (group by "x", etc.)
• [x] labels
  • [ ] white ghosts
• [ ] rounded corners, etc.
• [ ] unit tests
  • [x] arcs
  • [ ] pies

test notebook https://observablehq.com/d/49758b3252c58f13

[mbostock]

transform: d3.pie()

Awesome! 👍

[Fil]

Two conceptual difficulties:

• there's no real reason to make "x" and "y" mandatory, but if I don't define them by default to constant(0), Plot complains (if mandatory, that they are missing, if optional, that x has no bandwidth).
• should innerRadius and outerRadius be based on scales? And if so how can we adjust them so that the pie is always visible? For now I'm trying to express these in terms of "% of the maximum that fits" (ie 100 = fully visible disk in the local canvas).

[Fil]

Pie mark!

[Fil]

mixing pies and dots

[jackhumbert]

Just wanted to thank @Fil for the work on this mark, and share some small updates I made for a project where I needed validate election results:

I found it useful to plot little pie charts on a county/race graph to help spot patterns in the errors (which were often related to one of the axises). I have a demo up here, and the specific changes I made are here.

I'm not super familiar with the system yet (I was getting errors somewhere in the facet init), so I had to move the d3.pie() transform outside of arc to something like this:

data_in.forEach(d => {
    const completed = d.counted / d.official
    const pie = d3.pie()([completed, 1 - completed])
    data_out.push({
      ...pie[0],
      ...d,
    })
  }) 

I'd be happy to submit any changes, but I'm sure my code is full of ES6 errors - it's been a while since I've done this sort of development, and am trying to relearn some things!