Sparklines Figure Factory #888

Kully · 2017-11-29T20:30:27Z

you can set column_widths (like in go.Table) with a list [1, 4, 2, ...]
you set the chart types with a list: i.e. the one above is produced with chart_types=['name', 'bullet', 'line', 'avg', 'bar']

# TODO:
# add  more color variety
# add tests

any suggestions?

Kully · 2017-11-29T20:35:23Z

Playing around with the column_width param:

fig = ff.create_sparkline(
    df, chart_types=['name', 'bullet', 'bar'],
    column_width=[1, 7, 10], left_aligned=False
)
py.iplot(fig, filename='my-sparkline-obvious-column-widths')

https://plot.ly/~AdamKulidjian/5610

Picture:

jackparmer · 2017-11-30T22:00:36Z

Looks like they're on the right track! You happy with them?

Can you do a lines example? For example, can you recreate this?

I think there's more vertical and horizontal padding needed between the subplots:

Can you also try adding an option to alternate row color? As a sort of benchmark, see how close you can get to this:

(From Stephen's blog)

Kully · 2017-12-08T20:56:54Z

Some of the possibilities:

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/Canada%20Immigration.csv')

fig = ff.create_sparkline(
    df, chart_types=['name', 'line', 'bullet', 'bar'],
    textalign='center', show_titles=True,
    horizontal_spacing=0, alternate_row_color=True,
    lane_colors=('rgba(251, 252, 230, 0.6)',
                 'rgba(255, 245, 219, 0.6)'),
    title=''
)
py.iplot(fig)

|
V

Kully · 2017-12-11T17:12:28Z

@chriddyp and @cldougl ready for a review when tests pass 😛

chriddyp · 2017-12-11T17:51:26Z

@Kully - do you have a sample notebook or documentation that shows how this works?

jackparmer · 2017-12-11T18:22:54Z

A link to a sample notebook on plotly or nbviewer would be really great

…

On Mon, Dec 11, 2017 at 12:51 PM, Chris Parmer ***@***.***> wrote: @Kully <https://github.com/kully> - do you have a sample notebook or documentation that shows how this works? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#888 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABx4aoN2n8Hn_HYOFZziYrWoPFhrcTQ6ks5s_WuggaJpZM4QvlNG> .

Kully · 2017-12-11T19:48:25Z

@Kully - do you have a sample notebook or documentation that shows how this works?

I'll make one now. Caught another bug in the FF so I'll deal with that first

Kully · 2017-12-12T23:06:08Z

@jackparmer @chriddyp
here's a notebook with nearly all the features of the ff: https://plot.ly/~AdamKulidjian/6128

jackparmer · 2017-12-12T23:33:37Z

This looks really nice. Nice work. A few small suggestions and usage questions that jumped out at me:

Maybe label instead of name
text_align instead of textalign to match the other kwargs
Maybe row instead of lane and row_colors instead of lane_colors?
What is colors? Maybe rename this sparkline_colors or trace_colors?
Is column_width using a grid system (eg column_width=[1, 13] and column_width=[1, 4, 4])? I can't figure it out. Should it be absolute pixels instead?
The mpg.csv example is great!

jackparmer · 2017-12-12T23:38:51Z

It would nice if colors supported varying trace colors by row (such as in the plot below). I'm also thinking layouts like all of the row traces are grey except the 49th one, which is red.

Kully · 2017-12-12T23:41:27Z

Is column_width using a grid system (eg column_width=[1, 13] and column_width=[1, 4, 4])? I can't figure it out. Should it be absolute pixels instead?

column_width comes from the go.Table param of the same name (actually columnwidth) and which is now a new param in tls.make_subplots. It's a ratio assigned for each column. So [1, 2] for a 2-column subplot means column 1 gets 1/3 of the width and column 2 gets 2/3 of the total width.

Kully · 2017-12-13T20:50:25Z

It would nice if colors supported varying trace colors by row (such as in the plot below). I'm also thinking layouts like all of the row traces are grey except the 49th one, which is red.

We could do something simple like alternating through the Plotly colors if the user wants changing trace colors. But we'll run out quickly for large enough figures.

How do you feel about
a) interpolating between existing plotly colors when we go through all 10
b) being able to enter a Plotly Colorscale name and the traces getting their own equally spaced color within the colorspectrum of that colorscale

I have all this machinery to do this stuff easily 🎰

being able to assign all N colors for N rows

jackparmer · 2017-12-13T21:09:42Z

You already have colors which seems to take a list of 2 colors (Is that correct, these 2 colors are primary and secondary trace colors for each row?). What if colors could also take a list of list of colors. For example:

What you have now:

colors = ['#e763fa', '#ab63fa']

Same as what you have now, but alternates primary and secondary trace colors by row:

colors =[['#e763fa', '#ab63fa'], ['#636efa', '#EF553B']]

Traces of every 3rd row are red (other traces are grey):

colors =[['#444', '#ccc'], ['#444', '#ccc'], ['#ff0000', '#ff0000',]]

1D lists longer than 2 elements are the primary trace color for each row, so this could be a colorscale

colors=['#00cc96', '#00cc96', '#00cc96']
Could set the secondary color as 0.5 x opacity of the primary color, like area chart fills?

interpolating between existing plotly colors when we go through all 10

I think if given an array, we should cycle instead of interpolate. This is what table does and I don't see much use for sequential or diverging color scale rows.

Maybe try this idea out and see if you can replicate something like:

Kully · 2017-12-14T17:45:38Z

Maybe try this idea out and see if you can replicate something like:

I like this whole idea. It covers all the bases, including first 48 rows grey and last one red

Kully · 2017-12-14T18:31:06Z

1D lists longer than 2 elements are the primary trace color for each row, so this could be a colorscale

My thoughts on this now are that users will more often than not, not want to specify the second color and will be okay with a light color as half the opacity of the main. Why don't we:

allow users to input lists like:

trace_colors =[['#e763fa', '#ab63fa'], 'rgb(240, 10, 14)', ['#636efa', '#EF553B'], '#636efa']

and we

interpret each nested single color as the primary color of that row

and

treat the nested lists as the obvious darklight color combo

Kully · 2017-12-14T20:57:56Z

@jackparmer new notebook of charts/features: https://plot.ly/~AdamKulidjian/6215

Kully · 2017-12-14T21:12:32Z

@chriddyp ready for a review (when tests pass)

cldougl · 2017-12-11T19:26:51Z

plotly/figure_factory/_sparkline.py

+        Applied to all rows
+    :param (float) alternate_row_color: set to True to enable the alternate
+        row coloring of the chart. Uses the colors from param 'lane_colors'
+    :param (list) lane_colors: a list/tuple of two colors that are used to


I think it would be helpful to add the default colors here

cldougl · 2017-12-14T21:18:17Z

plotly/figure_factory/_sparkline.py

+        Applied to all columns
+    :param (float) vertical_spacing: Space between subplot rows.
+        Applied to all rows
+    :param (float) alternate_row_color: set to True to enable the alternate


Is this a float or a bool? can the default (True) be included here too?

cldougl · 2017-12-14T21:18:45Z

plotly/figure_factory/_sparkline.py

+        Applied to all rows
+    :param (float) alternate_row_color: set to True to enable the alternate
+        row coloring of the chart. Uses the trace_colors from param 'row_colors'
+    :param (list) row_colors: a list/tuple of colors that are used to


maybe include the default here too

I'll include more of the defaults

Kully · 2018-01-15T22:29:08Z

@chriddyp so I like most of your suggestions, but I found something that may pose a problem.

The entire code in facet_grid is partitioned in terms of what kind of color you are using: colorscale name (ex Viridis), or the column name for color. I was using a new syntax for color in the _sparkline FF I was working on, something like:

colors =[['#444', '#ccc'], ['#444', '#ccc'], ['#ff0000', '#ff0000',]]

I really want to keep this method for coloring (first column gets first list: [lightcolor, darkcolor]) What do you think?

Kully · 2018-01-15T22:45:18Z

There's also the issue of the other way in which a user can use sparklines, which is just giving the API a dataframe, and then just mapping each column to a row and entering charts based on a chart_types variable. The current structure of facet grids doesn't allow this to be naturally added in, and it's gonna take a lot of extra rewritting to make that work.

For these two reasons, I think it would make more sense to keep sparklines as its own FigureFactory, but perhaps to also change the variable names in sparklines to match those in facet_grid.

But you do make good points about the familiarity of the already existing FF and building on top of it.

Any thoughts?

Kully · 2018-04-09T17:57:49Z

Kully · 2018-04-23T17:20:54Z

For the Bullet Charts in this FF:

I am redefining the various elements in the ones that are displayed in sparklines. Since we are using 1D data, there is only so much we can do.

Bullet charts were made for the purpose of comparing a performance (thin dark line) to a target (the vertical bar marker) with gradated qualitative sections representing BAD, OK, GOOD, etc.

I think we could pull off something with 1D data that is interesting. How about the max value is the vertical marker, the thin black bar is the mean and we only have one thick bar which is the standard dev?

WDYT?
cc. @jackparmer @chriddyp

jackparmer · 2018-04-23T21:09:45Z

How about the max value is the vertical marker, the thin black bar is the mean and we only have one thick bar which is the standard dev?

Hm... toughy. What about leaving it to the user to define what these things mean? They'll have to calculate mean, max, etc on their own, but this would provide the most flexibility and forward compatibility.

Kully · 2018-04-23T21:47:19Z

Hm... toughy. What about leaving it to the user to define what these things mean?

While it's more robust, I don't like what this will mean for users who just want a quick and dirty bullet chart. What would the syntax for that look like?

jackparmer · 2018-04-23T21:48:54Z

Yeah, I can see that. Let's go with your proposal - I think it's totally reasonable. 👍

merge from new plotly 3.0 master

jonmmease · 2018-09-28T14:14:35Z

Hi @Kully , I haven't read through this PR thread yet, but is this something you're planning to keep working on?

Kully · 2018-09-28T17:23:50Z

but is this something you're planning to keep working on?

Yes

JeroneGagliano · 2019-01-16T18:32:09Z

Do you have a timeline on when this PR will be merged with the master branch?
Thanks!

JeroneGagliano · 2019-05-08T13:53:27Z

Hi @Kully , I haven't read through this PR thread yet, but is this something you're planning to keep working on?

Hi @jonmmease
Adam Kulidjian says he is no longer working on this Sparklines addition to the Figure Factory. Is someone else picking this up?
Thanks
Jerone

JeroneGagliano · 2019-05-14T14:31:41Z

@chriddyp and @jonmmease
I have pulled Kully's latest commit 8d665ac imported it and had success running his the first few examples after fixing a couple of errors in the sparklines.py file. As an engineer, and not a real programmer, I am not comfortable finishing sparklines-ff to merge into master. I would be happy to participate in testing and passing along the code errors I found.

nicolaskruchten · 2019-09-11T13:55:27Z

I think this kind of thing is easier to make now with make_subplots and indicator and px and Dash, so I'm going to close out this PR for now.

firmai · 2021-06-21T07:52:51Z

Hi @nicolaskruchten , In finance (currently) at least, you can't build a state of the art dashboard without sparklines see e.g, yahoo. https://finance.yahoo.com/world-indices/

At which point would we be able to build something similar using make_subplots and indicator and px and Dash? Is this currently a wip?

nicolaskruchten · 2021-06-23T12:25:39Z

These kinds of tables are quite common, but IMO a data visualization library such as plotly is a poor fit for generating the whole thing. Dash is what I would recommend for doing this kind of thing in Python, specifically the Dash DataTable. Sparklines are currently supported there via this approach: https://community.plotly.com/t/sparklines-as-fonts-embedding-minimal-sparklines-in-tables-components/39468

firmai · 2021-07-07T05:34:08Z

Thanks, I tried dash, it unfortunately doesn't work, I get about 20% there after 3 days spent. Hopefully at some point a company could sponsor this so that it can be open sourced. @Kully was approaching something interesting, a templatable framework that could be used by ordinary users.

Kully added 4 commits November 20, 2017 15:20

add annotations func to utils in figure_factory

ba423d5

fix annotation function for subplot_spacing==0

3c5990a

merge master in

71b3510

add sparkline file and import in __init__

85ebed6

Kully added 2 commits November 30, 2017 14:24

added colors and finished up tests

590330b

add sparkline file

c65886b

Kully added 2 commits December 8, 2017 15:26

added alternate row colors and cleaned up tests

f194fa4

default horizontal_spacing to 0.0

50a78e3

Kully added 2 commits December 11, 2017 12:01

disabled zoom

002d30e

update tests

9c0953f

scatter_options affect line and bullet minicharts

8d5b114

reworked row_colors and trace_colors to be robust

20e98be

cldougl reviewed Dec 14, 2017

View reviewed changes

merge master in

ccf200f

Kully added 3 commits April 9, 2018 14:23

starting on theme=sparkliens

4d44d8a

column_width param

5b30086

alternate colors working

8a21ff7

function to handle trace creation in _facet_grid

8080bec

Kully added 4 commits May 3, 2018 13:44

working on ranges for string data

77add69

merge in ipyplotly_integration

4a90396

Merge branch 'master' into sparklines-ff

6425081

merge from new plotly 3.0 master

rewrite shapes and annotations sections for new tuple format

8d665ac

jonmmease mentioned this pull request Sep 22, 2018

Workflow for displaying multiple small graphs in notebook with expansion/details on click #393

Closed

jonmmease added the question label Sep 28, 2018

jonmmease removed the question label Oct 2, 2018

nicolaskruchten closed this Sep 11, 2019

nicolaskruchten deleted the sparklines-ff branch June 19, 2020 16:10

Uh oh!

Sparklines Figure Factory #888

Sparklines Figure Factory #888

Uh oh!

Conversation

Kully commented Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kully commented Nov 29, 2017

Uh oh!

jackparmer commented Nov 30, 2017

Uh oh!

Kully commented Dec 8, 2017

Uh oh!

Kully commented Dec 11, 2017

Uh oh!

chriddyp commented Dec 11, 2017

Uh oh!

jackparmer commented Dec 11, 2017 via email

Uh oh!

Kully commented Dec 11, 2017

Uh oh!

Kully commented Dec 12, 2017

Uh oh!

jackparmer commented Dec 12, 2017 • edited by Kully Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jackparmer commented Dec 12, 2017

Uh oh!

Kully commented Dec 12, 2017

Uh oh!

Kully commented Dec 13, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jackparmer commented Dec 13, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What you have now:

Same as what you have now, but alternates primary and secondary trace colors by row:

Traces of every 3rd row are red (other traces are grey):

1D lists longer than 2 elements are the primary trace color for each row, so this could be a colorscale

Uh oh!

Kully commented Dec 14, 2017

Uh oh!

Kully commented Dec 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kully commented Dec 14, 2017

Uh oh!

Kully commented Dec 14, 2017

Uh oh!

cldougl Dec 11, 2017

Choose a reason for hiding this comment

Uh oh!

cldougl Dec 14, 2017

Choose a reason for hiding this comment

Uh oh!

cldougl Dec 14, 2017

Choose a reason for hiding this comment

Uh oh!

Kully Dec 15, 2017

Choose a reason for hiding this comment

Uh oh!

Kully commented Jan 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kully commented Jan 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kully commented Apr 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Goals:

Issues:

Uh oh!

Kully commented Apr 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

For the Bullet Charts in this FF:

Uh oh!

jackparmer commented Apr 23, 2018

Uh oh!

Kully commented Apr 23, 2018

Kully commented Nov 29, 2017 •

edited

Loading

jackparmer commented Dec 12, 2017 •

edited by Kully

Loading

Kully commented Dec 13, 2017 •

edited

Loading

jackparmer commented Dec 13, 2017 •

edited

Loading

Kully commented Dec 14, 2017 •

edited

Loading

Kully commented Jan 15, 2018 •

edited

Loading

Kully commented Jan 15, 2018 •

edited

Loading

Kully commented Apr 9, 2018 •

edited

Loading

Kully commented Apr 23, 2018 •

edited

Loading