[vis] Ternary Plot of orgs against approach

[rufuspollock]

Create a ternary plot based on the three (sum to one) "approach to change" dimensions

• Library: https://github.com/davenquinn/d3-ternary
• App: https://www.ternaryplot.com
• Example: https://observablehq.com/@dixonj13/zoomable-ternary-plot

Acceptance

• Ternary diagram based on approach type
• Can see info on org on hover

Tasks

• Identify library DONE. Use d3 and d3-ternary https://github.com/davenquinn/d3-ternary
• Try it out with some simple data
• Design it (a bit) In progress https://docs.google.com/drawings/d/14MEAE9PC1Vp9rb6QlDejat62PRXS75iprkGOl2ziD7I/edit
• Explanatory text @rufuspollock or @theo-cox
• Hover shows label DONE: with simple title (though not obvious)
• Better hoverable/tool-tip labels DONE
  • Make text a bit smaller
  • Remove border (?)
  • Use a nicer font (either inconsolata/source code mono or our standard font for site which is nunito sans)
• Try out showing all labels (and paste a screenshot in comments) DONE. See comment below. Basic conclusion is a bit messy but useful. Maybe if we make labels a lot smaller and maybe rotate to 45 degrees
  • Reduce font size to 6 or 7 and retry
  • Rotate labels 45 degrees Not worth it
  • if good we can add a toggle for this (later)
• Color organization "dots" based on their topic (or activity) so we can see that as well
  • Assign color scale to primary topic Using d3 color scale
  • Apply that to organization dot
  • Show scale with explanation - see https://observablehq.com/@d3/color-legend DONE: currently outside of SVG
    • Can we show this stacked and several font sizes down e.g. like
      
    • Move legend below chart
• Add our logo - see public/life-itself-logo.svg (position top right probably) DONE. See screenshot in comment below
  • Move logo in a bit to be above diagram e.g. like
  • Move the life itself logo up a bit - align with top and right if possible (so RHS of logo is flush with right of visible diagram)
• Make circle size 3 and see what we think (take another screenshot)
• Re-add the scale on the sides with percentages (and maybe grid) (?) not sure as what are the labels, maybe you need an arrow?
  • Probably remove or significantly change anchor circles
  • re-add anchor labels (and closer)
  • Make anchor labels smaller e.g. size 10
  • Move anchor labels closer to anchor point
  • move inner change back to top (same orientations as before)
  • move red axes arrows out of diagram and make a bit shorter (and same color as axes)
  • bring back a small black dot at the corners (?)
  • maybe make the color of axes a bit "black" e.g. #333
• have labels to the right of the dots (and closer if possible) (rather than below)
  • don't clip outside of the border (but leave the border for now)

Bonus

• Making the diagram bigger / full screen DONE
• (?) Remove big red dots and divide with lines as per sketch below IN PROGRESS Removed big red dot - separating lines maybe not important for now
  
• Zoom support - see https://observablehq.com/@julesblm/introducing-d3-ternary#zooming
• export svg / png
• PNG and SVG export / embed
• Make colors nicer see e.g. Color palettes rufuspollock/ux-patterns#5

Someday maybe

• Labelling improvements e.g. label collision detection and avoidance see e.g. https://github.com/tinker10/D3-Labeler and https://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion
• Search to highlight an organization i.e. i can search with a name and then select an organization and it highlights in the vis (maybe for more than one org)
• Show both topics the org is associated with (maybe a bullseye coloring of the dot?)

Documentation

• Library: ...
• A direct example: https://observablehq.com/@dixonj13/zoomable-ternary-plot

[rufuspollock]

Results of work so far: https://ecosystem.lifeitself.us/vis

[rufuspollock]

@khalilcodes has done a great job on a first pass on coloring and better tool-tips

[rufuspollock]

Here's the latest work from @khalilcodes covering:

• Showing logo
• Showing labels
• Showing legend

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.

[rufuspollock]

Latest version with smaller labels, logo moved etc. Against plan from yesterday which was:

• Move logo
• move legend and make a bit nicer
• screenshot with smaller labels (just done)
• Put in axes + labels a la https://observablehq.com/@julesblm/usda-soil-textural-triangle?collection=@julesblm/ternary-plots DONE see image in comment below

[khalilcodes]

Plan from yesterday:

• Making circles size 3
• Put in axes + labels
  • Remove red dots

TBD: Axes labels offset ?
TBD: keep triangle border ?

[rufuspollock]

• move inner change back to top (same orientations as before)
• have labels to the right of the dots (and closer if possible) (rather than below)
  • don't clip outside of the border (but leave the border for now)
• move red axes arrows out of diagram and make a bit shorter
• re-add anchor labels (and closer)
• bring back a small black dot at the corners (?)
• maybe make the color of axes a bit "black" e.g. #333
• Move the life itself logo up a bit - align with top and right if possible (so RHS of logo is flush with right of visible diagram)

[rufuspollock]

@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.

[khalilcodes]

@rufuspollock Added the toggle button for show all labels. Require feedback on the following:

• Positioning of the button, maybe below the chart next to legend ?
• Button with or without a background ?

[rufuspollock]

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 <#42 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABMDMVOJOX4KJWAGRDSAATUWP6C5ANCNFSM5JHCPSBA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[khalilcodes]

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:

[rufuspollock]

@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.

[khalilcodes]

something like this ?

or ?

[rufuspollock]

@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.

[theo-cox]

@rufuspollock @khalilcodes if it's possible to have this live before next Monday we can include it in our newsletter

[rufuspollock]

FIXED. I think this is now done. Will always be more tweaks and definitely publishable 😄

👏👏 great work @khalilcodes