Spaces:
Running
Running
File size: 7,657 Bytes
42ee455 |
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 |
"""Part-to-whole charts."""
import vizro.models as vm
import vizro.plotly.express as px
from pages._pages_utils import PAGE_GRID, funnel_data, gapminder, make_code_clipboard_from_py_file, tips
pie = vm.Page(
title="Pie",
path="part-to-whole/pie",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a pie chart?
A pie chart is a circular chart divided into segments to show proportions and percentages between
categories. The circle represents the whole.
#### When should I use it?
Use the pie chart when you need to show your audience a quick view of how data is distributed
proportionately, with percentages highlighted. The different values you present must add up to a total and
equal 100%.
The downsides are that pie charts tend to occupy more space than other charts, they don't
work well with more than a few values because labeling small segments is challenging, and it can be
difficult to accurately compare the sizes of the segments.
"""
),
vm.Graph(
figure=px.pie(
tips,
values="tip",
names="day",
)
),
make_code_clipboard_from_py_file("pie.py"),
],
)
donut = vm.Page(
title="Donut",
path="part-to-whole/donut",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a donut chart?
A donut chart looks like a pie chart, but has a blank space in the center which may contain additional
information.
#### When should I use it?
A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra
information you would like to share about the data. It may also be more effective if you wish your audience
to focus on the length of the arcs of the sections instead of the proportions of the segment sizes.
"""
),
vm.Graph(
figure=px.pie(
tips,
values="tip",
names="day",
hole=0.4,
)
),
make_code_clipboard_from_py_file("donut.py"),
],
)
treemap = vm.Page(
title="Treemap",
path="part-to-whole/treemap",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a treemap?
A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized
proportionately to the quantity they represent, combined together to form larger parent category
rectangles.
#### When should I use it?
It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can
compare groups and single elements nested within them. Consider using them instead of Pie charts when
you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick
overview of the data.
"""
),
vm.Graph(
figure=px.treemap(
gapminder.query("year == 2007"),
path=[px.Constant("world"), "continent", "country"],
values="pop",
color="lifeExp",
)
),
make_code_clipboard_from_py_file("treemap.py"),
],
)
stacked_bar = vm.Page(
title="Stacked bar",
path="part-to-whole/stacked-bar",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a stacked bar chart?
A stacked bar chart displays bars divided into segments, with each segment's length proportional to the
value it represents. One axis shows the categories being compared, while the other provides a value scale
starting from zero. The segments within each bar are stacked on top of each other, allowing for a cumulative
comparison.
#### When should I use it?
Use a stacked bar chart to help your audience compare the total sizes of categories as well as the
individual components within those categories. This chart type is ideal for visualizing part-to-whole
relationships and identifying patterns within categorical data. Ensure clear labeling for each segment,
especially when there are many categories, and consider using a legend or abbreviations with fuller
descriptions below.
"""
),
vm.Graph(figure=px.histogram(tips, y="sex", x="total_bill", color="day", orientation="h")),
make_code_clipboard_from_py_file("stacked_bar.py"),
],
)
stacked_column = vm.Page(
title="Stacked column",
path="part-to-whole/stacked-column",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a stacked column chart?
A stacked column chart displays columns divided into segments, with each segment's height proportional to
the value it represents. One axis shows the categories being compared, while the other provides a value
scale starting from zero. The segments within each column are stacked on top of each other, allowing for a
cumulative comparison.
#### When should I use it?
Use a stacked column chart to help your audience compare the total sizes of categories as well as the
individual components within those categories. This chart type is ideal for visualizing part-to-whole
relationships and identifying patterns within categorical data. Ensure clear labeling for each segment,
especially when there are many categories, and consider using a legend or abbreviations with fuller
descriptions below.
"""
),
vm.Graph(figure=px.histogram(tips, x="sex", y="total_bill", color="day")),
make_code_clipboard_from_py_file("stacked_bar.py"),
],
)
funnel = vm.Page(
title="Funnel",
path="part-to-whole/funnel",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a funnel chart?
A funnel area chart is a type of data visualization that represents stages in a process, with the size of
each area proportional to its value. The chart typically narrows as it progresses, visually depicting the
reduction in numbers through each stage. One axis represents the stages of the process, while the other axis
indicates the values or quantities at each stage.
#### When should I use it?
Use a funnel area chart to help your audience understand and compare the progression of data through
different stages of a process. This chart type is particularly effective for visualizing conversion rates,
sales processes, or any sequential data where you want to highlight drop-offs or reductions between stages.
"""
),
vm.Graph(figure=px.funnel_area(funnel_data, names="Stage", values="Value")),
make_code_clipboard_from_py_file("funnel.py"),
],
)
pages = [donut, pie, treemap, stacked_bar, stacked_column, funnel]
|