Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

arc mark and pie transform #85

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

arc mark and pie transform #85

wants to merge 6 commits into from

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Dec 31, 2020

ref. #80

Todo:

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

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

Capture d’écran 2020-12-31 à 17 41 55

@mbostock
Copy link
Member

transform: d3.pie()

Awesome! 👍

@Fil
Copy link
Contributor Author

Fil commented Jan 1, 2021

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
Copy link
Contributor Author

Fil commented Jan 1, 2021

Pie mark!
Capture d’écran 2021-01-01 à 18 12 46

@Fil
Copy link
Contributor Author

Fil commented Jan 1, 2021

mixing pies and dots
untitled - 2021-01-01T183329 895

- sort: false; sortValues: false;
- value: "value"
@Fil Fil mentioned this pull request Mar 8, 2021
@jackhumbert
Copy link

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:

chrome_X3Iluhc3QP

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants