Showing a TreeMap plot: What am I doing wrong?

Anvil Q&A
1

I am trying to display a TreeMap, of the type shown here https://plotly.com/python/treemaps/, the last one at the bottom ''Controlling text fontsize with uniformtext.

Serverside code graph_data just reads the URL for the coffee data values, that seems to work fine getting the data back. The code runs silently, but only displays a weird narrow vertical bar with y-axis labels -1 to 4 (!) which as far as I can tell aren’t even part of the specification at all (below). Any plot expert here can steer me right? (There is no other server code nor elements in the display for this test)

Code Sample:

    # Any code you write here will run when the form opens.
  def plot_1_show(self, **event_args):

      ids, labels, parents =  anvil.server.call('graph_data')
      fig = go.Treemap(
      ids = ids,
      labels = labels,
      parents = parents,
      pathbar_textfont_size=15,
      root_color="lightgrey"
      )
      self.plot_1.visible = True
      self.plot_1.height = "500"
      self.plot_1.spacing_above = "small"
      self.plot_1.spacing_below = "small"
      self.plot_1.figure = fig
2

This is what it should look like:

coffee
coffee3376×1564 367 KB

3

This is what it does look like:

weirdbar
weirdbar1792×1018 5 KB

4

Have you printed out what results you are getting from your server function? My guess without seeing a clone of the app is that the Server function has a bug where it isn’t returning what you need it to.

5

Thank you, here is the server function:

6

@anvil.server.callable
def graph_data():
df = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/96c0bd/sunburst-coffee-flavors-complete.csv’)
return list(df.ids), list(df.labels), list(df.parents)

7

It does seem to return everything as expected:

[‘Coffee’, ‘Aromas’, ‘Tastes’, ‘Aromas-Enzymatic’, ‘Aromas-Sugar Browning’, ‘Aromas-Dry Distillation’, ‘Tastes-Bitter’, ‘Tastes-Salt’, ‘Tastes-Sweet’, ‘Tastes-Sour’, ‘Enzymatic-Flowery’, ‘Enzymatic-Fruity’, ‘Enzymatic-Herby’, ‘Sugar Browning-Nutty’, ‘Sugar Browning-Carmelly’, ‘Sugar Browning-Chocolatey’, ‘Dry Distillation-Resinous’, ‘Dry Distillation-Spicy’, ‘Dry Distillation-Carbony’, ‘Bitter-Pungent’, ‘Bitter-Harsh’, ‘Salt-Sharp’, ‘Salt-Bland’, ‘Sweet-Mellow’, ‘Sweet-Acidy’, ‘Sour-Winey’, ‘Sour-Soury’, ‘Flowery-Floral’, ‘Flowery-Fragrant’, ‘Fruity-Citrus’, ‘Fruity-Berry-like’, ‘Herby-Alliaceous’, ‘Herby-Leguminous’, ‘Nutty-Nut-like’, ‘Nutty-Malt-like’, ‘Carmelly-Candy-like’, ‘Carmelly-Syrup-like’, ‘Chocolatey-Chocolate-like’, ‘Chocolatey-Vanilla-like’, ‘Resinous-Turpeny’, ‘Resinous-Medicinal’, ‘Spicy-Warming’, ‘Spicy-Pungent’, ‘Carbony-Smokey’, ‘Carbony-Ashy’, ‘Pungent-Creosol’, ‘Pungent-Phenolic’, ‘Harsh-Caustic’, ‘Harsh-Alkaline’, ‘Sharp-Astringent’, ‘Sharp-Rough’, ‘Bland-Neutral’, ‘Bland-Soft’, ‘Mellow-Delicate’, ‘Mellow-Mild’, ‘Acidy-Nippy’, ‘Acidy-Piquant’, ‘Winey-Tangy’, ‘Winey-Tart’, ‘Soury-Hard’, ‘Soury-Acrid’, ‘Floral-Coffee Blossom’, ‘Floral-Tea Rose’, ‘Fragrant-Cardamon Caraway’, ‘Fragrant-Coriander Seeds’, ‘Citrus-Lemon’, ‘Citrus-Apple’, ‘Berry-like-Apricot’, ‘Berry-like-Blackberry’, ‘Alliaceous-Onion’, ‘Alliaceous-Garlic’, ‘Leguminous-Cucumber’, ‘Leguminous-Garden Peas’, ‘Nut-like-Roasted Peanuts’, ‘Nut-like-Walnuts’, ‘Malt-like-Balsamic Rice’, ‘Malt-like-Toast’, ‘Candy-like-Roasted Hazelnut’, ‘Candy-like-Roasted Almond’, ‘Syrup-like-Honey’, ‘Syrup-like-Maple Syrup’, ‘Chocolate-like-Bakers’, ‘Chocolate-like-Dark Chocolate’, ‘Vanilla-like-Swiss’, ‘Vanilla-like-Butter’, ‘Turpeny-Piney’, ‘Turpeny-Blackcurrant-like’, ‘Medicinal-Camphoric’, ‘Medicinal-Cineolic’, ‘Warming-Cedar’, ‘Warming-Pepper’, ‘Pungent-Clove’, ‘Pungent-Thyme’, ‘Smokey-Tarry’, ‘Smokey-Pipe Tobacco’, ‘Ashy-Burnt’, ‘Ashy-Charred’] [‘Coffee Flavors’, ‘Aromas’, ‘Tastes’, ‘Enzymatic’, ‘Sugar Browning’, ‘Dry Distillation’, ‘Bitter’, ‘Salt’, ‘Sweet’, ‘Sour’, ‘Flowery’, ‘Fruity’, ‘Herby’, ‘Nutty’, ‘Carmelly’, ‘Chocolatey’, ‘Resinous’, ‘Spicy’, ‘Carbony’, ‘Pungent’, ‘Harsh’, ‘Sharp’, ‘Bland’, ‘Mellow’, ‘Acidy’, ‘Winey’, ‘Soury’, ‘Floral’, ‘Fragrant’, ‘Citrus’, ‘Berry-like’, ‘Alliaceous’, ‘Leguminous’, ‘Nut-like’, ‘Malt-like’, ‘Candy-like’, ‘Syrup-like’, ‘Chocolate-like’, ‘Vanilla-like’, ‘Turpeny’, ‘Medicinal’, ‘Warming’, ‘Pungent’, ‘Smokey’, ‘Ashy’, ‘Creosol’, ‘Phenolic’, ‘Caustic’, ‘Alkaline’, ‘Astringent’, ‘Rough’, ‘Neutral’, ‘Soft’, ‘Delicate’, ‘Mild’, ‘Nippy’, ‘Piquant’, ‘Tangy’, ‘Tart’, ‘Hard’, ‘Acrid’, ‘Coffee Blossom’, ‘Tea Rose’, ‘Cardamon Caraway’, ‘Coriander Seeds’, ‘Lemon’, ‘Apple’, ‘Apricot’, ‘Blackberry’, ‘Onion’, ‘Garlic’, ‘Cucumber’, ‘Garden Peas’, ‘Roasted Peanuts’, ‘Walnuts’, ‘Balsamic Rice’, ‘Toast’, ‘Roasted Hazelnut’, ‘Roasted Almond’, ‘Honey’, ‘Maple Syrup’, ‘Bakers’, ‘Dark Chocolate’, ‘Swiss’, ‘Butter’, ‘Piney’, ‘Blackcurrant-like’, ‘Camphoric’, ‘Cineolic’, ‘Cedar’, ‘Pepper’, ‘Clove’, ‘Thyme’, ‘Tarry’, ‘Pipe Tobacco’, ‘Burnt’, ‘Charred’] [nan, ‘Coffee’, ‘Coffee’, ‘Aromas’, ‘Aromas’, ‘Aromas’, ‘Tastes’, ‘Tastes’, ‘Tastes’, ‘Tastes’, ‘Aromas-Enzymatic’, ‘Aromas-Enzymatic’, ‘Aromas-Enzymatic’, ‘Aromas-Sugar Browning’, ‘Aromas-Sugar Browning’, ‘Aromas-Sugar Browning’, ‘Aromas-Dry Distillation’, ‘Aromas-Dry Distillation’, ‘Aromas-Dry Distillation’, ‘Tastes-Bitter’, ‘Tastes-Bitter’, ‘Tastes-Salt’, ‘Tastes-Salt’, ‘Tastes-Sweet’, ‘Tastes-Sweet’, ‘Tastes-Sour’, ‘Tastes-Sour’, ‘Enzymatic-Flowery’, ‘Enzymatic-Flowery’, ‘Enzymatic-Fruity’, ‘Enzymatic-Fruity’, ‘Enzymatic-Herby’, ‘Enzymatic-Herby’, ‘Sugar Browning-Nutty’, ‘Sugar Browning-Nutty’, ‘Sugar Browning-Carmelly’, ‘Sugar Browning-Carmelly’, ‘Sugar Browning-Chocolatey’, ‘Sugar Browning-Chocolatey’, ‘Dry Distillation-Resinous’, ‘Dry Distillation-Resinous’, ‘Dry Distillation-Spicy’, ‘Dry Distillation-Spicy’, ‘Dry Distillation-Carbony’, ‘Dry Distillation-Carbony’, ‘Bitter-Pungent’, ‘Bitter-Pungent’, ‘Bitter-Harsh’, ‘Bitter-Harsh’, ‘Salt-Sharp’, ‘Salt-Sharp’, ‘Salt-Bland’, ‘Salt-Bland’, ‘Sweet-Mellow’, ‘Sweet-Mellow’, ‘Sweet-Acidy’, ‘Sweet-Acidy’, ‘Sour-Winey’, ‘Sour-Winey’, ‘Sour-Soury’, ‘Sour-Soury’, ‘Flowery-Floral’, ‘Flowery-Floral’, ‘Flowery-Fragrant’, ‘Flowery-Fragrant’, ‘Fruity-Citrus’, ‘Fruity-Citrus’, ‘Fruity-Berry-like’, ‘Fruity-Berry-like’, ‘Herby-Alliaceous’, ‘Herby-Alliaceous’, ‘Herby-Leguminous’, ‘Herby-Leguminous’, ‘Nutty-Nut-like’, ‘Nutty-Nut-like’, ‘Nutty-Malt-like’, ‘Nutty-Malt-like’, ‘Carmelly-Candy-like’, ‘Carmelly-Candy-like’, ‘Carmelly-Syrup-like’, ‘Carmelly-Syrup-like’, ‘Chocolatey-Chocolate-like’, ‘Chocolatey-Chocolate-like’, ‘Chocolatey-Vanilla-like’, ‘Chocolatey-Vanilla-like’, ‘Resinous-Turpeny’, ‘Resinous-Turpeny’, ‘Resinous-Medicinal’, ‘Resinous-Medicinal’, ‘Spicy-Warming’, ‘Spicy-Warming’, ‘Spicy-Pungent’, ‘Spicy-Pungent’, ‘Carbony-Smokey’, ‘Carbony-Smokey’, ‘Carbony-Ashy’, ‘Carbony-Ashy’]

8

Can I paste clone link here?

9

yep, like in this doc:

(Or if you’re using the Beat editor, just switch to the Beta doc page)

10

https://anvil.works/build#clone:IZTUKSFHBSNY5V7R=2GV3LCP4KPEN4HD6LISLHUYY

11

I was hoping that this kind of TreeMap display is so compelling that, if we can get it running, it might be of user or at least interest to others here…

12

In Anvil - It’s almost always better to use self.plot_1.data and self.plot_1.layout separately as opposed to self.plot_1.figure.

Changing your code to

self.plot_1.data = go.Treemap(...)

What you wrote should work so we’ll look into it our end.

13

Still not working with:

# Any code you write here will run when the form opens.

def plot_1_show(self, **event_args):

ids, labels, parents =  anvil.server.call('graph_data')

self.plot_1.data = go.Treemap(
ids = ids,
labels = labels,
parents = parents,
pathbar_textfont_size=15,
root_color="lightgrey"
)
14

(There was some confusion about ‘TreeMap’ vs ‘treemap’ vs ‘Treemap’. The above ‘Treemap’ is the only version that will compile silently, but also when run fails silently as just a blank gray washout in the display area)

15

Here is the clone working for me:
https://anvil.works/build#clone:KBQDDXD7UUMJR6KT=27AXAHHMZ6VHVDXH67S4NC54

16

WOW amazing! Your version WORKS GREAT when I ‘Run’ it under your ‘old editor’ but exact same clone FAIL TOALLY (gray goo) when I run it under ‘Beta editor’. WTF? I must have a corrupted version of something somewhere, but anyway THANK YOU SO MUCH!!

17

A post was split to a new topic: [Beta] Plotly loading treemap