Closed rufuspollock closed 2 years ago
Results of work so far: https://ecosystem.lifeitself.us/vis
@khalilcodes has done a great job on a first pass on coloring and better tool-tips
Here's the latest work from @khalilcodes covering:
As we can see, quite messy with the labels because a lot together. No obvious way to fix this ... Could make font smaller and do ellipsis. But not sure this is worth it.
Latest version with smaller labels, logo moved etc. Against plan from yesterday which was:
Plan from yesterday:
[x] Put in axes + labels
TBD: Axes labels offset ? TBD: keep triangle border ?
#333
@khalilcodes looking really good. Obviously label overlap is an issue so i think worth making a toggle button called e.g. "show all labels" and defaulting this to off (i.e. we don't show all labels). Then i think we are good to go with embedding this on front page.
@rufuspollock Added the toggle button for show all labels. Require feedback on the following:
2c: I'd have the button as a simple checkbox rather than a formal button so it is really obvious how to turn on and off. (this would also resolve background question)
(Aside: i assume we are doing the button outside of d3 and as classic react-y type interaction with the rest).
I would indeed put it next to the legend ...
On Mon, Jan 17, 2022 at 12:42 PM Khalil Ali @.***> wrote:
Added the toggle button for show all labels.
Requires feedback:
- Positioning of the button, maybe below the chart next to legend ?
- Button with or without a background ?
[image: vis] https://user-images.githubusercontent.com/42637597/149762860-ba6e58d6-e131-46e7-b877-a29a326ec0a5.png
— Reply to this email directly, view it on GitHub https://github.com/life-itself/ecosystem/issues/42#issuecomment-1014429307, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABMDMVOJOX4KJWAGRDSAATUWP6C5ANCNFSM5JHCPSBA . You are receiving this because you were mentioned.Message ID: @.***>
Making the button to a checkbox as recommended turns out to be a better approach. Also repositioning next to the legend. Any tips for checkbox color ?
Notes: The checkbox is outside the svg but is handled in d3. Since D3 and React both manipulate the DOM, using react state is causing rerender issues when toggling. For getting this up and running quickly the easiest way I found is letting d3 handle the change event. More context on the topic can be found here - https://gist.github.com/alexcjohnson/a4b714eee8afd2123ee00cb5b3278a5f . Eventually we would want to implement one of those options for them to play nice together.
Here's the screenshot:
@khalilcodes looks good. Personally i might put the show all labels under the category labels for clearer UX plus better rendering on small screens but that's minor.
Last point would be change color of "Cultural Change", "Systems Change" to same colors as labels on graph i think.
something like this ?
or ?
@khalilcodes looks good.
Can you now submit a pull request so we get this work in and live on the site - i want to show to other people.
@rufuspollock @khalilcodes if it's possible to have this live before next Monday we can include it in our newsletter
FIXED. I think this is now done. Will always be more tweaks and definitely publishable 😄
👏👏 great work @khalilcodes
Create a ternary plot based on the three (sum to one) "approach to change" dimensions
Acceptance
Tasks
Rotate labels 45 degreesNot worth itpublic/life-itself-logo.svg
(position top right probably) DONE. See screenshot in comment below#333
Bonus
Someday maybe
Documentation