preattentive symbols

[hemanrobinson]

Symbols with preattentive features improve pattern detection and reduce overlap. This symbol set implements ideas of Cleveland, Wilkinson, and others, and has been tested for popularity and discriminability, and adjusted for approximately equal weight.

A demo of these symbols is here: https://hemanrobinson.github.io/preattentive/

Many products support up to a dozen different symbol sets. This is analogous to multiple color schemes, such as Dr. Cindy Brewer's recently supported in d3.

Not knowing d3's plans for symbol sets, I've only made a bare attempt at integrating these, but would be happy to continue this work along whatever lines are appropriate.

[Fil]

Awesome! I also feel that we don't use symbols enough in practice, maybe because we don't have enough examples that look right.

I recently worked on the symbols that Bertin used in the methodology volume of “Paris et l'agglomération parisienne” (vol. 2, 1952, the "correct" answer being the middle pane): https://observablehq.com/@fil/scintillating-symbols

Getting the shapes right took me a moment. In particular I realized that the white inner ring of the "dot in circle" symbol is supposed to be white, not transparent; and that the full dot and cross symbols also need to have a tiny white outer stroke.

[hemanrobinson]

Thank you! I have a copy of Bertin's Semiologie, but was not aware of the earlier work.

For me, William Cleveland is a major influence. In The Elements of Graphing Data, he suggests two symbol sets, saying that we need one set for plots without much overlap, and another for dense plots.

People also use other symbol sets for special purposes. So I think that d3 should support at least two sets, and allow for more in future.

In my PR, I suggested export var symbolSets = [ "geometric": symbols, "preattentive": pSymbols ];

A better alternative might be to define a function setSymbols( name ), which would cause d3.symbols to point to the named set. Then the user could map their data categories to d3.symbols[ 0 ], [ 1 ], ..., [ n ], getting whatever set they specified. For backward compatibility, the default would be the current built-in set.

[Fil]

See Heman's notebook https://observablehq.com/@heman/preattentive-symbols-176

[hemanrobinson]

Great idea! Thanks, Philippe!

On Tue, Jun 15, 2021 at 2:10 AM Philippe Rivière @.***> wrote:

See Heman's notebook @.***/preattentive-symbols-176

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/d3/d3-shape/pull/176#issuecomment-861202947, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABITSVHQYUUAP6XLKYIQJFDTS3VGZANCNFSM4Z6EQXCQ .

[hemanrobinson]

Hi Philippe,

I seem to have my head above water in my new job. Am finally beginning to work with d3, which is what I was originally hired for. Please let me know if there is anything I can do to help you with the plot symbols.

Two points in particular:

1) I was strict about counting the pixels, and trying to give the symbols equal weight, so that none of them dominated the plot. One side-effect is that the Plus and X symbols are higher and wider than the others. I think I did right here, but some might prefer that they should be trimmed by a pixel or two.

2) I coded seven symbols because that's how many d3 had in their existing set. Our usability tests did not find any significant differences in discriminability for more than six symbols. If a larger set is desired, you could just extend it with other popular symbols.

Best regards,

Heman.

On Tue, Jun 15, 2021 at 7:45 AM Heman Robinson @.***> wrote:

Great idea! Thanks, Philippe!

On Tue, Jun 15, 2021 at 2:10 AM Philippe Rivière @.***> wrote:

See Heman's notebook @.***/preattentive-symbols-176

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/d3/d3-shape/pull/176#issuecomment-861202947, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABITSVHQYUUAP6XLKYIQJFDTS3VGZANCNFSM4Z6EQXCQ .

[mbostock]

Apologies for taking so long to look at this, but these are lovely! They do appear to be easier to discriminate (in my personal experience looking at the provided demo).

I wonder whether we want these to replace the current set entirely (with a major version bump), or if we want to give them new names to maintain backwards compatibility. I think I’m leaning towards the latter… but I’m not sure what names to use.

The current symbols were designed to be either filled or stroked, and to be different independent of rotation. These new symbols are designed only to be stroked, and some of the shapes are equivalent after rotation (plus and x, and square and diamond). We’ll need to note this in the documentation, and this is another reason not to simply replace the current set of symbols.

I can hopefully work on merging this soon.

[hemanrobinson]

Thanks so much, Mike.

Many products I've worked with offered multiple symbol sets. People with specialized data often use special symbols.
I think if you plan for growth in this area, eventually people will add more sets.

I'm just happy if you can use these. Thank you!

[mbostock]

I’m investigating here…

https://observablehq.com/d/be0598261eea8fba

I’m making various tweaks to the proposed symbols. My current plan is to add these as a set of “stroke” symbols, i.e. symbols designed for stroking, and rebranding the current set of symbols as “fill” symbols, i.e. symbols designed for filling.

[hemanrobinson]

It's important to mention that the preattentive set has been tested and ordered for discriminability. Ordering the set helps the user, because it enables software to automatically assign the N most discriminable symbols for data with N categories.

In our tests, we found that circle and plus are the two most discriminable symbols; circle, plus, and X the three most discriminable, and so on. (It's no coincidence that circle, plus, and X are featured in the game of Tic-Tac-Toe; young children need highly discriminable symbols.)

Here is the ordered set that we found:

Our testing showed statistically significant differences in discriminability among the first six symbols. After the sixth, symbols become hard to discriminate, so can be added in any order to extend the set.

We also considered issues of popularity and overlap. Popularity was measured by an opinion poll, and overlap by visual examination. We ordered based on test results for discriminability, but considered popularity and overlap as tiebreakers.

[mbostock]

Moving this to #189. Thanks for the contribution, @hemanrobinson!