docs - Sankey (#50524) (#50539)

Co-authored-by: Jeff Bruemmer <jeff.bruemmer@gmail.com>

docs - Sankey (#50524) (#50539)
127ab0be · github-automation-metabase · GitHub · 6a1de543 · 127ab0be · 127ab0be
Unverified Commit 127ab0be authored 4 months ago by github-automation-metabase Committed by GitHub 4 months ago
--- a/docs/questions/images/sankey-data-options.png
+++ b/docs/questions/images/sankey-data-options.png
--- a/docs/questions/images/sankey-gray-edges.png
+++ b/docs/questions/images/sankey-gray-edges.png
--- a/docs/questions/images/sankey-left-aligned.png
+++ b/docs/questions/images/sankey-left-aligned.png
--- a/docs/questions/images/sankey-right-aligned.png
+++ b/docs/questions/images/sankey-right-aligned.png
--- a/docs/questions/images/sankey-summarize-count-source-target.png
+++ b/docs/questions/images/sankey-summarize-count-source-target.png
--- a/docs/questions/sharing/visualizations/sankey.md
+++ b/docs/questions/sharing/visualizations/sankey.md
+---
+title: Sankey charts
+---
+# Sankey charts
+
+Sankey charts show how data flows through multi-dimensional steps. They're useful for showing which elements, called nodes, contribute to the overall flow.
+
+![Left-aligned sankey chart](../../images/sankey-left-aligned.png)
+
+## Sankey data shape
+
+To create a Sankey chart, you'll need at least three columns in your results:
+
+- **Source column**: specifies a node in the sankey flow.
+- **Target column**: specifies a receiving node.
+- **Count column**: value that determines the thickness of the target node.
+
+If you had raw page views where each row had a source page (like the title of a referrer page) and a target page (like the title for the current page view), you could summarize by count and group by the source, then the target.
+
+![Sankey summarize count and group by source and target](../../images/sankey-summarize-count-source-target.png)
+
+Here's the data shape used to create the chart above.
+
+| Source page  | Target page  | Total Visitors |
+| ------------ | ------------ | -------------- |
+| Entry        | Homepage     | 584            |
+| Homepage     | Product Page | 2,700          |
+| Product Page | Add to Cart  | 572            |
+| Add to Cart  | Checkout     | 2,490          |
+| Checkout     | Purchase     | 1,756          |
+| Homepage     | Search       | 2,427          |
+| Search       | Product Page | 2,027          |
+| Product Page | Add to Cart  | 2,203          |
+| Add to Cart  | Checkout     | 1,475          |
+| Search       | Product Page | 1,563          |
+| Checkout     | Purchase     | 1,041          |
+| Homepage     | Exit         | 810            |
+| Product Page | Checkout     | 815            |
+| Checkout     | Purchase     | 2,217          |
+| Homepage     | Exit         | 1,020          |
+
+See [data options](#sankey-data-options).
+
+### Circular dependencies won't work
+
+If some of your sources point to targets that point back to the same sources, Metabase won't be able to create a Sankey chart.
+
+## Sankey data options
+
+To select which columns Metabase should use as the source, target, and values for the Sankey chart, click on the **settings** icon in the bottom right to view the **Data** tab.
+
+![Sankey data options](../../images/sankey-data-options.png)
+
+Your data can include more than three columns, but each row must include the required three columns: source, target, and a value to scale the size of the target node.
+
+## Sankey display options
+
+You can change a charts alignment, edge labels, and edge colors.
+
+### Alignment
+
+You can select left, right, or justified alignment for the Sankey chart. Alignment determines how the chart should display the end nodes (a.k.a. leaf nodes or terminal nodes).
+
+The chart in the section above is left-aligned. The end nodes, `Exit` and `Purchase`, are aligned to the left.
+
+For right alignment, the end nodes, `Exit` and `Purchase`, move to the chart's right:
+
+![Right-aligned sankey chart](../../images/sankey-right-aligned.png)
+
+In this case, justified alignment looks the same, as the end nodes move to take up the whole chart.
+
+### Edge labels
+
+Whether an edge (a.k.a. link or arrow) displays its value. Options for displaying labels include auto, compact, or full formatting.
+
+### Edge color
+
+![Sankey gray edges](../../images/sankey-gray-edges.png)
+
+Options for edge colors include:
+
+- **Gray**: All edges are gray. Nodes retain their color.
+- **Source**: The source node determines the edge colors. The source node is the node to the left of an edge.
+- **Target**: The target node determines the edge colors. The target node is the node to the right of an edge.
--- a/docs/questions/sharing/visualizing-results.md
+++ b/docs/questions/sharing/visualizing-results.md
@@ -27,21 +27,23 @@ To change the settings for a specific chart, for example a row chart, you could
 - Click on the gear icon in the bottom left of the chart (next to the **Visualization** button, or
 - Click on **Visualization** in the bottom left of the chart, then hover over the currently selected chart and click on the **gear** icon that pops up.

-## Visualization types
+## Area charts

-Metabase ships with a bunch of different visualizations types:
+[Area charts](./visualizations/line-bar-and-area-charts.md) are useful when comparing the proportions of two metrics over time. Both bar and area charts can be stacked.

-## Numbers
+![Stacked area chart](../images/area.png)

-The [Numbers](./visualizations/numbers.md) option is for displaying a single number, nice and big.
+## Bar charts

-![Number](../images/number.png)
+[Bar charts](./visualizations/line-bar-and-area-charts.md) are great for displaying a number grouped by a category (e.g., the number of users you have by country).

-## Trends
+![Bar chart](../images/bar.png)

-The [Trend](./visualizations/trend.md) visualization is great for displaying how a single number has changed between two time periods.
+## Combo charts

-![Trend settings](../images/trend-settings.png)
+[Combo charts](./visualizations/combo-chart.md) let you combine bars and lines (or areas) on the same chart.
+
+![Line + bar](../images/combo-chart.png)

 ## Detail

@@ -49,11 +51,11 @@ The [Detail](./visualizations/detail.md) visualization shows a single result rec

 ![Detail of a record in the account table](../images/detail.png)

-## Progress bars
+## Funnel charts

-[Progress bars](./visualizations/progress-bar.md) are for comparing a single number to a goal value that you set.
+[Funnels](./visualizations/funnel.md) are commonly used in e-commerce or sales to visualize how many customers are present within each step of a checkout flow or sales cycle. At their most general, funnels show you values broken out by steps, and the percent decrease between each successive step.

-![Progress bar](../images/progress.png)
+![Funnel](../images/funnel.png)

 ## Gauges

@@ -61,11 +63,31 @@ The [Detail](./visualizations/detail.md) visualization shows a single result rec

 ![Gauge](../images/gauge.png)

-## Tables
+## Line charts

-The [Table](./visualizations/table.md) option is good for looking at tabular data (duh), or for lists of things like users or orders.
+[Line charts](./visualizations/line-bar-and-area-charts.md) are best for displaying the trend of a number over time, especially when you have lots of x-axis values. For more, check out our [Guide to line charts](https://www.metabase.com/learn/metabase-basics/querying-and-dashboards/visualization/line-charts) and [Time series analysis](https://www.metabase.com/learn/metabase-basics/querying-and-dashboards/time-series) tutorials.

-![Conditional formatting](../images/conditional-formatting.png)
+![Trend lines](../images/trend-lines.png)
+
+## Maps
+
+When you select the [Map](./visualizations/map.md) visualization, Metabase will automatically try and pick the best kind of map to use based on the table or result set.
+
+![Region map](../images/map.png)
+
+## Numbers
+
+The [Numbers](./visualizations/numbers.md) option is for displaying a single number, nice and big.
+
+![Number](../images/number.png)
+
+## Pie, donut, and sunburst charts
+
+A [pie chart or donut chart](./visualizations/pie-or-donut-chart.md) can be used when breaking out a metric by a single dimension, especially when the number of possible breakouts is small, like accounts by plan.
+
+A [sunburst chart](./visualizations/pie-or-donut-chart.md) chart is a pie chart with more than one ring to show the data broken out by additional dimensions.
+
+![Donut](../images/pie-sunburst-demo.png)

 ## Pivot tables

@@ -73,29 +95,29 @@ The [Table](./visualizations/table.md) option is good for looking at tabular dat

 ![Pivot table options](../images/pivot-table-options.png)

-## Line charts
+## Progress bars

-[Line charts](./visualizations/line-bar-and-area-charts.md) are best for displaying the trend of a number over time, especially when you have lots of x-axis values. For more, check out our [Guide to line charts](https://www.metabase.com/learn/metabase-basics/querying-and-dashboards/visualization/line-charts) and [Time series analysis](https://www.metabase.com/learn/metabase-basics/querying-and-dashboards/time-series) tutorials.
+[Progress bars](./visualizations/progress-bar.md) are for comparing a single number to a goal value that you set.

-![Trend lines](../images/trend-lines.png)
+![Progress bar](../images/progress.png)

-## Bar charts
+## Row charts

-[Bar charts](./visualizations/line-bar-and-area-charts.md) are great for displaying a number grouped by a category (e.g., the number of users you have by country).
+[Row charts](./visualizations/line-bar-and-area-charts.md) are good for visualizing data grouped by a column that has a lot of possible values, like a Vendor or Product Title field.

-![Bar chart](../images/bar.png)
+![Row chart](../images/row.png)

-## Area charts
+## Tables

-[Area charts](./visualizations/line-bar-and-area-charts.md) are useful when comparing the proportions of two metrics over time. Both bar and area charts can be stacked.
+The [Table](./visualizations/table.md) option is good for looking at tabular data (duh), or for lists of things like users or orders.

-![Stacked area chart](../images/area.png)
+![Conditional formatting](../images/conditional-formatting.png)

-## Combo charts
+## Trends

-[Combo charts](./visualizations/combo-chart.md) let you combine bars and lines (or areas) on the same chart.
+The [Trend](./visualizations/trend.md) visualization is great for displaying how a single number has changed between two time periods.

-![Line + bar](../images/combo-chart.png)
+![Trend settings](../images/trend-settings.png)

 ## Histograms

@@ -103,11 +125,11 @@ If you have a bar chart like Count of Users by Age, where the x-axis is a number

 ![Histogram](../images/histogram.png)

-## Row charts
+## Sankey charts

-[Row charts](./visualizations/line-bar-and-area-charts.md) are good for visualizing data grouped by a column that has a lot of possible values, like a Vendor or Product Title field.
+[Sankey charts](./visualizations/sankey.md) show how data flows through multi-dimensional steps.

-![Row chart](../images/row.png)
+![Left-aligned sankey chart](../images/sankey-left-aligned.png)

 ## Waterfall charts

@@ -121,26 +143,6 @@ If you have a bar chart like Count of Users by Age, where the x-axis is a number

 ![Scatter](../images/scatter.png)

-## Pie, donut, and sunburst charts
-
-A [pie chart or donut chart](./visualizations/pie-or-donut-chart.md) can be used when breaking out a metric by a single dimension, especially when the number of possible breakouts is small, like accounts by plan.
-
-A [sunburst chart](./visualizations/pie-or-donut-chart.md) chart is a pie chart with more than one ring to show the data broken out by additional dimensions.
-
-![Donut](../images/pie-sunburst-demo.png)
-
-## Funnel charts
-
-[Funnels](./visualizations/funnel.md) are commonly used in e-commerce or sales to visualize how many customers are present within each step of a checkout flow or sales cycle. At their most general, funnels show you values broken out by steps, and the percent decrease between each successive step.
-
-![Funnel](../images/funnel.png)
-
-## Maps
-
-When you select the [Map](./visualizations/map.md) visualization, Metabase will automatically try and pick the best kind of map to use based on the table or result set.
-
-![Region map](../images/map.png)
-
 ## Styling and formatting data in charts

 ![Chart formatting options](../images/chart-formatting-options.png)