How do the graphs displayed in the visualization graphs work?

[n-srinidhi]

Hi! I'm using the visualization card to display line graphs for different categories of data. Data is spread across last few months. I have attached a sample subset of the data. While the scales of the data might be different, I am unable to interpret how it is represented.

Following are the images of the final graphs on the dashboard, selecting few categories at a time to selecting all:

I want the individual scales and trends of the data for each category to be retained while displaying all categories together.

[mturoci]

I am not sure I understand what you are asking. The plots render depending on what data you pass.

[n-srinidhi]

I have just selected individual series at a time to display the series for each category. Take a look at the first and the last graph for instance. You can see the pattern for currencies and shares individually, However when all categories are shown together in the series, The two series somehow merge with the other categories. So the pattern or graph for each category isn't visible.

[mturoci]

Can you share a min repro code? It's either a data problem or a Wave bug.

[n-srinidhi]

Hi! I created a small sample wave app, with only the said visualization graph, and data I am currently using.

from h2o_wave import Q,ui, main,data, app, handle_on, on ,copy_expando

async def initialize_app(q: Q):
    """
    Initialize the app.
    """

    # Add app-level initialization logic here (loading datasets, database connections, etc.)
    q.app.cards=['header','meta','content']
    
    # Mark as initialized at the app level (global to all clients)
    q.app.initialized = True

async def initialize_client(q:Q):
    """
    Initialize the client browser tab
    """
    #Add layouts,header
    q.page['meta']=ui.meta_card(
        box='',
        title='Sample App',
        layouts=[
                ui.layout(
                breakpoint='xl',
                zones=[
                    ui.zone(name='header'),
                    ui.zone(name='content'),
                ])
                ]
        ,
        icon='AnalyticsView',
        )
    q.page['header']=ui.header_card(
        box='header',
        title='Sample App',
        subtitle='',
        icon='AnalyticsView',
        icon_color='#720d6d',
        color='transparent',
    )
    trade_data=[
        (1, 'Indices', 383017.0),
  (6, 'Crypto', 571484.6950000001),
  (6, 'Currencies', 17.428802),
  (7, 'Crypto', 367725.75),
  (7, 'Currencies', 0.3782759),
  (7, 'Indices', 6334509.0),
  (7, 'Shares', 182573.54415000003),
  (8, 'Commodities', 1646922.4),
  (8, 'Crypto', 825136.0708),
  (8, 'Currencies', 739358.2807000001),
  (8, 'Indices', 17655920.0),
  (8, 'Shares', 231460.28),
  (9, 'Commodities', 220947.5),
  (9, 'Crypto', 395175.80000000005),
  (9, 'Currencies', 8559939.351),
  (9, 'Indices', 3691850.0),
  (9, 'Shares', 633362.8800000001),
  (10, 'Commodities', 3635525595.4616),
  (10, 'Crypto', 2849947.2942),
  (10, 'Currencies', 34963682.921318),
  (10, 'Indices', 152148024.9),
  (10, 'Shares', 2776475.1875),
  (11, 'Commodities', 93437116.89),
  (11, 'Crypto', 1006235.7000000002),
  (11, 'Currencies', 1067026.9789500001),
  (11, 'Indices', 79414693.544),
  (11, 'Shares', 10198774.870801002),
  (12, 'Commodities', 13142828.70328),
  (12, 'Crypto', 43939.12300000001),
  (12, 'Currencies', 23416597.5),
  (12, 'Indices', 48624755.495),
  (12, 'Shares', 2610.3500000000004)
    ]
    q.page['tradeV_dash']=ui.form_card(
            box=ui.box(zone='content'),
            items=[
                ui.inline(
                    items=[
                        ui.text_m(content='Traded Value by Asset Type'),
                    ],align='start',justify='between' 
                ),
                ui.separator(),
                ui.visualization(name='tr_overall',
                    data=data('Month_Convert Asset_Type Value',rows=trade_data,pack=True),
                    plot=ui.plot([
                        ui.mark(type='point', x='=Month_Convert', y='=Value',stack='auto', color='=Asset_Type',y_min=0),
                        ui.mark(type='line', x='=Month_Convert', y='=Value',stack='auto', color='=Asset_Type',y_min=0,curve='smooth')
                     ]), 
                    interactions=['scale_zoom','drag_move','brush']
                    ),
                ]
                )

    await q.page.save()
    q.client.initialized = True

    # Save the page
    await q.page.save()


@app('/sample',mode='multicast')
async def serve(q:Q):

    #Initialize the app if not already initialized
        if not q.app.initialized:
            await initialize_app(q)

        # Initialize the client (browser tab) if not already
        if not q.client.initialized:
            await initialize_client(q)
        await q.page.save()


    

    

It looks likes the scales are getting readjusted, as you add more series to the visualization card.

[n-srinidhi]

@mturoci Hi, Did you get a chance to check this?

[mturoci]

the pattern for currencies and shares individually, However when all categories are shown together in the series, The two series somehow merge with the other categories

Yes, that's correct. Have a look at your data, there are extreme jumps between values in terms of numerals. The plot displays data as provided.

[n-srinidhi]

Yes, that's correct. Have a look at your data, there are extreme jumps between values in terms of numerals. The plot displays data as provided.

This is quite possible, Since each category has different scales at times. Is there a neater way to represent this?

[mturoci]

Is there a neater way to represent this?

Data normalization, just throw out outliers and you should be good.