Update version

README.md

@@ -1,8 +1,8 @@
 ---
 title: Visual Vocabulary
-emoji: 📈
+emoji: 🎨
 colorFrom: blue
-colorTo: blue
+colorTo: purple
 sdk: docker
 pinned: false
 license: apache-2.0
@@ -45,7 +45,7 @@ The dashboard is still in development. Below is an overview of the chart types f
 | Beeswarm              | ❌     | Distribution             |
 | Boxplot               | ✅     | Distribution             |
 | Bubble                | ✅     | Correlation              |
-| Bubble map            | ❌     | Spatial                  |
+| Bubble map            | ✅     | Spatial                  |
 | Bubble timeline       | ❌     | Time                     |
 | Bullet                | ❌     | Magnitude                |
 | Bump                  | ❌     | Ranking                  |
@@ -59,7 +59,7 @@ The dashboard is still in development. Below is an overview of the chart types f
 | Diverging bar         | ❌     | Deviation                |
 | Diverging stacked bar | ❌     | Deviation                |
 | Donut                 | ✅     | Part-to-whole            |
-| Dot map               | ❌     | Spatial                  |
+| Dot map               | ✅     | Spatial                  |
 | Dot plot              | ❌     | Distribution             |
 | Fan                   | ❌     | Time                     |
 | Flow map              | ❌     | Spatial                  |

app.py

@@ -110,5 +110,5 @@ dashboard = vm.Dashboard(
 app = Vizro().build(dashboard)
 server = app.dash.server
 
-if __name__ == "__main__":  
+if __name__ == "__main__":
     app.run()

chart_groups.py

@@ -198,9 +198,7 @@ spatial_chart_group = ChartGroup(
     name="Spatial",
     pages=pages.spatial.pages,
     incomplete_pages=[
-        IncompletePage("Dot map"),
         IncompletePage("Flow map"),
-        IncompletePage("Bubble map"),
     ],
     icon="Map",
     intro_text=spatial_intro_text,

pages/_factories.py

@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
 
                 Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
                 parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
-                within the same parameters. You can also **stack** two bars on each side if you wish to divide your
+                within the same parameters. You can also **stack** two bars on each side to divide your
                 categories.
             """
             ),

pages/_pages_utils.py

@@ -55,3 +55,6 @@ stepped_line_data = pd.DataFrame(
         "rate": [0.10, 0.12, 0.15, 0.13, 0.14, 0.13, 0.14, 0.16, 0.15],
     }
 )
+
+
+carshare = px.data.carshare()

pages/examples/bubble_map.py

@@ -0,0 +1,25 @@
+import vizro.models as vm
+import vizro.plotly.express as px
+from vizro import Vizro
+
+carshare = px.data.carshare()
+
+page = vm.Page(
+    title="Bubble map",
+    components=[
+        vm.Graph(
+            figure=px.scatter_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+                size="car_hours",
+                size_max=15,
+                opacity=0.5,
+                zoom=10,
+            )
+        )
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page])
+Vizro().build(dashboard).run()

pages/examples/dot_map.py

@@ -0,0 +1,23 @@
+import vizro.models as vm
+import vizro.plotly.express as px
+from vizro import Vizro
+
+carshare = px.data.carshare()
+
+page = vm.Page(
+    title="Dot map",
+    components=[
+        vm.Graph(
+            figure=px.scatter_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+                opacity=0.5,
+                zoom=10,
+            )
+        )
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page])
+Vizro().build(dashboard).run()

pages/spatial.py

@@ -3,7 +3,7 @@
 import vizro.models as vm
 import vizro.plotly.express as px
 
-from pages._pages_utils import PAGE_GRID, gapminder, make_code_clipboard_from_py_file
+from pages._pages_utils import PAGE_GRID, carshare, gapminder, make_code_clipboard_from_py_file
 
 choropleth = vm.Page(
     title="Choropleth",
@@ -42,4 +42,79 @@ choropleth = vm.Page(
     ],
 )
 
-pages = [choropleth]
+dot_map = vm.Page(
+    title="Dot map",
+    path="spatial/dot-map",
+    layout=vm.Layout(grid=PAGE_GRID),
+    components=[
+        vm.Card(
+            text="""
+            #### What is a dot map?
+
+            A dot map, or scatter map, uses dots to represent the value of a specific variable at geographic locations.
+
+             
+
+            #### When should I use it?
+
+            Use a dot map to visually display the distribution and concentration of data points across a geographic
+            area. It's ideal for showing the frequency or density of an attribute, helping to identify patterns,
+            clusters, or anomalies.
+
+            Dot maps offer a clear visual impression of spatial distributions, but overlapping dots can make it hard to
+            distinguish individual data points in dense areas. Consider adding opacity to your dots to improve clarity.
+        """
+        ),
+        vm.Graph(
+            figure=px.scatter_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+                opacity=0.5,
+                zoom=10,
+            ),
+        ),
+        make_code_clipboard_from_py_file("dot_map.py"),
+    ],
+)
+
+bubble_map = vm.Page(
+    title="Bubble map",
+    path="spatial/bubble-map",
+    layout=vm.Layout(grid=PAGE_GRID),
+    components=[
+        vm.Card(
+            text="""
+            #### What is a bubble map?
+
+            A bubble map uses bubbles of varying sizes to represent the value of a specific variable at geographic
+            locations.
+
+             
+
+            #### When should I use it?
+
+            Use a bubble map to show the distribution, concentration, and size of data points on a map.
+            It's great for highlighting patterns, clusters, and anomalies.
+
+            Bubble maps clearly display spatial distributions and magnitudes, but overlapping bubbles can obscure
+            details in crowded areas. Adjust the opacity and size of your bubbles to enhance clarity.
+        """
+        ),
+        vm.Graph(
+            figure=px.scatter_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+                size="car_hours",
+                size_max=15,
+                opacity=0.5,
+                zoom=10,
+            ),
+        ),
+        make_code_clipboard_from_py_file("bubble_map.py"),
+    ],
+)
+
+
+pages = [choropleth, dot_map, bubble_map]

pages/time.py

@@ -26,7 +26,7 @@ line = vm.Page(
 
             You should select a line chart when you want to show trends over time. Usually, your y-axis will show a
             quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also
-            display negative values below the x-axis. If you wish to group several lines (different data series) in the
+            display negative values below the x-axis. To group several lines (different data series) in the
             same chart, try to limit yourself to 3-4 to avoid cluttering up your chart.
         """
         ),

requirements.in

@@ -0,0 +1,6 @@
+# This file is only used if you don't have hatch installed.
+# It should be fully generated and used when the demo moves to huggingface.
+black==24.4.2
+plotly>=5.24.0
+vizro
+gunicorn

requirements.txt

@@ -1,3 +1,122 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in -o requirements.txt
+annotated-types==0.7.0
+    # via pydantic
 black==24.4.2
-vizro
-gunicorn
+    # via -r requirements.in
+blinker==1.8.2
+    # via flask
+cachelib==0.9.0
+    # via flask-caching
+certifi==2024.8.30
+    # via requests
+charset-normalizer==3.3.2
+    # via requests
+click==8.1.7
+    # via
+    #   black
+    #   flask
+dash==2.18.0
+    # via
+    #   dash-ag-grid
+    #   dash-bootstrap-components
+    #   vizro
+dash-ag-grid==31.2.0
+    # via vizro
+dash-bootstrap-components==1.6.0
+    # via vizro
+dash-core-components==2.0.0
+    # via dash
+dash-html-components==2.0.0
+    # via dash
+dash-mantine-components==0.12.1
+    # via vizro
+dash-table==5.0.0
+    # via dash
+flask==3.0.3
+    # via
+    #   dash
+    #   flask-caching
+flask-caching==2.3.0
+    # via vizro
+gunicorn==23.0.0
+    # via -r requirements.in
+idna==3.8
+    # via requests
+importlib-metadata==8.4.0
+    # via
+    #   dash
+    #   flask
+itsdangerous==2.2.0
+    # via flask
+jinja2==3.1.4
+    # via flask
+markupsafe==2.1.5
+    # via
+    #   jinja2
+    #   werkzeug
+mypy-extensions==1.0.0
+    # via black
+nest-asyncio==1.6.0
+    # via dash
+numpy==2.0.2
+    # via pandas
+packaging==24.1
+    # via
+    #   black
+    #   gunicorn
+    #   plotly
+pandas==2.2.2
+    # via vizro
+pathspec==0.12.1
+    # via black
+platformdirs==4.2.2
+    # via black
+plotly==5.24.0
+    # via
+    #   -r requirements.in
+    #   dash
+pydantic==2.8.2
+    # via vizro
+pydantic-core==2.20.1
+    # via pydantic
+python-dateutil==2.9.0.post0
+    # via pandas
+pytz==2024.1
+    # via pandas
+requests==2.32.3
+    # via dash
+retrying==1.3.4
+    # via dash
+ruff==0.6.3
+    # via vizro
+setuptools==74.1.2
+    # via dash
+six==1.16.0
+    # via
+    #   python-dateutil
+    #   retrying
+tenacity==9.0.0
+    # via plotly
+tomli==2.0.1
+    # via black
+typing-extensions==4.12.2
+    # via
+    #   black
+    #   dash
+    #   pydantic
+    #   pydantic-core
+tzdata==2024.1
+    # via pandas
+urllib3==2.2.2
+    # via requests
+vizro==0.1.21
+    # via -r requirements.in
+werkzeug==3.0.4
+    # via
+    #   dash
+    #   flask
+wrapt==1.16.0
+    # via vizro
+zipp==3.20.1
+    # via importlib-metadata