Spaces:
Running
Running
File size: 9,478 Bytes
42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 2465927 b699ae9 2465927 b699ae9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 |
"""Magnitude charts."""
import vizro.models as vm
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
bar_page = vm.Page(
title="Bar",
path="magnitude/bar",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a bar chart?
A bar chart displays bars with lengths proportional to the values they represent. One axis shows the
categories to compare, and the other provides a value scale starting from zero.
#### When should I use it?
Use a bar chart to help your audience compare sizes and identify patterns in categorical data, such as
**how many?** in each category. Arrange the bars in any order to fit the message you want to emphasize.
Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations with fuller
descriptions below.
"""
),
vm.Graph(figure=bar.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard", components=[make_code_clipboard_from_py_file("bar.py", mode="vizro")]
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("bar.py", mode="plotly")],
),
]
),
],
)
# Note: Code example for magnitude/column differs from time/column. The text description is the same.
column_page = vm.Page(
id="magnitude-column",
path="magnitude/column",
title="Column",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a column chart?
A column chart is a type of bar chart where data is represented with vertical columns. Each
column's height corresponds to the value it represents, with the y-axis starting from zero.
#### When should I use it?
Use a column chart to compare sizes and identify patterns in categorical data, including time-based
data. Arrange columns to fit your message, and for time-based data, order them chronologically to
highlight trends. Ensure clear labeling, especially with many categories, and consider using a legend
or abbreviations with fuller descriptions below.
"""
),
vm.Graph(figure=magnitude_column.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("magnitude_column.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("magnitude_column.py", mode="plotly")],
),
]
),
],
)
paired_bar_page = vm.Page(
title="Paired bar",
path="magnitude/paired-bar",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a paired bar chart?
A paired bar chart, also known as a grouped bar chart, displays bars grouped together in pairs for each
category, with the lengths of the bars proportional to the values they represent. One axis shows the
categories to compare, while the other provides a value scale starting from zero.
#### When should I use it?
Use a paired bar chart to compare multiple sets of data within the same categories. This type of chart is
particularly useful for highlighting differences and similarities between groups, such as **how many?** in
each category across different groups. Arrange the paired bars clearly to fit the message you want to
emphasize. Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations
with fuller descriptions below.
"""
),
vm.Graph(figure=paired_bar.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("paired_bar.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("paired_bar.py", mode="plotly")],
),
]
),
],
)
paired_column_page = vm.Page(
title="Paired column",
path="magnitude/paired-column",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a paired column chart?
A paired column chart, also known as a grouped column chart, displays columns grouped together in pairs for
each category, with the heights of the columns proportional to the values they represent. One axis shows the
categories to compare, while the other provides a value scale starting from zero.
#### When should I use it?
Use a paired column chart to compare multiple sets of data within the same categories. This type of chart is
particularly useful for highlighting differences and similarities between groups, such as **how many?** in
each category across different groups. Arrange the paired columns clearly to fit the message you want to
emphasize. Ensure clear labeling, especially with many columns, and consider using a legend or abbreviations
with fuller descriptions below.
"""
),
vm.Graph(figure=paired_column.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("paired_column.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("paired_column.py", mode="plotly")],
),
]
),
],
)
parallel_coordinates_page = vm.Page(
path="magnitude/parallel-coordinates ",
title="Parallel coordinates",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a parallel coordinates chart?
A parallel coordinates chart is a type of data visualization used to plot multivariate numerical data.
Each axis represents a different variable, and lines connecting the axes indicate the values of
individual data points across these variables.
#### When should I use it?
Use a parallel coordinates chart to explore relationships and patterns in high-dimensional data.
This chart is particularly useful for comparing multiple variables simultaneously and identifying
correlations or clusters within the data. Ensure clear labeling of each axis and consider using color
coding to distinguish between different data points or groups.
"""
),
vm.Graph(figure=parallel_coordinates.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("parallel_coordinates.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("parallel_coordinates.py", mode="plotly")],
),
]
),
],
)
radar_page = vm.Page(
path="magnitude/radar",
title="Radar",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a radar chart?
A radar chart, also known as a spider plot or star plot, is a type of data visualization
used to display multivariate data. It consists of three or more variables represented
on axes that originate from the same central point.
#### When should I use it?
Use a radar chart to compare performance or characteristics across multiple variables.
The chart effectively highlights strengths, weaknesses, patterns, and outliers.
To maintain clarity, use consistent scales for all axes and clearly mark labels and data points.
"""
),
vm.Graph(figure=radar.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard", components=[make_code_clipboard_from_py_file("radar.py", mode="vizro")]
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("radar.py", mode="plotly")],
),
]
),
],
)
pages = [bar_page, column_page, paired_bar_page, paired_column_page, parallel_coordinates_page, radar_page]
|