|
| 1 | +# /// script |
| 2 | +# requires-python = ">=3.11" |
| 3 | +# dependencies = [ |
| 4 | +# "altair==6.0.0", |
| 5 | +# "marimo", |
| 6 | +# "pandas==3.0.1", |
| 7 | +# "vega_datasets==0.9.0", |
| 8 | +# ] |
| 9 | +# /// |
| 10 | + |
| 11 | +import marimo |
| 12 | + |
| 13 | +__generated_with = "0.20.4" |
| 14 | +app = marimo.App() |
| 15 | + |
| 16 | + |
| 17 | +@app.cell |
| 18 | +def _(): |
| 19 | + import marimo as mo |
| 20 | + |
| 21 | + return (mo,) |
| 22 | + |
| 23 | + |
| 24 | +@app.cell(hide_code=True) |
| 25 | +def _(mo): |
| 26 | + mo.md(r""" |
| 27 | + # Altair Debugging Guide |
| 28 | +
|
| 29 | + In this notebook we show you common debugging techniques that you can use if you run into issues with Altair. |
| 30 | +
|
| 31 | + You can jump to the following sections: |
| 32 | +
|
| 33 | + * [Installation and Setup](#Installation) when Altair is not installed correctly |
| 34 | + * [Display Issues](#Display-Troubleshooting) when you don't see a chart |
| 35 | + * [Invalid Specifications](#Invalid-Specifications) when you get an error |
| 36 | + * [Properties are Being Ignored](#Properties-are-Being-Ignored) when you don't see any errors or warnings |
| 37 | + * [Asking for Help](#Asking-for-Help) when you get stuck |
| 38 | + * [Reporting Issues](#Reporting-Issues) when you find a bug |
| 39 | +
|
| 40 | + In addition to this notebook, you might find the [Frequently Asked Questions](https://altair-viz.github.io/user_guide/faq.html) and [Display Troubleshooting](https://altair-viz.github.io/user_guide/troubleshooting.html) guides helpful. |
| 41 | +
|
| 42 | + _This notebook is part of the [data visualization curriculum](https://github.com/uwdata/visualization-curriculum)._ |
| 43 | + """) |
| 44 | + return |
| 45 | + |
| 46 | + |
| 47 | +@app.cell(hide_code=True) |
| 48 | +def _(mo): |
| 49 | + mo.md(r""" |
| 50 | + ## Installation |
| 51 | + """) |
| 52 | + return |
| 53 | + |
| 54 | + |
| 55 | +@app.cell(hide_code=True) |
| 56 | +def _(mo): |
| 57 | + mo.md(r""" |
| 58 | + These instructions follow [the Altair documentation](https://altair-viz.github.io/getting_started/installation.html) but focus on some specifics for this series of notebooks. |
| 59 | +
|
| 60 | + In every notebook, we will import the [Altair](https://github.com/altair-viz/altair) and [Vega Datasets](https://github.com/altair-viz/vega_datasets) packages. If you are running this notebook on [Colab](https://colab.research.google.com), Altair and Vega Datasets should be preinstalled and ready to go. The notebooks in this series are designed for Colab but should also work in Jupyter Lab or the Jupyter Notebook (the notebook requires a bit more setup [described below](#Special-Setup-for-the-Jupyter-Notebook)) but additional packages are required. |
| 61 | +
|
| 62 | + If you are running in Jupyter Lab or Jupyter Notebooks, you have to install the necessary packages by running the following command in your terminal. |
| 63 | +
|
| 64 | + ```bash |
| 65 | + pip install altair vega_datasets |
| 66 | + ``` |
| 67 | +
|
| 68 | + Or if you use [Conda](https://conda.io) |
| 69 | +
|
| 70 | + ```bash |
| 71 | + conda install -c conda-forge altair vega_datasets |
| 72 | + ``` |
| 73 | +
|
| 74 | + You can run command line commands from a code cell by prefixing it with `!`. For example, to install Altair and Vega Datasets with [Pip](https://pip.pypa.io/), you can run the following cell. |
| 75 | + """) |
| 76 | + return |
| 77 | + |
| 78 | + |
| 79 | +@app.cell |
| 80 | +def _(): |
| 81 | + # packages added via marimo's package management: altair vega_datasets !pip install altair vega_datasets |
| 82 | + return |
| 83 | + |
| 84 | + |
| 85 | +@app.cell |
| 86 | +def _(): |
| 87 | + import altair as alt |
| 88 | + from vega_datasets import data |
| 89 | + |
| 90 | + return alt, data |
| 91 | + |
| 92 | + |
| 93 | +@app.cell(hide_code=True) |
| 94 | +def _(mo): |
| 95 | + mo.md(r""" |
| 96 | + ### Make sure you are Using the Latest Version of Altair |
| 97 | + """) |
| 98 | + return |
| 99 | + |
| 100 | + |
| 101 | +@app.cell(hide_code=True) |
| 102 | +def _(mo): |
| 103 | + mo.md(r""" |
| 104 | + If you are running into issues with Altair, first make sure that you are running the latest version. To check the version of Altair that you have installed, run the cell below. |
| 105 | + """) |
| 106 | + return |
| 107 | + |
| 108 | + |
| 109 | +@app.cell |
| 110 | +def _(alt): |
| 111 | + alt.__version__ |
| 112 | + return |
| 113 | + |
| 114 | + |
| 115 | +@app.cell(hide_code=True) |
| 116 | +def _(mo): |
| 117 | + mo.md(r""" |
| 118 | + To check what the latest version of altair is, go to [this page](https://pypi.org/project/altair/) or run the cell below (requires Python 3). |
| 119 | + """) |
| 120 | + return |
| 121 | + |
| 122 | + |
| 123 | +@app.cell |
| 124 | +def _(): |
| 125 | + import urllib.request, json |
| 126 | + with urllib.request.urlopen("https://pypi.org/pypi/altair/json") as url: |
| 127 | + print(json.loads(url.read().decode())['info']['version']) |
| 128 | + return |
| 129 | + |
| 130 | + |
| 131 | +@app.cell(hide_code=True) |
| 132 | +def _(mo): |
| 133 | + mo.md(r""" |
| 134 | + If you are not running the latest version, you can update it with `pip`. You can update Altair and Vega Datasets by running this command in your terminal. |
| 135 | +
|
| 136 | + ``` |
| 137 | + pip install -U altair vega_datasets |
| 138 | + ``` |
| 139 | + """) |
| 140 | + return |
| 141 | + |
| 142 | + |
| 143 | +@app.cell(hide_code=True) |
| 144 | +def _(mo): |
| 145 | + mo.md(r""" |
| 146 | + ### Try Making a Chart |
| 147 | + """) |
| 148 | + return |
| 149 | + |
| 150 | + |
| 151 | +@app.cell(hide_code=True) |
| 152 | +def _(mo): |
| 153 | + mo.md(r""" |
| 154 | + Now you can create an Altair chart. |
| 155 | + """) |
| 156 | + return |
| 157 | + |
| 158 | + |
| 159 | +@app.cell |
| 160 | +def _(alt, data): |
| 161 | + cars = data.cars() |
| 162 | + |
| 163 | + alt.Chart(cars).mark_point().encode( |
| 164 | + x='Horsepower', |
| 165 | + y='Displacement', |
| 166 | + color='Origin' |
| 167 | + ) |
| 168 | + return (cars,) |
| 169 | + |
| 170 | + |
| 171 | +@app.cell(hide_code=True) |
| 172 | +def _(mo): |
| 173 | + mo.md(r""" |
| 174 | + ### Special Setup for the Jupyter Notebook |
| 175 | + """) |
| 176 | + return |
| 177 | + |
| 178 | + |
| 179 | +@app.cell(hide_code=True) |
| 180 | +def _(mo): |
| 181 | + mo.md(r""" |
| 182 | + If you are running in Jupyter Lab, Jupyter Notebook, or Colab (and have a working Internet connection) you should be seeing a chart. If you are running in another environment (or offline), you will need to tell Altair to use a different renderer; |
| 183 | +
|
| 184 | + To activate a different renderer in a notebook cell: |
| 185 | +
|
| 186 | + ```python |
| 187 | + # to run in nteract, VSCode, or offline in JupyterLab |
| 188 | + alt.renderers.enable('mimebundle') |
| 189 | +
|
| 190 | + ``` |
| 191 | +
|
| 192 | + To run offline in Jupyter Notebook you must install an additional dependency, the `vega` package. Run this command in your terminal: |
| 193 | +
|
| 194 | + ```bash |
| 195 | + pip install vega |
| 196 | + ``` |
| 197 | +
|
| 198 | + Then activate the notebook renderer: |
| 199 | +
|
| 200 | + ```python |
| 201 | + # to run offline in Jupyter Notebook |
| 202 | + alt.renderers.enable('notebook') |
| 203 | +
|
| 204 | + ``` |
| 205 | +
|
| 206 | +
|
| 207 | + These instruction follow [the instructions on the Altair website](https://altair-viz.github.io/getting_started/installation.html#installation-notebook). |
| 208 | + """) |
| 209 | + return |
| 210 | + |
| 211 | + |
| 212 | +@app.cell(hide_code=True) |
| 213 | +def _(mo): |
| 214 | + mo.md(r""" |
| 215 | + ## Display Troubleshooting |
| 216 | +
|
| 217 | + If you are having issues with seeing a chart, make sure your setup is correct by following the [debugging instruction above](#Installation). If you are still having issues, follow the [instruction about debugging display issues in the Altair documentation](https://iliatimofeev.github.io/altair-viz.github.io/user_guide/troubleshooting.html). |
| 218 | + """) |
| 219 | + return |
| 220 | + |
| 221 | + |
| 222 | +@app.cell(hide_code=True) |
| 223 | +def _(mo): |
| 224 | + mo.md(r""" |
| 225 | + ### Non Existent Fields |
| 226 | +
|
| 227 | + A common error is [accidentally using a field that does not exist](https://iliatimofeev.github.io/altair-viz.github.io/user_guide/troubleshooting.html#plot-displays-but-the-content-is-empty). |
| 228 | + """) |
| 229 | + return |
| 230 | + |
| 231 | + |
| 232 | +@app.cell |
| 233 | +def _(alt): |
| 234 | + import pandas as pd |
| 235 | + |
| 236 | + df = pd.DataFrame({'x': [1, 2, 3], |
| 237 | + 'y': [3, 1, 4]}) |
| 238 | + |
| 239 | + alt.Chart(df).mark_point().encode( |
| 240 | + x='x:Q', |
| 241 | + y='y:Q', |
| 242 | + color='color:Q' # <-- this field does not exist in the data! |
| 243 | + ) |
| 244 | + return (df,) |
| 245 | + |
| 246 | + |
| 247 | +@app.cell(hide_code=True) |
| 248 | +def _(mo): |
| 249 | + mo.md(r""" |
| 250 | + Check the spelling of your files and print the data source to confirm that the data and fields exist. For instance, here you see that `color` is not a vaid field. |
| 251 | + """) |
| 252 | + return |
| 253 | + |
| 254 | + |
| 255 | +@app.cell |
| 256 | +def _(df): |
| 257 | + df.head() |
| 258 | + return |
| 259 | + |
| 260 | + |
| 261 | +@app.cell(hide_code=True) |
| 262 | +def _(mo): |
| 263 | + mo.md(r""" |
| 264 | + ## Invalid Specifications |
| 265 | +
|
| 266 | + Another common issue is creating an invalid specification and getting an error. |
| 267 | + """) |
| 268 | + return |
| 269 | + |
| 270 | + |
| 271 | +@app.cell(hide_code=True) |
| 272 | +def _(mo): |
| 273 | + mo.md(r""" |
| 274 | + ### Invalid Properties |
| 275 | +
|
| 276 | + Altair might show an `SchemaValidationError` or `ValueError`. Read the error message carefully. Usually it will tell you what is going wrong. |
| 277 | + """) |
| 278 | + return |
| 279 | + |
| 280 | + |
| 281 | +@app.cell(hide_code=True) |
| 282 | +def _(mo): |
| 283 | + mo.md(r""" |
| 284 | + For example, if you forget the mark type, you will see this `SchemaValidationError`. |
| 285 | + """) |
| 286 | + return |
| 287 | + |
| 288 | + |
| 289 | +@app.cell |
| 290 | +def _(alt, cars): |
| 291 | + alt.Chart(cars).encode( |
| 292 | + y='Horsepower' |
| 293 | + ) |
| 294 | + return |
| 295 | + |
| 296 | + |
| 297 | +@app.cell(hide_code=True) |
| 298 | +def _(mo): |
| 299 | + mo.md(r""" |
| 300 | + Or if you use a non-existent channel, you get a `TypeError`. |
| 301 | + """) |
| 302 | + return |
| 303 | + |
| 304 | + |
| 305 | +@app.cell |
| 306 | +def _(alt, cars): |
| 307 | + try: |
| 308 | + alt.Chart(cars).mark_point().encode( |
| 309 | + z='Horsepower' |
| 310 | + ) |
| 311 | + except TypeError as e: |
| 312 | + print(f"TypeError: {e}") |
| 313 | + return |
| 314 | + |
| 315 | + |
| 316 | +@app.cell(hide_code=True) |
| 317 | +def _(mo): |
| 318 | + mo.md(r""" |
| 319 | + ## Properties are Being Ignored |
| 320 | +
|
| 321 | + Altair might ignore a property that you specified. In the chart below, we are using a `text` channel, which is only compatible with `mark_text`. You do not see an error or a warning about this in the notebook. However, the underlying Vega-Lite library will show a warning in the browser console. Press <kbd>Alt</kbd>+<kbd>Cmd</kbd>+<kbd>I</kbd> on Mac or <kbd>Alt</kbd>+<kbd>Ctrl</kbd>+<kbd>I</kbd> on Windows and Linux to open the developer tools and click on the `Console` tab. When you run the example in the cell below, you will see a the following warning. |
| 322 | +
|
| 323 | + ``` |
| 324 | + WARN text dropped as it is incompatible with "bar". |
| 325 | + ``` |
| 326 | + """) |
| 327 | + return |
| 328 | + |
| 329 | + |
| 330 | +@app.cell |
| 331 | +def _(alt, cars): |
| 332 | + alt.Chart(cars).mark_bar().encode( |
| 333 | + y='mean(Horsepower)', |
| 334 | + text='mean(Acceleration)' |
| 335 | + ) |
| 336 | + return |
| 337 | + |
| 338 | + |
| 339 | +@app.cell(hide_code=True) |
| 340 | +def _(mo): |
| 341 | + mo.md(r""" |
| 342 | + If you find yourself debugging issues related to Vega-Lite, you can open the chart in the [Vega Editor](https://vega.github.io/editor/) either by clicking on the "Open in Vega Editor" link at the bottom of the chart or in the action menu (click to open) at the top right of a chart. The Vega Editor provides additional debugging but you will be writing Vega-Lite JSON instead of Altair in Python. |
| 343 | +
|
| 344 | + **Note**: The Vega Editor may be using a newer version of Vega-Lite and so the behavior may vary. |
| 345 | + """) |
| 346 | + return |
| 347 | + |
| 348 | + |
| 349 | +@app.cell(hide_code=True) |
| 350 | +def _(mo): |
| 351 | + mo.md(r""" |
| 352 | + ## Asking for Help |
| 353 | +
|
| 354 | + If you find a problem with Altair and get stuck, you can ask a question on Stack Overflow. Ask your question with the `altair` and `vega-lite` tags. You can find a list of questions people have asked before [here](https://stackoverflow.com/questions/tagged/altair). |
| 355 | + """) |
| 356 | + return |
| 357 | + |
| 358 | + |
| 359 | +@app.cell(hide_code=True) |
| 360 | +def _(mo): |
| 361 | + mo.md(r""" |
| 362 | + ## Reporting Issues |
| 363 | +
|
| 364 | + If you find a problem with Altair and believe it is a bug, please [create an issue in the Altair GitHub repo](https://github.com/altair-viz/altair/issues/new) with a description of your problem. If you believe the issue is related to the underlying Vega-Lite library, please [create an issue in the Vega-Lite GitHub repo](https://github.com/vega/vega-lite/issues/new). |
| 365 | + """) |
| 366 | + return |
| 367 | + |
| 368 | + |
| 369 | +if __name__ == "__main__": |
| 370 | + app.run() |
0 commit comments