From f28ca8c6dba2425f52f60033d5f20d9dc39febca Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 12:32:36 +0100 Subject: [PATCH 01/17] Add original example --- vizro-core/examples/scratch_dev/app.py | 78 +++++++++++++++----------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 84e70e6aa..b99d81da0 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -1,45 +1,59 @@ """Dev app to try things out.""" import pandas as pd +import plotly.graph_objects as go import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -from vizro._themes._color_values import COLORS - -pastry = pd.DataFrame( - { - "pastry": [ - "Scones", - "Bagels", - "Muffins", - "Cakes", - "Donuts", - "Cookies", - "Croissants", - "Eclairs", - "Brownies", - "Tarts", - "Macarons", - "Pies", - ], - "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07], - } -) +from vizro.models.types import capture + + +@capture("graph") +def lollipop(data_frame: pd.DataFrame, x: str, y: str): + """Creates a lollipop chart using Plotly. + + This function generates a scatter chart and then draws lines extending from each point to the x-axis. + + Args: + data_frame (pd.DataFrame): The data source for the chart. + x (str): The column name to be used for the x-axis. + y (str): The column name to be used for the y-axis. + + Returns: + go.Figure: : A Plotly Figure object representing the lollipop chart. + """ + fig = go.Figure() + + # Draw points + fig.add_trace( + go.Scatter( + x=data_frame[x], + y=data_frame[y], + mode="markers", + marker=dict(color="#00b4ff", size=12), + ) + ) + + for i in range(len(data_frame)): + fig.add_trace( + go.Scatter( + x=[0, data_frame[x].iloc[i]], + y=[data_frame[y].iloc[i], data_frame[y].iloc[i]], + mode="lines", + line=dict(color="#00b4ff", width=3), + ) + ) + fig.update_layout(showlegend=False) + return fig + + +gapminder = px.data.gapminder() page = vm.Page( - title="Charts UI", + title="Lollipop", components=[ - vm.Graph( - figure=px.bar( - pastry.sort_values("Profit Ratio"), - orientation="h", - x="Profit Ratio", - y="pastry", - color="Profit Ratio", - color_continuous_scale=COLORS["DIVERGING_RED_CYAN"], - ), - ), + vm.Graph(figure=lollipop(gapminder.query("year == 2007 and gdpPercap > 36000"), y="country", x="gdpPercap")) ], ) From bb0537a59e0ba42d9c6b65b1e835cdae46e7bbbe Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 12:33:18 +0100 Subject: [PATCH 02/17] Add lollipop refactored code --- .../visual-vocabulary/custom_charts.py | 51 +++++++++++++++++++ .../pages/examples/lollipop.py | 29 +++++++++++ 2 files changed, 80 insertions(+) create mode 100644 vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 7e1f26948..12710a54c 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -304,3 +304,54 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure: fig.add_hline(y=0, line_width=2, line_color="grey") return fig + + + +@capture("graph") +def lollipop(data_frame: pd.DataFrame, **kwargs): + """Creates a lollipop based on px.scatter. + + A lollipop chart is a variation of a bar chart where each data point is represented by a line and a dot at the end + to mark the value. + + Inspired by: https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762 + + Args: + data_frame: DataFrame for the chart. Can be long form or wide form. + See https://plotly.com/python/wide-form/. + **kwargs: Keyword arguments to pass into px.scatter (e.g. x, y, labels). + See https://plotly.com/python-api-reference/generated/plotly.scatter.html. + + Returns: + go.Figure: Lollipop chart. + """ + # Should we allow keyword arguments (kwargs) in this context, given the presence of multiple traces? + # Unlike the column_and_line chart, where all traces hold equal significance, here the traces differ in importance. + # The primary scatter plot is the main data visualization, while the additional traces merely serve as connecting lines. + # Therefore, should we apply the kwargs solely to the scatter plot, as illustrated below? + fig = px.scatter(data_frame, **kwargs) + x_array = fig.data[0].x + y_array = fig.data[0].y + + # Is it necessary to always enable orientation? Unlike bar charts, scatter plots do not have an + # orientation argument. The calculation of the trace below needs to adapt based on the orientation. + # However, since we can't predict the user's choice for x and y axes, I am not sure how we can dynamically update + # the orientation. This chart does not always have a categorical and a numerical column. In can also be + # with both numeric columns. Should we introduce this ourselves? Does this have to be part of this example + # or can we hard-code for the visual-vocabulary? + for i in range(len(data_frame)): + fig.add_trace( + go.Scatter( + x=[0, x_array[i]], + y=[y_array[i], y_array[i]], + mode="lines", + ) + ) + + fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) + fig.update_layout(showlegend=False) + + # These are use-case specific layout updates. Normally not suitable for a chart inside vizro.charts, as these + # depend on the data context. + fig.update_layout(yaxis_title="") + return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py new file mode 100644 index 000000000..4d86227ca --- /dev/null +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -0,0 +1,29 @@ +import pandas as pd +import plotly.express as px +import plotly.graph_objects as go +from vizro.models.types import capture + +gapminder = px.data.gapminder() + +@capture("graph") +def lollipop(data_frame: pd.DataFrame, **kwargs): + """Creates a lollipop chart using Plotly.""" + fig = px.scatter(data_frame, **kwargs) + x_array = fig.data[0].x + y_array = fig.data[0].y + + for i in range(len(data_frame)): + fig.add_trace( + go.Scatter( + x=[0, x_array[i]], + y=[y_array[i], y_array[i]], + mode="lines", + ) + ) + + fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) + fig.update_layout(showlegend=False) + fig.update_layout(yaxis_title="") + return fig + +fig = lollipop(data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), y="country", x="gdpPercap") From b90d126747548e4ba3a067dbf1253a7ef7b07d2f Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 12:33:55 +0100 Subject: [PATCH 03/17] Add factory function and add to groups --- .../visual-vocabulary/chart_groups.py | 2 - .../visual-vocabulary/pages/_factories.py | 47 ++++++++++++++++++- .../visual-vocabulary/pages/magnitude.py | 4 +- .../visual-vocabulary/pages/ranking.py | 5 +- 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py index 2896306f8..2ecf566b6 100644 --- a/vizro-core/examples/visual-vocabulary/chart_groups.py +++ b/vizro-core/examples/visual-vocabulary/chart_groups.py @@ -81,7 +81,6 @@ class ChartGroup: incomplete_pages=[ IncompletePage("Ordered bubble"), IncompletePage("Slope"), - IncompletePage("Lollipop"), IncompletePage("Bump"), ], icon="Stacked Bar Chart", @@ -117,7 +116,6 @@ class ChartGroup: pages=pages.magnitude.pages, incomplete_pages=[ IncompletePage("Marimekko"), - IncompletePage("Lollipop"), IncompletePage("Pictogram"), IncompletePage("Bullet"), IncompletePage("Radial"), diff --git a/vizro-core/examples/visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py index 97b4615b5..69a986141 100644 --- a/vizro-core/examples/visual-vocabulary/pages/_factories.py +++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py @@ -7,7 +7,7 @@ import vizro.models as vm from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file -from pages.examples import butterfly, column_and_line, connected_scatter, waterfall +from pages.examples import butterfly, column_and_line, connected_scatter, waterfall, lollipop def butterfly_factory(group: str): @@ -179,3 +179,48 @@ def waterfall_factory(group: str): ), ], ) + + +def lollipop_factory(group: str): + """Reusable function to create the page content for the lollipop chart with a unique ID.""" + return vm.Page( + id=f"{group}-lollipop", + path=f"{group}/lollipop", + title="Lollipop", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a lollipop chart? + + A lollipop chart is a variation of a bar chart where each data point is represented by a line and a + dot at the end to mark the value. It functions like a bar chart but offers a cleaner visual, + especially useful when dealing with a large number of high values, to avoid the clutter of tall columns. + However, it can be less precise due to the difficulty in judging the exact center of the circle. + +   + + #### When should I use it? + + Use a lollipop chart to compare values across categories, especially when dealing with many high values. + It highlights differences and trends clearly without the visual bulk of a bar chart. Ensure clarity by + limiting categories, using consistent scales, and clearly labeling axes. Consider alternatives if + precise value representation is crucial. + """ + ), + vm.Graph(figure=lollipop.fig), + vm.Tabs( + tabs=[ + vm.Container( + title="Vizro dashboard", + components=[make_code_clipboard_from_py_file("lollipop.py", mode="vizro")], + ), + vm.Container( + title="Plotly figure", + components=[make_code_clipboard_from_py_file("lollipop.py", mode="plotly")], + ), + ] + ), + ], + ) diff --git a/vizro-core/examples/visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py index fc3b23337..c89146922 100644 --- a/vizro-core/examples/visual-vocabulary/pages/magnitude.py +++ b/vizro-core/examples/visual-vocabulary/pages/magnitude.py @@ -4,6 +4,7 @@ from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file from pages.examples import bar, magnitude_column, paired_bar, paired_column, parallel_coordinates, radar +from pages._factories import lollipop_factory bar_page = vm.Page( title="Bar", @@ -238,4 +239,5 @@ ], ) -pages = [bar_page, column_page, paired_bar_page, paired_column_page, parallel_coordinates_page, radar_page] +lollipop_page = lollipop_factory("magnitude") +pages = [bar_page, column_page, paired_bar_page, paired_column_page, parallel_coordinates_page, radar_page, lollipop_page] diff --git a/vizro-core/examples/visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py index a788223d7..fa67a8baa 100644 --- a/vizro-core/examples/visual-vocabulary/pages/ranking.py +++ b/vizro-core/examples/visual-vocabulary/pages/ranking.py @@ -4,6 +4,7 @@ from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file from pages.examples import ordered_bar, ordered_column +from pages._factories import lollipop_factory ordered_bar_page = vm.Page( title="Ordered bar", @@ -85,4 +86,6 @@ ) -pages = [ordered_bar_page, ordered_column_page] +lollipop_page = lollipop_factory("deviation") + +pages = [ordered_bar_page, ordered_column_page, lollipop_page] From 7d2f16505afec3d32d0a6c5253749257dd4a8081 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 12:33:59 +0100 Subject: [PATCH 04/17] Update README.md --- .../examples/visual-vocabulary/README.md | 120 +++++++++--------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md index 667742e8c..1ff7e0223 100644 --- a/vizro-core/examples/visual-vocabulary/README.md +++ b/vizro-core/examples/visual-vocabulary/README.md @@ -36,66 +36,66 @@ Credits and sources: The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. -| Chart Type | Status | Category | Credits & sources | API | -| --------------------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Arc | ❌ | Part-to-whole | | | -| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Barcode | ❌ | Distribution | | | -| Beeswarm | ❌ | Distribution | | | -| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | -| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Bubble timeline | ❌ | Time | | | -| Bullet | ❌ | Magnitude | | | -| Bump | ❌ | Ranking | | | -| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Chord | ❌ | Flow | | | -| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | -| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | -| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Cumulative curve | ❌ | Distribution | | | -| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | -| Fan | ❌ | Time | | | -| Flow map | ❌ | Spatial | | | -| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | -| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | -| Gridplot | ❌ | Part-to-whole | | | -| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | -| Correlation matrix | ❌ | Correlation | | | -| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Lollipop | ❌ | Ranking, Magnitude | | | -| Marimekko | ❌ | Magnitude, Part-to-whole | | | -| Network | ❌ | Flow | | | -| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Ordered bubble | ❌ | Ranking | | | -| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | -| Pictogram | ❌ | Magnitude | | | -| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | -| Radial | ❌ | Magnitude | | | -| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | -| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | -| Slope | ❌ | Ranking, Time | | | -| Sparkline | ❌ | Time | | | -| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Surplus deficit line | ❌ | Deviation | | | -| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | -| Venn | ❌ | Part-to-whole | | | -| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | -| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | +| Chart Type | Status | Category | Credits & sources | API | +| --------------------- |---------| ------------------------ |---------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| +| Arc | ❌ | Part-to-whole | | | +| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Barcode | ❌ | Distribution | | | +| Beeswarm | ❌ | Distribution | | | +| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | +| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Bubble timeline | ❌ | Time | | | +| Bullet | ❌ | Magnitude | | | +| Bump | ❌ | Ranking | | | +| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Chord | ❌ | Flow | | | +| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | +| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | +| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Cumulative curve | ❌ | Distribution | | | +| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | +| Fan | ❌ | Time | | | +| Flow map | ❌ | Spatial | | | +| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | +| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | +| Gridplot | ❌ | Part-to-whole | | | +| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | +| Correlation matrix | ❌ | Correlation | | | +| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Marimekko | ❌ | Magnitude, Part-to-whole | | | +| Network | ❌ | Flow | | | +| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Ordered bubble | ❌ | Ranking | | | +| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | +| Pictogram | ❌ | Magnitude | | | +| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | +| Radial | ❌ | Magnitude | | | +| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | +| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | +| Slope | ❌ | Ranking, Time | | | +| Sparkline | ❌ | Time | | | +| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Surplus deficit line | ❌ | Deviation | | | +| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | +| Venn | ❌ | Part-to-whole | | | +| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | +| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | ## How to contribute From 644a9c7841d4a8f6a35ecf8a96d6692064a28f12 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 14 Nov 2024 11:34:46 +0000 Subject: [PATCH 05/17] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../examples/visual-vocabulary/README.md | 120 +++++++++--------- .../visual-vocabulary/custom_charts.py | 1 - .../visual-vocabulary/pages/_factories.py | 12 +- .../pages/examples/lollipop.py | 8 +- .../visual-vocabulary/pages/magnitude.py | 12 +- .../visual-vocabulary/pages/ranking.py | 2 +- 6 files changed, 84 insertions(+), 71 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md index 1ff7e0223..cf60959ab 100644 --- a/vizro-core/examples/visual-vocabulary/README.md +++ b/vizro-core/examples/visual-vocabulary/README.md @@ -36,66 +36,66 @@ Credits and sources: The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. -| Chart Type | Status | Category | Credits & sources | API | -| --------------------- |---------| ------------------------ |---------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| -| Arc | ❌ | Part-to-whole | | | -| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Barcode | ❌ | Distribution | | | -| Beeswarm | ❌ | Distribution | | | -| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | -| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Bubble timeline | ❌ | Time | | | -| Bullet | ❌ | Magnitude | | | -| Bump | ❌ | Ranking | | | -| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Chord | ❌ | Flow | | | -| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | -| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | -| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Cumulative curve | ❌ | Distribution | | | -| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | -| Fan | ❌ | Time | | | -| Flow map | ❌ | Spatial | | | -| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | -| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | -| Gridplot | ❌ | Part-to-whole | | | -| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | -| Correlation matrix | ❌ | Correlation | | | -| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Marimekko | ❌ | Magnitude, Part-to-whole | | | -| Network | ❌ | Flow | | | -| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Ordered bubble | ❌ | Ranking | | | -| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | -| Pictogram | ❌ | Magnitude | | | -| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | -| Radial | ❌ | Magnitude | | | -| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | -| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | -| Slope | ❌ | Ranking, Time | | | -| Sparkline | ❌ | Time | | | -| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Surplus deficit line | ❌ | Deviation | | | -| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | -| Venn | ❌ | Part-to-whole | | | -| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | -| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | +| Chart Type | Status | Category | Credits & sources | API | +| --------------------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arc | ❌ | Part-to-whole | | | +| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Barcode | ❌ | Distribution | | | +| Beeswarm | ❌ | Distribution | | | +| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | +| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Bubble timeline | ❌ | Time | | | +| Bullet | ❌ | Magnitude | | | +| Bump | ❌ | Ranking | | | +| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Chord | ❌ | Flow | | | +| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | +| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | +| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Cumulative curve | ❌ | Distribution | | | +| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | +| Fan | ❌ | Time | | | +| Flow map | ❌ | Spatial | | | +| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | +| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | +| Gridplot | ❌ | Part-to-whole | | | +| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | +| Correlation matrix | ❌ | Correlation | | | +| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Marimekko | ❌ | Magnitude, Part-to-whole | | | +| Network | ❌ | Flow | | | +| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Ordered bubble | ❌ | Ranking | | | +| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | +| Pictogram | ❌ | Magnitude | | | +| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | +| Radial | ❌ | Magnitude | | | +| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | +| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | +| Slope | ❌ | Ranking, Time | | | +| Sparkline | ❌ | Time | | | +| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Surplus deficit line | ❌ | Deviation | | | +| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | +| Venn | ❌ | Part-to-whole | | | +| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | +| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | ## How to contribute diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 12710a54c..3c22605e5 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -306,7 +306,6 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure: return fig - @capture("graph") def lollipop(data_frame: pd.DataFrame, **kwargs): """Creates a lollipop based on px.scatter. diff --git a/vizro-core/examples/visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py index 69a986141..9fa0deb77 100644 --- a/vizro-core/examples/visual-vocabulary/pages/_factories.py +++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py @@ -7,7 +7,7 @@ import vizro.models as vm from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file -from pages.examples import butterfly, column_and_line, connected_scatter, waterfall, lollipop +from pages.examples import butterfly, column_and_line, connected_scatter, lollipop, waterfall def butterfly_factory(group: str): @@ -193,16 +193,16 @@ def lollipop_factory(group: str): text=""" #### What is a lollipop chart? - - A lollipop chart is a variation of a bar chart where each data point is represented by a line and a - dot at the end to mark the value. It functions like a bar chart but offers a cleaner visual, + + A lollipop chart is a variation of a bar chart where each data point is represented by a line and a + dot at the end to mark the value. It functions like a bar chart but offers a cleaner visual, especially useful when dealing with a large number of high values, to avoid the clutter of tall columns. However, it can be less precise due to the difficulty in judging the exact center of the circle. - +   #### When should I use it? - + Use a lollipop chart to compare values across categories, especially when dealing with many high values. It highlights differences and trends clearly without the visual bulk of a bar chart. Ensure clarity by limiting categories, using consistent scales, and clearly labeling axes. Consider alternatives if diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 4d86227ca..a04d742ff 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -5,6 +5,7 @@ gapminder = px.data.gapminder() + @capture("graph") def lollipop(data_frame: pd.DataFrame, **kwargs): """Creates a lollipop chart using Plotly.""" @@ -26,4 +27,9 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): fig.update_layout(yaxis_title="") return fig -fig = lollipop(data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), y="country", x="gdpPercap") + +fig = lollipop( + data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), + y="country", + x="gdpPercap", +) diff --git a/vizro-core/examples/visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py index c89146922..983e190e8 100644 --- a/vizro-core/examples/visual-vocabulary/pages/magnitude.py +++ b/vizro-core/examples/visual-vocabulary/pages/magnitude.py @@ -2,9 +2,9 @@ import vizro.models as vm +from pages._factories import lollipop_factory from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file from pages.examples import bar, magnitude_column, paired_bar, paired_column, parallel_coordinates, radar -from pages._factories import lollipop_factory bar_page = vm.Page( title="Bar", @@ -240,4 +240,12 @@ ) lollipop_page = lollipop_factory("magnitude") -pages = [bar_page, column_page, paired_bar_page, paired_column_page, parallel_coordinates_page, radar_page, lollipop_page] +pages = [ + bar_page, + column_page, + paired_bar_page, + paired_column_page, + parallel_coordinates_page, + radar_page, + lollipop_page, +] diff --git a/vizro-core/examples/visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py index fa67a8baa..3ea7bdbe1 100644 --- a/vizro-core/examples/visual-vocabulary/pages/ranking.py +++ b/vizro-core/examples/visual-vocabulary/pages/ranking.py @@ -2,9 +2,9 @@ import vizro.models as vm +from pages._factories import lollipop_factory from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file from pages.examples import ordered_bar, ordered_column -from pages._factories import lollipop_factory ordered_bar_page = vm.Page( title="Ordered bar", From fa2f8ebe76fc62b5fe5f110446098b6947f4ea7b Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 13:11:38 +0100 Subject: [PATCH 06/17] Declutter some more --- vizro-core/examples/visual-vocabulary/custom_charts.py | 2 +- .../examples/visual-vocabulary/pages/examples/lollipop.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 12710a54c..6e7501349 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -353,5 +353,5 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): # These are use-case specific layout updates. Normally not suitable for a chart inside vizro.charts, as these # depend on the data context. - fig.update_layout(yaxis_title="") + fig.update_layout(yaxis_title="", yaxis_showgrid=False) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 4d86227ca..07e16561f 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -23,7 +23,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) fig.update_layout(showlegend=False) - fig.update_layout(yaxis_title="") + fig.update_layout(yaxis_title="", yaxis_showgrid=False) return fig fig = lollipop(data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), y="country", x="gdpPercap") From 143a4afed6d836b3b0f2cdad81ca87c24e6de105 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 13:12:03 +0100 Subject: [PATCH 07/17] Lint --- vizro-core/examples/visual-vocabulary/custom_charts.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index eaadd65a1..5e712d2d4 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -326,7 +326,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): """ # Should we allow keyword arguments (kwargs) in this context, given the presence of multiple traces? # Unlike the column_and_line chart, where all traces hold equal significance, here the traces differ in importance. - # The primary scatter plot is the main data visualization, while the additional traces merely serve as connecting lines. + # The primary scatter plot is the main trace, while the additional traces merely serve as connecting lines. # Therefore, should we apply the kwargs solely to the scatter plot, as illustrated below? fig = px.scatter(data_frame, **kwargs) x_array = fig.data[0].x From 3cd607dd93f22abb7fd5d55d68e05279203293e6 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 14 Nov 2024 14:28:56 +0100 Subject: [PATCH 08/17] Add author --- vizro-core/docs/pages/explanation/authors.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/explanation/authors.md b/vizro-core/docs/pages/explanation/authors.md index c59700a4a..4919c893a 100644 --- a/vizro-core/docs/pages/explanation/authors.md +++ b/vizro-core/docs/pages/explanation/authors.md @@ -46,7 +46,8 @@ Natalia Kurakina, [Rosheen C.](https://github.com/rc678), [Hilary Ivy](https://github.com/hxe00570), [Jasmine Wu](https://github.com/jazwu), -[njmcgrat](https://github.com/njmcgrat) +[njmcgrat](https://github.com/njmcgrat), +[Jenelle Yonkman](https://github.com/yonkmanjl) with thanks to Sam Bourton and Kevin Staight for sponsorship, inspiration and guidance, From 85459460a74eaac808f01a9f3a848a5e62825f82 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 15 Nov 2024 09:23:01 +0100 Subject: [PATCH 09/17] Fix lollipop --- .../visual-vocabulary/custom_charts.py | 28 +++++++------------ .../pages/examples/lollipop.py | 13 +++++---- 2 files changed, 17 insertions(+), 24 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 52fb6c226..aee03a461 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -330,33 +330,25 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): Returns: go.Figure: Lollipop chart. """ - # Should we allow keyword arguments (kwargs) in this context, given the presence of multiple traces? # Unlike the column_and_line chart, where all traces hold equal significance, here the traces differ in importance. # The primary scatter plot is the main trace, while the additional traces merely serve as connecting lines. - # Therefore, should we apply the kwargs solely to the scatter plot, as illustrated below? + # Therefore, should we apply the kwargs solely to the main scatter plot, as illustrated below? fig = px.scatter(data_frame, **kwargs) - x_array = fig.data[0].x - y_array = fig.data[0].y - - # Is it necessary to always enable orientation? Unlike bar charts, scatter plots do not have an - # orientation argument. The calculation of the trace below needs to adapt based on the orientation. - # However, since we can't predict the user's choice for x and y axes, I am not sure how we can dynamically update - # the orientation. This chart does not always have a categorical and a numerical column. In can also be - # with both numeric columns. Should we introduce this ourselves? Does this have to be part of this example - # or can we hard-code for the visual-vocabulary? + + # Enable for both orientations + orientation = fig.data[0].orientation + x_array = fig.data[0]["x"] + y_array = fig.data[0]["y"] + for i in range(len(data_frame)): fig.add_trace( go.Scatter( - x=[0, x_array[i]], - y=[y_array[i], y_array[i]], + x=[0, x_array[i]] if orientation == "h" else [x_array[i], x_array[i]], + y=[y_array[i], y_array[i]] if orientation == "h" else [0, y_array[i]], mode="lines", ) ) fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) - fig.update_layout(showlegend=False) - - # These are use-case specific layout updates. Normally not suitable for a chart inside vizro.charts, as these - # depend on the data context. - fig.update_layout(yaxis_title="", yaxis_showgrid=False) + fig.update_layout(showlegend=False, yaxis_title="", yaxis_showgrid=False) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 38c5f6fb6..53129f6e5 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -10,21 +10,22 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): """Creates a lollipop chart using Plotly.""" fig = px.scatter(data_frame, **kwargs) - x_array = fig.data[0].x - y_array = fig.data[0].y + + orientation = fig.data[0].orientation + x_array = fig.data[0]["x"] + y_array = fig.data[0]["y"] for i in range(len(data_frame)): fig.add_trace( go.Scatter( - x=[0, x_array[i]], - y=[y_array[i], y_array[i]], + x=[0, x_array[i]] if orientation == "h" else [x_array[i], x_array[i]], + y=[y_array[i], y_array[i]] if orientation == "h" else [0, y_array[i]], mode="lines", ) ) fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) - fig.update_layout(showlegend=False) - fig.update_layout(yaxis_title="", yaxis_showgrid=False) + fig.update_layout(showlegend=False, yaxis_title="", yaxis_showgrid=False) return fig From eebd8890d98831837539db05b581f2a260281bf4 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 15 Nov 2024 09:38:45 +0100 Subject: [PATCH 10/17] Dynamic layout updates --- .../examples/visual-vocabulary/custom_charts.py | 16 ++++++++++++++-- .../visual-vocabulary/pages/examples/lollipop.py | 16 ++++++++++++++-- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index aee03a461..275b14495 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -349,6 +349,18 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) ) - fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) - fig.update_layout(showlegend=False, yaxis_title="", yaxis_showgrid=False) + if orientation == "h": + yaxis_showgrid = False + xaxis_showgrid = True + else: + yaxis_showgrid = True + xaxis_showgrid = False + + fig.update_traces( + marker_size=12, + line_width=3, + line_color=fig.layout.template.layout.colorway[0], + ) + + fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 53129f6e5..ceaa38750 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -24,8 +24,20 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) ) - fig.update_traces(marker_size=12, line_width=3, line_color=fig.layout.template.layout.colorway[0]) - fig.update_layout(showlegend=False, yaxis_title="", yaxis_showgrid=False) + if orientation == "h": + yaxis_showgrid = False + xaxis_showgrid = True + else: + yaxis_showgrid = True + xaxis_showgrid = False + + fig.update_traces( + marker_size=12, + line_width=3, + line_color=fig.layout.template.layout.colorway[0], + ) + + fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid) return fig From c5994db4594355b32bad9a4dfc14a5325b0ace17 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 15 Nov 2024 09:45:32 +0100 Subject: [PATCH 11/17] Add argument --- vizro-core/examples/visual-vocabulary/custom_charts.py | 2 +- .../examples/visual-vocabulary/pages/examples/lollipop.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 275b14495..f05c6de86 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -362,5 +362,5 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): line_color=fig.layout.template.layout.colorway[0], ) - fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid) + fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode='tozero') return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index ceaa38750..ed67aa07c 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -37,7 +37,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): line_color=fig.layout.template.layout.colorway[0], ) - fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid) + fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode='tozero') return fig From 1980b5374520a973a954f9b47d40b0852d0b4c48 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 15 Nov 2024 08:45:52 +0000 Subject: [PATCH 12/17] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/visual-vocabulary/custom_charts.py | 4 +++- .../examples/visual-vocabulary/pages/examples/lollipop.py | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index f05c6de86..6e31458de 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -362,5 +362,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): line_color=fig.layout.template.layout.colorway[0], ) - fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode='tozero') + fig.update_layout( + showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode="tozero" + ) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index ed67aa07c..3ddd958d4 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -37,7 +37,9 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): line_color=fig.layout.template.layout.colorway[0], ) - fig.update_layout(showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode='tozero') + fig.update_layout( + showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode="tozero" + ) return fig From 4bcc3ea12f925a700b4035b1893834f37835cc4d Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Fri, 15 Nov 2024 11:30:09 +0100 Subject: [PATCH 13/17] Update vizro-core/examples/visual-vocabulary/custom_charts.py Co-authored-by: Petar Pejovic <108530920+petar-qb@users.noreply.github.com> --- .../visual-vocabulary/custom_charts.py | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 6e31458de..16f5a8002 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -336,25 +336,16 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): fig = px.scatter(data_frame, **kwargs) # Enable for both orientations - orientation = fig.data[0].orientation - x_array = fig.data[0]["x"] - y_array = fig.data[0]["y"] - - for i in range(len(data_frame)): - fig.add_trace( - go.Scatter( - x=[0, x_array[i]] if orientation == "h" else [x_array[i], x_array[i]], - y=[y_array[i], y_array[i]] if orientation == "h" else [0, y_array[i]], - mode="lines", - ) - ) + is_horizontal = fig.data[0].orientation == "h" - if orientation == "h": - yaxis_showgrid = False - xaxis_showgrid = True - else: - yaxis_showgrid = True - xaxis_showgrid = False + x_coords = [[0, x] if is_horizontal else [x, x] for x in fig.data[0]["x"]] + y_coords = [[y, y] if is_horizontal else [0, y] for y in fig.data[0]["y"]] + + for x, y in zip(x_coords, y_coords): + fig.add_trace(go.Scatter(x=x, y=y, mode="lines")) + + xaxis_showgrid = is_horizontal + yaxis_showgrid = not is_horizontal fig.update_traces( marker_size=12, From 6ca75dc579e167a9f7459f5565971c3913070e57 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 15 Nov 2024 11:40:11 +0100 Subject: [PATCH 14/17] Refactor --- .../visual-vocabulary/custom_charts.py | 29 ++++++------------- .../pages/examples/lollipop.py | 28 ++++++------------ 2 files changed, 18 insertions(+), 39 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 6e31458de..05bffad81 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -319,7 +319,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): A lollipop chart is a variation of a bar chart where each data point is represented by a line and a dot at the end to mark the value. - Inspired by: https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762 + Inspired by: https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85 Args: data_frame: DataFrame for the chart. Can be long form or wide form. @@ -336,25 +336,14 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): fig = px.scatter(data_frame, **kwargs) # Enable for both orientations - orientation = fig.data[0].orientation - x_array = fig.data[0]["x"] - y_array = fig.data[0]["y"] - - for i in range(len(data_frame)): - fig.add_trace( - go.Scatter( - x=[0, x_array[i]] if orientation == "h" else [x_array[i], x_array[i]], - y=[y_array[i], y_array[i]] if orientation == "h" else [0, y_array[i]], - mode="lines", - ) - ) - - if orientation == "h": - yaxis_showgrid = False - xaxis_showgrid = True - else: - yaxis_showgrid = True - xaxis_showgrid = False + is_horizontal = fig.data[0].orientation == "h" + x_coords = [[0, x] if is_horizontal else [x, x] for x in fig.data[0]["x"]] + y_coords = [[y, y] if is_horizontal else [0, y] for y in fig.data[0]["y"]] + for x, y in zip(x_coords, y_coords): + fig.add_trace(go.Scatter(x=x, y=y, mode="lines")) + + xaxis_showgrid = is_horizontal + yaxis_showgrid = not is_horizontal fig.update_traces( marker_size=12, diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 3ddd958d4..52f07de09 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -11,25 +11,15 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): """Creates a lollipop chart using Plotly.""" fig = px.scatter(data_frame, **kwargs) - orientation = fig.data[0].orientation - x_array = fig.data[0]["x"] - y_array = fig.data[0]["y"] - - for i in range(len(data_frame)): - fig.add_trace( - go.Scatter( - x=[0, x_array[i]] if orientation == "h" else [x_array[i], x_array[i]], - y=[y_array[i], y_array[i]] if orientation == "h" else [0, y_array[i]], - mode="lines", - ) - ) - - if orientation == "h": - yaxis_showgrid = False - xaxis_showgrid = True - else: - yaxis_showgrid = True - xaxis_showgrid = False + # Enable for both orientations + is_horizontal = fig.data[0].orientation == "h" + x_coords = [[0, x] if is_horizontal else [x, x] for x in fig.data[0]["x"]] + y_coords = [[y, y] if is_horizontal else [0, y] for y in fig.data[0]["y"]] + for x, y in zip(x_coords, y_coords): + fig.add_trace(go.Scatter(x=x, y=y, mode="lines")) + + xaxis_showgrid = is_horizontal + yaxis_showgrid = not is_horizontal fig.update_traces( marker_size=12, From 5f001594a010df8763ffd512e5476dc5d14aa307 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 19 Nov 2024 10:19:41 +0100 Subject: [PATCH 15/17] Tidy README --- .../examples/visual-vocabulary/README.md | 180 ++++++------------ 1 file changed, 60 insertions(+), 120 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md index 9da0bbdc3..38b816479 100644 --- a/vizro-core/examples/visual-vocabulary/README.md +++ b/vizro-core/examples/visual-vocabulary/README.md @@ -36,126 +36,66 @@ Credits and sources: The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. -| Chart Type | Status | Category | Credits & sources | API | -| --------------------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Arc | ❌ | Part-to-whole | | | -| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Barcode | ❌ | Distribution | | | -| Beeswarm | ❌ | Distribution | | | -| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | -| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Bubble timeline | ❌ | Time | | | -| Bullet | ❌ | Magnitude | | | -| Bump | ❌ | Ranking | | | -| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Chord | ❌ | Flow | | | -| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | -| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | -| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Cumulative curve | ❌ | Distribution | | | -| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | -| Fan | ❌ | Time | | | -| Flow map | ❌ | Spatial | | | -| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | -| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | -| Gridplot | ❌ | Part-to-whole | | | -| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | -| Correlation matrix | ❌ | Correlation | | | -| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Marimekko | ❌ | Magnitude, Part-to-whole | | | -| Network | ❌ | Flow | | | -| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Ordered bubble | ❌ | Ranking | | | -| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | -| Pictogram | ❌ | Magnitude | | | -| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | -| Radial | ❌ | Magnitude | | | -| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | -| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | -| Slope | ❌ | Ranking, Time | | | -| Sparkline | ❌ | Time | | | -| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Surplus deficit line | ❌ | Deviation | | | -| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | -| Venn | ❌ | Part-to-whole | | | -| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | -| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | -| Chart Type | Done | Category | Credits & sources | API | -| --------------------- | ---- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Arc | ❌ | Part-to-whole | | | -| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Barcode | ❌ | Distribution | | | -| Beeswarm | ❌ | Distribution | | | -| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | -| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Bubble timeline | ❌ | Time | | | -| Bullet | ❌ | Magnitude | | | -| Bump | ❌ | Ranking | | | -| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Chord | ❌ | Flow | | | -| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | -| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | -| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Cumulative curve | ❌ | Distribution | | | -| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | -| Fan | ❌ | Time | | | -| Flow map | ❌ | Spatial | | | -| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | -| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | -| Gridplot | ❌ | Part-to-whole | | | -| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | -| Correlation matrix | ❌ | Correlation | | | -| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Lollipop | ❌ | Ranking, Magnitude | | | -| Marimekko | ❌ | Magnitude, Part-to-whole | | | -| Network | ❌ | Flow | | | -| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Ordered bubble | ❌ | Ranking | | | -| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | -| Pictogram | ❌ | Magnitude | | | -| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | -| Radial | ❌ | Magnitude | | | -| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | -| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | -| Slope | ❌ | Ranking, Time | | | -| Sparkline | ✅ | Time | [Sparklines with px](https://plotly.com/python/line-charts/#sparklines-with-plotly-express) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) or [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Surplus deficit line | ❌ | Deviation | | | -| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | -| Venn | ❌ | Part-to-whole | | | -| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | -| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | +| Chart Type | Done | Category | Credits & sources | API | +| --------------------- | ---- | ------------------------ | ---------------------- | --------------- | +| Arc | ❌ | Part-to-whole | | | +| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Barcode | ❌ | Distribution | | | +| Beeswarm | ❌ | Distribution | | | +| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | +| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Bubble timeline | ❌ | Time | | | +| Bullet | ❌ | Magnitude | | | +| Bump | ❌ | Ranking | | | +| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Chord | ❌ | Flow | | | +| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | +| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | +| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Cumulative curve | ❌ | Distribution | | | +| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | +| Fan | ❌ | Time | | | +| Flow map | ❌ | Spatial | | | +| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | +| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | +| Gridplot | ❌ | Part-to-whole | | | +| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | +| Correlation matrix | ❌ | Correlation | | | +| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Marimekko | ❌ | Magnitude, Part-to-whole | | | +| Network | ❌ | Flow | | | +| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Ordered bubble | ❌ | Ranking | | | +| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | +| Pictogram | ❌ | Magnitude | | | +| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | +| Radial | ❌ | Magnitude | | | +| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | +| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | +| Slope | ❌ | Ranking, Time | | | +| Sparkline | ✅ | Time | [Sparklines with px](https://plotly.com/python/line-charts/#sparklines-with-plotly-express) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) or [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Surplus deficit line | ❌ | Deviation | | | +| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | +| Venn | ❌ | Part-to-whole | | | +| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | +| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | ## How to contribute From 74d9bce7223c48ca9dffedfaf318b26556e0223b Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 19 Nov 2024 10:56:18 +0100 Subject: [PATCH 16/17] Tidy chart --- .../visual-vocabulary/custom_charts.py | 28 ++++++++------- .../pages/examples/lollipop.py | 34 ++++++++++--------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 05bffad81..81a64bcc9 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -330,21 +330,20 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): Returns: go.Figure: Lollipop chart. """ - # Unlike the column_and_line chart, where all traces hold equal significance, here the traces differ in importance. - # The primary scatter plot is the main trace, while the additional traces merely serve as connecting lines. - # Therefore, should we apply the kwargs solely to the main scatter plot, as illustrated below? + # Plots the dots of the lollipop chart fig = px.scatter(data_frame, **kwargs) - # Enable for both orientations - is_horizontal = fig.data[0].orientation == "h" - x_coords = [[0, x] if is_horizontal else [x, x] for x in fig.data[0]["x"]] - y_coords = [[y, y] if is_horizontal else [0, y] for y in fig.data[0]["y"]] - for x, y in zip(x_coords, y_coords): - fig.add_trace(go.Scatter(x=x, y=y, mode="lines")) + # Enables the orientation of the chart to be either horizontal or vertical + orientation = fig.data[0].orientation + x_or_y = "x" if orientation == "h" else "y" + y_or_x = "y" if orientation == "h" else "x" - xaxis_showgrid = is_horizontal - yaxis_showgrid = not is_horizontal + # Plots the lines of the lollipop chart + for x_or_y_value, y_or_x_value in zip(fig.data[0][x_or_y], fig.data[0][y_or_x]): + fig.add_trace( + go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) + # Styles the lollipop chart and makes it uni-colored fig.update_traces( marker_size=12, line_width=3, @@ -352,6 +351,11 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) fig.update_layout( - showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode="tozero" + {"showlegend": False, + f"{x_or_y}axis_showgrid": True, + f"{y_or_x}axis_showgrid": False, + f"{x_or_y}axis_rangemode": "tozero" + }, + ) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 52f07de09..84837e968 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -3,23 +3,19 @@ import plotly.graph_objects as go from vizro.models.types import capture -gapminder = px.data.gapminder() - @capture("graph") def lollipop(data_frame: pd.DataFrame, **kwargs): """Creates a lollipop chart using Plotly.""" fig = px.scatter(data_frame, **kwargs) - # Enable for both orientations - is_horizontal = fig.data[0].orientation == "h" - x_coords = [[0, x] if is_horizontal else [x, x] for x in fig.data[0]["x"]] - y_coords = [[y, y] if is_horizontal else [0, y] for y in fig.data[0]["y"]] - for x, y in zip(x_coords, y_coords): - fig.add_trace(go.Scatter(x=x, y=y, mode="lines")) + orientation = fig.data[0].orientation + x_or_y = "x" if orientation == "h" else "y" + y_or_x = "y" if orientation == "h" else "x" - xaxis_showgrid = is_horizontal - yaxis_showgrid = not is_horizontal + for x_or_y_value, y_or_x_value in zip(fig.data[0][x_or_y], fig.data[0][y_or_x]): + fig.add_trace( + go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) fig.update_traces( marker_size=12, @@ -28,13 +24,19 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) fig.update_layout( - showlegend=False, yaxis_showgrid=yaxis_showgrid, xaxis_showgrid=xaxis_showgrid, yaxis_rangemode="tozero" + {"showlegend": False, + f"{x_or_y}axis_showgrid": True, + f"{y_or_x}axis_showgrid": False, + f"{x_or_y}axis_rangemode": "tozero" + }, + ) return fig - -fig = lollipop( - data_frame=gapminder.query("year == 2007 and gdpPercap > 36000").sort_values("gdpPercap"), - y="country", - x="gdpPercap", +gapminder = ( + px.data.gapminder() + .query("year == 2007 and country.isin(['United States', 'Pakistan', 'India', 'China', 'Indonesia'])") + .sort_values("pop") ) + +fig = lollipop(gapminder, y="country", x="pop") From 6dc9368a4481c4043e58ea7cbf90ed5a6e24bd8a Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 19 Nov 2024 09:57:52 +0000 Subject: [PATCH 17/17] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../examples/visual-vocabulary/README.md | 120 +++++++++--------- .../visual-vocabulary/custom_charts.py | 15 +-- .../pages/examples/lollipop.py | 16 +-- 3 files changed, 75 insertions(+), 76 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md index 38b816479..3b298520e 100644 --- a/vizro-core/examples/visual-vocabulary/README.md +++ b/vizro-core/examples/visual-vocabulary/README.md @@ -36,66 +36,66 @@ Credits and sources: The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. -| Chart Type | Done | Category | Credits & sources | API | -| --------------------- | ---- | ------------------------ | ---------------------- | --------------- | -| Arc | ❌ | Part-to-whole | | | -| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Barcode | ❌ | Distribution | | | -| Beeswarm | ❌ | Distribution | | | -| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | -| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Bubble timeline | ❌ | Time | | | -| Bullet | ❌ | Magnitude | | | -| Bump | ❌ | Ranking | | | -| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Chord | ❌ | Flow | | | -| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | -| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | -| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Cumulative curve | ❌ | Distribution | | | -| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | -| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | -| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | -| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | -| Fan | ❌ | Time | | | -| Flow map | ❌ | Spatial | | | -| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | -| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | -| Gridplot | ❌ | Part-to-whole | | | -| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | -| Correlation matrix | ❌ | Correlation | | | -| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Marimekko | ❌ | Magnitude, Part-to-whole | | | -| Network | ❌ | Flow | | | -| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Ordered bubble | ❌ | Ranking | | | -| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | -| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | -| Pictogram | ❌ | Magnitude | | | -| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | -| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | -| Radial | ❌ | Magnitude | | | -| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | -| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | -| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | -| Slope | ❌ | Ranking, Time | | | -| Sparkline | ✅ | Time | [Sparklines with px](https://plotly.com/python/line-charts/#sparklines-with-plotly-express) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) or [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | -| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | -| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | -| Surplus deficit line | ❌ | Deviation | | | -| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | -| Venn | ❌ | Part-to-whole | | | -| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | -| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | +| Chart Type | Done | Category | Credits & sources | API | +| --------------------- | ---- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arc | ❌ | Part-to-whole | | | +| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Barcode | ❌ | Distribution | | | +| Beeswarm | ❌ | Distribution | | | +| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) | +| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Bubble timeline | ❌ | Time | | | +| Bullet | ❌ | Magnitude | | | +| Bump | ❌ | Ranking | | | +| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Chord | ❌ | Flow | | | +| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) | +| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) | +| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Cumulative curve | ❌ | Distribution | | | +| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) | +| Diverging stacked bar | ✅ | Deviation | [Plotly forum - diverging stacked bar](https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023/2) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) | +| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) | +| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) | +| Fan | ❌ | Time | | | +| Flow map | ❌ | Spatial | | | +| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) | +| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) | +| Gridplot | ❌ | Part-to-whole | | | +| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) | +| Correlation matrix | ❌ | Correlation | | | +| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Lollipop | ✅ | Ranking, Magnitude | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Marimekko | ❌ | Magnitude, Part-to-whole | | | +| Network | ❌ | Flow | | | +| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Ordered bubble | ❌ | Ranking | | | +| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) | +| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) | +| Pictogram | ❌ | Magnitude | | | +| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) | +| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) | +| Radial | ❌ | Magnitude | | | +| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) | +| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) | +| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) | +| Slope | ❌ | Ranking, Time | | | +| Sparkline | ✅ | Time | [Sparklines with px](https://plotly.com/python/line-charts/#sparklines-with-plotly-express) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) or [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) | +| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) | +| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) | +| Surplus deficit line | ❌ | Deviation | | | +| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) | +| Venn | ❌ | Part-to-whole | | | +| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) | +| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) | ## How to contribute diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 81a64bcc9..6a7aae68b 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -340,8 +340,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): # Plots the lines of the lollipop chart for x_or_y_value, y_or_x_value in zip(fig.data[0][x_or_y], fig.data[0][y_or_x]): - fig.add_trace( - go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) + fig.add_trace(go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) # Styles the lollipop chart and makes it uni-colored fig.update_traces( @@ -351,11 +350,11 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) fig.update_layout( - {"showlegend": False, - f"{x_or_y}axis_showgrid": True, - f"{y_or_x}axis_showgrid": False, - f"{x_or_y}axis_rangemode": "tozero" - }, - + { + "showlegend": False, + f"{x_or_y}axis_showgrid": True, + f"{y_or_x}axis_showgrid": False, + f"{x_or_y}axis_rangemode": "tozero", + }, ) return fig diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py index 84837e968..9c483706a 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/lollipop.py @@ -14,8 +14,7 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): y_or_x = "y" if orientation == "h" else "x" for x_or_y_value, y_or_x_value in zip(fig.data[0][x_or_y], fig.data[0][y_or_x]): - fig.add_trace( - go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) + fig.add_trace(go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"})) fig.update_traces( marker_size=12, @@ -24,15 +23,16 @@ def lollipop(data_frame: pd.DataFrame, **kwargs): ) fig.update_layout( - {"showlegend": False, - f"{x_or_y}axis_showgrid": True, - f"{y_or_x}axis_showgrid": False, - f"{x_or_y}axis_rangemode": "tozero" - }, - + { + "showlegend": False, + f"{x_or_y}axis_showgrid": True, + f"{y_or_x}axis_showgrid": False, + f"{x_or_y}axis_rangemode": "tozero", + }, ) return fig + gapminder = ( px.data.gapminder() .query("year == 2007 and country.isin(['United States', 'Pakistan', 'India', 'China', 'Indonesia'])")