Add marker symbols example #2188

jdamiba · 2020-02-12T18:35:59Z

The purpose of this PR is to update the marker styling example to show how to use custom marker symbols.

Here is the figure I ended up with:

Hovering over a symbol shows its name.

PX internals renaming

added some items in release process notes

* color column now appears in hover * corrected bug: path column can be numeric

* switch thumbnail for ternary plots doc to ternary scatter plot * Actually display the tidy table (#2136) * target the new graphing-library-docs repo * finally: how to style px * Datashader tutorial (#2154) * datashader tutorial * added requirements * CI fixup * icon + links Co-authored-by: Nicolas Kruchten <[email protected]> * cross-link px styling * more links Co-authored-by: Joseph Damiba <[email protected]> Co-authored-by: Nicolas Kruchten <[email protected]> Co-authored-by: Nikolas Havrikov <[email protected]>

prevent the creation of new px.default properties at run time

emmanuelle

Thank you for the PR! I left a couple of comments. I think it's possible to make the aspect ratio more "square" by having more lines, which will be easier with the modulo/integer division suggestion.

emmanuelle · 2020-02-13T20:08:57Z

doc/python/marker-style.md

+
+x_axis_offset = 0;
+for index, symbol in enumerate(symbols): 
+    if index >= 0 and index <= 60:


you can simplify these if statements by using the modulo and integer division operators.

emmanuelle · 2020-02-13T20:09:51Z

doc/python/marker-style.md

+)
+
+x_axis_offset = 0;
+for index, symbol in enumerate(symbols): 


since you iterate through the whole list every symbol is displayed twice, you could instead iterate through symbols[::2] to take every other element of the list.

emmanuelle · 2020-02-13T20:12:25Z

doc/python/marker-style.md

+
+The `marker_symbol` attribute allows you to customize the symbol used to represent markers. 
+
+In the following figure, hover over a symbol to see its name. Set the `marker_symbol` attribute equal to that name to change the marker symbol in your figure.


How about making a first plot where only symbols < 100 are displayed, then explain what the figure reference says "Adding 100 is equivalent to appending "-open" to a symbol name. Adding 200 is equivalent to appending "-dot" to a symbol name. Adding 300 is equivalent to appending "-open-dot" or "dot-open" to a symbol name." and make a second (more busy) chart with all symbols?

emmanuelle · 2020-02-13T20:14:56Z

I gave it a try starting from your code for the modulo thing:

import plotly.graph_objects as go
symbols = [0, 'circle', 100, 'circle-open', 200, 'circle-dot', 300,
            'circle-open-dot', 1, 'square', 101, 'square-open', 201,
            'square-dot', 301, 'square-open-dot', 2, 'diamond', 102,
            'diamond-open', 202, 'diamond-dot', 302,
            'diamond-open-dot', 3, 'cross', 103, 'cross-open', 203,
            'cross-dot', 303, 'cross-open-dot', 4, 'x', 104, 'x-open',
            204, 'x-dot', 304, 'x-open-dot', 5, 'triangle-up', 105,
            'triangle-up-open', 205, 'triangle-up-dot', 305,
            'triangle-up-open-dot', 6, 'triangle-down', 106,
            'triangle-down-open', 206, 'triangle-down-dot', 306,
            'triangle-down-open-dot', 7, 'triangle-left', 107,
            'triangle-left-open', 207, 'triangle-left-dot', 307,
            'triangle-left-open-dot', 8, 'triangle-right', 108,
            'triangle-right-open', 208, 'triangle-right-dot', 308,
            'triangle-right-open-dot', 9, 'triangle-ne', 109,
            'triangle-ne-open', 209, 'triangle-ne-dot', 309,
            'triangle-ne-open-dot', 10, 'triangle-se', 110,
            'triangle-se-open', 210, 'triangle-se-dot', 310,
            'triangle-se-open-dot', 11, 'triangle-sw', 111,
            'triangle-sw-open', 211, 'triangle-sw-dot', 311,
            'triangle-sw-open-dot', 12, 'triangle-nw', 112,
            'triangle-nw-open', 212, 'triangle-nw-dot', 312,
            'triangle-nw-open-dot', 13, 'pentagon', 113,
            'pentagon-open', 213, 'pentagon-dot', 313,
            'pentagon-open-dot', 14, 'hexagon', 114, 'hexagon-open',
            214, 'hexagon-dot', 314, 'hexagon-open-dot', 15,
            'hexagon2', 115, 'hexagon2-open', 215, 'hexagon2-dot',
            315, 'hexagon2-open-dot', 16, 'octagon', 116,
            'octagon-open', 216, 'octagon-dot', 316,
            'octagon-open-dot', 17, 'star', 117, 'star-open', 217,
            'star-dot', 317, 'star-open-dot', 18, 'hexagram', 118,
            'hexagram-open', 218, 'hexagram-dot', 318,
            'hexagram-open-dot', 19, 'star-triangle-up', 119,
            'star-triangle-up-open', 219, 'star-triangle-up-dot', 319,
            'star-triangle-up-open-dot', 20, 'star-triangle-down',
            120, 'star-triangle-down-open', 220,
            'star-triangle-down-dot', 320,
            'star-triangle-down-open-dot', 21, 'star-square', 121,
            'star-square-open', 221, 'star-square-dot', 321,
            'star-square-open-dot', 22, 'star-diamond', 122,
            'star-diamond-open', 222, 'star-diamond-dot', 322,
            'star-diamond-open-dot', 23, 'diamond-tall', 123,
            'diamond-tall-open', 223, 'diamond-tall-dot', 323,
            'diamond-tall-open-dot', 24, 'diamond-wide', 124,
            'diamond-wide-open', 224, 'diamond-wide-dot', 324,
            'diamond-wide-open-dot', 25, 'hourglass', 125,
            'hourglass-open', 26, 'bowtie', 126, 'bowtie-open', 27,
            'circle-cross', 127, 'circle-cross-open', 28, 'circle-x',
            128, 'circle-x-open', 29, 'square-cross', 129,
            'square-cross-open', 30, 'square-x', 130, 'square-x-open',
            31, 'diamond-cross', 131, 'diamond-cross-open', 32,
            'diamond-x', 132, 'diamond-x-open', 33, 'cross-thin', 133,
            'cross-thin-open', 34, 'x-thin', 134, 'x-thin-open', 35,
            'asterisk', 135, 'asterisk-open', 36, 'hash', 136,
            'hash-open', 236, 'hash-dot', 336, 'hash-open-dot', 37,
            'y-up', 137, 'y-up-open', 38, 'y-down', 138,
            'y-down-open', 39, 'y-left', 139, 'y-left-open', 40,
            'y-right', 140, 'y-right-open', 41, 'line-ew', 141,
            'line-ew-open', 42, 'line-ns', 142, 'line-ns-open', 43,
            'line-ne', 143, 'line-ne-open', 44, 'line-nw', 144,
            'line-nw-open']
fig = go.Figure()
fig.update_layout(
    title="Custom Marker Symbols",
)
x_axis_offset = 0;
for index, symbol in enumerate(symbols[::2]): 
    fig.add_trace(go.Scatter(x=[(index % 30)], y=[index // 30], 
                                 marker_symbol=symbol, marker_color='black', 
                                 marker_size=10, showlegend=False, hovertext=symbols[2*index + 1],
                                 name=''))
    if symbol >= 100:
        continue
   
fig.show()

emmanuelle · 2020-02-13T20:15:29Z

Finally it could be a good idea to disable tick labels because they don't mean anything here.

jdamiba · 2020-02-13T22:38:27Z

@emmanuelle Thanks for the prompt review! I pushed a commit to be more explicit about basic vs custom symbols- please let me know what you think.

emmanuelle · 2020-02-14T14:11:23Z

doc/python/marker-style.md

+fig.update_yaxes(showticklabels=False)
+
+for index in range(27):
+    fig.add_trace(go.Scatter(x=[(index % 30)], y=[index // 30], 


I would use 6 here instead of 30 so that the symbols appear on several lines.

emmanuelle · 2020-02-14T14:12:02Z

doc/python/marker-style.md

+for index in range(27):
+    fig.add_trace(go.Scatter(x=[(index % 30)], y=[index // 30], 
+                             marker_symbol=index, marker_color='black', 
+                             marker_size=10, showlegend=False, hovertext=index))


If you're not tired of me nitpicking you could use a hovertemplate here to show just the index, not the coordinates.

emmanuelle · 2020-02-14T14:12:44Z

doc/python/marker-style.md

+fig.show()    
+```
+
+#### Custom Symbols


Suggested change

#### Custom Symbols

#### All Symbols

jdamiba · 2020-02-14T17:33:34Z

superseded by #2197

nicolaskruchten and others added 24 commits January 24, 2020 12:40

Merge branch 'doc-prod'

42746dc

added some items in release process notes

ff4df85

mention getting-started

2b06173

changed order of imports for better error messages (#2132)

7483fbb

Merge branch 'doc-prod'

d14d842

tweaks to make flake8 happy

d7fc1bc

g -> trace_data

e9fa00d

k -> attr_name

ca87353

v -> attr_value

e7ced12

v_label -> attr_label

94303bc

result -> trace_patch

95f78c2

Merge pull request #2135 from plotly/cleanup

4bf740b

PX internals renaming

Merge pull request #2128 from plotly/contributing

51fa1ee

added some items in release process notes

Sunburst improvements (#2133)

f7dc2be

* color column now appears in hover * corrected bug: path column can be numeric

prevent creation of new px.default properties at run time

00c3238

prevent creation of new px.default properties at run time

0eda9f8

run black

633c2da

add test for permissive defaults

bae0483

formatting

58aeb32

formatting

756f09b

make sure new test is picked up by pytest

bdda851

Merge pull request #2183 from plotly/px-permissive-defaults

f4a005d

prevent the creation of new px.default properties at run time

add marker symbol example

ca903a4

jdamiba changed the base branch from master to doc-prod February 12, 2020 18:36

fix typo

061afb5

jdamiba requested a review from emmanuelle February 12, 2020 18:38

emmanuelle reviewed Feb 13, 2020

View reviewed changes

be more explicit about basic/advanced shapes

fe369aa

Merge branch 'master' into add-marker-symbols

1b32242

emmanuelle reviewed Feb 14, 2020

View reviewed changes

doc/python/marker-style.md

fig.show()

```

#### Custom Symbols

Copy link

Contributor

emmanuelle Feb 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

#### Custom Symbols

#### All Symbols

jdamiba mentioned this pull request Feb 14, 2020

add examples for customizing marker symbols #2197

Merged

jdamiba closed this Feb 14, 2020

nicolaskruchten deleted the add-marker-symbols branch June 19, 2020 16:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add marker symbols example #2188

Add marker symbols example #2188

Uh oh!

jdamiba commented Feb 12, 2020 •

edited

Loading

Uh oh!

emmanuelle left a comment

Uh oh!

emmanuelle Feb 13, 2020

Uh oh!

emmanuelle Feb 13, 2020

Uh oh!

emmanuelle Feb 13, 2020

Uh oh!

emmanuelle commented Feb 13, 2020

Uh oh!

emmanuelle commented Feb 13, 2020

Uh oh!

jdamiba commented Feb 13, 2020

Uh oh!

emmanuelle Feb 14, 2020

Uh oh!

emmanuelle Feb 14, 2020

Uh oh!

emmanuelle Feb 14, 2020

Uh oh!

jdamiba commented Feb 14, 2020

Uh oh!

Uh oh!


		The `marker_symbol` attribute allows you to customize the symbol used to represent markers.

		In the following figure, hover over a symbol to see its name. Set the `marker_symbol` attribute equal to that name to change the marker symbol in your figure.

Uh oh!

Add marker symbols example #2188

Add marker symbols example #2188

Uh oh!

Conversation

jdamiba commented Feb 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emmanuelle left a comment

Choose a reason for hiding this comment

Uh oh!

emmanuelle Feb 13, 2020

Choose a reason for hiding this comment

Uh oh!

emmanuelle Feb 13, 2020

Choose a reason for hiding this comment

Uh oh!

emmanuelle Feb 13, 2020

Choose a reason for hiding this comment

Uh oh!

emmanuelle commented Feb 13, 2020

Uh oh!

emmanuelle commented Feb 13, 2020

Uh oh!

jdamiba commented Feb 13, 2020

Uh oh!

emmanuelle Feb 14, 2020

Choose a reason for hiding this comment

Uh oh!

emmanuelle Feb 14, 2020

Choose a reason for hiding this comment

Uh oh!

emmanuelle Feb 14, 2020

Choose a reason for hiding this comment

Uh oh!

jdamiba commented Feb 14, 2020

Uh oh!

Uh oh!

jdamiba commented Feb 12, 2020 •

edited

Loading