### Installing Great Tables via pip (Bash)

Source: https://github.com/posit-dev/great-tables/blob/main/README.md

Provides the command-line instruction to install the great_tables package using the pip package installer.

```Bash
$ pip install great_tables
```

--------------------------------

### Install All Dependencies (Including Image Generation) - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Installs all project dependencies, including optional ones like those needed for generating table images (`selenium`, `Pillow`). Use this command if you plan to work on features related to image output.

```bash
pip install .[all]
```

--------------------------------

### Install Development Dependencies - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Installs the development dependencies specified in the `pyproject.toml` file's `[dev]` extra. These dependencies include tools for linting, formatting, and testing, which are essential for contributing to the project.

```bash
pip install .[dev]
```

--------------------------------

### Installing Great Tables via Conda (Bash)

Source: https://github.com/posit-dev/great-tables/blob/main/README.md

Provides the command-line instruction to install the great_tables package from the conda-forge channel using the conda package manager.

```Bash
conda install conda-forge::great_tables
```

--------------------------------

### Install Great Tables in Editable Mode - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Installs the Great Tables package from the local source directory in editable mode. This allows developers to make changes to the code and see them reflected immediately without needing to reinstall the package. Run this command from the root of the project folder.

```bash
pip install -e .
```

--------------------------------

### Create and Format Great Table for Sports Earnings (Python)

Source: https://github.com/posit-dev/great-tables/blob/main/docs/examples/sports-earnings/index.ipynb

This snippet uses the great_tables library to create a formatted table from the prepared Polars DataFrame (`res`). It sets the rowname column, adds a header and column spanner, formats numeric columns (Total Earnings, Off-the-Field Earnings) by scaling and setting decimals, formats the 'icon' column as images, and adds a source note using markdown. Requires the `great_tables` library and the `res` DataFrame.

```python
(
    GT(res, rowname_col="Rank")
    .tab_header("Highest Paid Athletes in 2023")
    .tab_spanner("Earnings", cs.contains("Earnings"))
    #.fmt_number(cs.starts_with("Total"), scale_by = 1/1_000_000, decimals=1)
    .cols_label(**{
        "Total Earnings": "Total $M",
        "Off-the-Field Earnings": "Off field $M",
        "Off-the-Field Earnings Perc": "Off field %"
    })
    .fmt_number(["Total Earnings", "Off-the-Field Earnings"], scale_by = 1/1_000_000, decimals=1)
    .fmt_image("icon", path="./")
    .tab_source_note(
        md(
            '<br><div style="text-align: center;">'
            "Original table: [@LisaHornung_](https://twitter.com/LisaHornung_/status/1752981867769266231)"
            " | Sports icons: [Firza Alamsyah](https://thenounproject.com/browse/collection-icon/sports-96427)"
            " | Data: Forbes"
            "</div>"
            "<br>"
        )
    )
)
```

--------------------------------

### Prepare Sports Earnings Data for Great Tables (Python)

Source: https://github.com/posit-dev/great-tables/blob/main/docs/examples/sports-earnings/index.ipynb

This snippet uses Polars to read sports earnings data from a CSV file, calculate the percentage of off-the-field earnings, generate HTML bar visualizations for this percentage, and prepare the DataFrame for use with the great_tables library. It reads `./sports_earnings.csv`, calculates `raw_perc`, creates an `icon` path, limits to the top 9 rows, applies the `create_bar` function to create the `Off-the-Field Earnings Perc` column, and selects relevant columns. Requires `polars` and the `create_bar` function.

```python
import polars as pl
import polars.selectors as cs
from great_tables import GT, md


def create_bar(prop_fill: float, max_width: int, height: int) -> str:
    """Create divs to represent prop_fill as a bar."""
    width = round(max_width * prop_fill, 2)
    px_width = f"{width}px"
    return f"""\
    <div style="width: {max_width}px; background-color: lightgrey;">\
        <div style="height:{height}px;width:{px_width};background-color:green;"></div>\
    </div>\
    """


df = pl.read_csv("./sports_earnings.csv")

res = (
    df.with_columns(
        (pl.col("Off-the-Field Earnings") / pl.col("Total Earnings")).alias("raw_perc"),
        (pl.col("Sport").str.to_lowercase() + ".png").alias("icon"),
    )
    .head(9)
    .with_columns(
        pl.col("raw_perc")
          .map_elements(lambda x: create_bar(x, max_width=75, height=20))
          .alias("Off-the-Field Earnings Perc")
    )
    .select("Rank", "Name", "icon", "Sport", "Total Earnings", "Off-the-Field Earnings", "Off-the-Field Earnings Perc")
)
```

--------------------------------

### Build Documentation Locally - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Builds the project documentation locally using the configured documentation generator (`quartodoc`). The output HTML files are placed in the `docs/_site` directory. This is useful for previewing documentation changes during development.

```bash
make docs-build
```

--------------------------------

### Creating a Display Table with Great Tables (Python)

Source: https://github.com/posit-dev/great-tables/blob/main/README.md

Demonstrates how to create a display table using the GT class from the great_tables package. It shows how to add a header, format currency, date, and number columns, and hide a specific column using method chaining.

```Python
(
    GT(sp500_mini)
    .tab_header(title="S&P 500", subtitle=f"{start_date} to {end_date}")
    .fmt_currency(columns=["open", "high", "low", "close"])
    .fmt_date(columns="date", date_style="wd_m_day_year")
    .fmt_number(columns="volume", compact=True)
    .cols_hide(columns="adj_close")
)
```

--------------------------------

### Run All Tests - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Runs the entire test suite for the Great Tables package using `pytest`. This command executes all tests located in the `tests` folder to verify the correctness of the code. It should pass before submitting a pull request.

```bash
make test
```

--------------------------------

### Run Pre-Commit Checks Manually - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Manually runs all configured pre-commit hooks against all files in the repository. This command helps ensure that code changes adhere to project standards before they are committed, catching potential issues early.

```bash
pre-commit run --all-files
```

--------------------------------

### Run Specific Test File - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Executes tests contained within a specific test file using `pytest`. Replace `tests/test_file.py` with the path to the test file you want to run. This is useful for focusing on tests related to a specific feature or bug fix.

```bash
pytest tests/test_file.py
```

--------------------------------

### Update Snapshot Tests - Bash

Source: https://github.com/posit-dev/great-tables/blob/main/CONTRIBUTING.md

Runs the test suite with the `--snapshot-update` flag for `pytest`. This command updates any existing snapshot files if the test output has changed. It should be followed by `make test` to verify the updated snapshots.

```bash
make test-update
```

--------------------------------

### BibTeX Citation for Great Tables

Source: https://github.com/posit-dev/great-tables/blob/main/README.md

This snippet provides the BibTeX entry recommended for citing the Great Tables Python package in research, projects, or products.

```bibtex
@software{Iannone_great_tables,
author = {Iannone, Richard and Chow, Michael},
license = {MIT},
title = {{great-tables: Make awesome display tables using Python.}},
url = {https://github.com/posit-dev/great-tables},
version = {0.14.0}
}
```

--------------------------------

### CSS Styles for Great Tables Table Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

Defines visual styles for a table, including background colors, font properties, borders, padding, and text alignment for different parts like table cells, row groups, and source notes. It uses specific class names like `gt_row_group_first`, `gt_table_body`, `gt_sourcenotes`, and alignment classes to apply styles.

```CSS
background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; } #vtbglfufmz .gt_row_group_first td { border-top-width: 2px; } #vtbglfufmz .gt_row_group_first th { border-top-width: 2px; } #vtbglfufmz .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; } #vtbglfufmz .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; } #vtbglfufmz .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; } #vtbglfufmz .gt_left { text-align: left; } #vtbglfufmz .gt_center { text-align: center; } #vtbglfufmz .gt_right { text-align: right; font-variant-numeric: tabular-nums; } #vtbglfufmz .gt_font_normal { font-weight: normal; } #vtbglfufmz .gt_font_bold { font-weight: bold; } #vtbglfufmz .gt_font_italic { font-style: italic; } #vtbglfufmz .gt_super { font-size: 65%; } #vtbglfufmz .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; } #vtbglfufmz .gt_asterisk { font-size: 100%; vertical-align: 0; }
```

--------------------------------

### Base CSS Styles for Great Tables

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines the foundational styles for tables generated by the 'great-tables' library. It includes global table properties, font families, border styles, padding, margins, and specific styles for table elements such as captions, titles, headings, column headers, and individual rows and cells. The styles ensure consistent visual presentation and responsiveness for rendered tables.

```css
#vtbglfufmz table { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #vtbglfufmz thead, tbody, tfoot, tr, td, th { border-style: none; } tr { background-color: transparent; } #vtbglfufmz p { margin: 0; padding: 0; } #vtbglfufmz .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; } #vtbglfufmz .gt_caption { padding-top: 4px; padding-bottom: 4px; } #vtbglfufmz .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; } #vtbglfufmz .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; } #vtbglfufmz .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; } #vtbglfufmz .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; } #vtbglfufmz .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; } #vtbglfufmz .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; } #vtbglfufmz .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; } #vtbglfufmz .gt_column_spanner_outer:first-child { padding-left: 0; } #vtbglfufmz .gt_column_spanner_outer:last-child { padding-right: 0; } #vtbglfufmz .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; } #vtbglfufmz .gt_spanner_row { border-bottom-style: hidden; } #vtbglfufmz .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; } #vtbglfufmz .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; } #vtbglfufmz .gt_from_md> :first-child { margin-top: 0; } #vtbglfufmz .gt_from_md> :last-child { margin-bottom: 0; } #vtbglfufmz .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; } #vtbglfufmz .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; } #vtbglfufmz .gt_stub_row_group { color: #333333; 
```

--------------------------------

### Filter sp500 Dataset with Pandas in Python

Source: https://github.com/posit-dev/great-tables/blob/main/README.md

This snippet demonstrates how to import necessary components from the great-tables library and filter the included `sp500` dataset using standard Pandas DataFrame operations. It defines a date range and selects rows where the 'date' column falls within that range, preparing a subset of data for table creation.

```python
from great_tables import GT
from great_tables.data import sp500

# Define the start and end dates for the data range
start_date = "2010-06-07"
end_date = "2010-06-14"

# Filter sp500 using Pandas to dates between `start_date` and `end_date`
sp500_mini = sp500[(sp500["date"] >= start_date) & (sp500["date"] <= end_date)]
```

--------------------------------

### CSS Styles for Interactive Data Visualization Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

Defines styles for text, vertical lines, horizontal lines, reference lines, and Y-axis lines, primarily focusing on hover states to provide visual feedback. It sets font family, stroke properties, fill colors, and text colors for various interactive chart components, ensuring a consistent look and feel.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styles for Interactive Chart Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines styles for various graphical elements commonly found in data visualizations, such as text labels, vertical lines, horizontal lines, reference lines, and Y-axis lines. It includes default styles and specific hover effects to enhance interactivity and visual feedback.

```css
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styling for Interactive Chart Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines styles for various interactive elements within a chart or visualization, including text formatting and hover effects for vertical, horizontal, reference, and Y-axis lines. It enhances user interaction by changing element appearance on hover, providing visual feedback to the user.

```css
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; }
.vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; }
.vert-line:hover text { stroke: white; fill: #212427; }
.horizontal-line:hover text {stroke: white; fill: #212427; }
.ref-line:hover rect { stroke: #FFFFFF60; }
.ref-line:hover line { stroke: #FF0000; }
.ref-line:hover text { stroke: white; fill: #212427; }
.y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; }
.y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### Apply Base and Hover Styles to Chart Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines base styles for text elements, ensuring a consistent monospace font. It also includes hover effects for vertical lines, horizontal lines, reference lines, and Y-axis lines, changing their appearance (fill, stroke, text color, stroke width) upon user interaction to provide visual cues.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; }
.vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; }
.vert-line:hover text { stroke: white; fill: #212427; }
.horizontal-line:hover text {stroke: white; fill: #212427; }
.ref-line:hover rect { stroke: #FFFFFF60; }
.ref-line:hover line { stroke: #FF0000; }
.ref-line:hover text { stroke: white; fill: #212427; }
.y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; }
.y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styles for Interactive Chart Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines the default font styling for text elements and specifies hover effects for different types of lines (vertical, horizontal, reference, and Y-axis lines) within a data visualization. It includes changes to fill, stroke, and text color/stroke on hover to provide visual feedback.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; }
.vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; }
.vert-line:hover text { stroke: white; fill: #212427; }
.horizontal-line:hover text {stroke: white; fill: #212427; }
.ref-line:hover rect { stroke: #FFFFFF60; }
.ref-line:hover line { stroke: #FF0000; }
.ref-line:hover text { stroke: white; fill: #212427; }
.y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; }
.y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styling for SVG Interactive Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines base styles for text elements within an SVG context and specifies hover effects for different line types (vertical, horizontal, reference, and Y-axis lines). Hover states modify fill, stroke, and text colors to provide visual feedback.

```css
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; }
.vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; }
.vert-line:hover text { stroke: white; fill: #212427; }
.horizontal-line:hover text {stroke: white; fill: #212427; }
.ref-line:hover rect { stroke: #FFFFFF60; }
.ref-line:hover line { stroke: #FF0000; }
.ref-line:hover text { stroke: white; fill: #212427; }
.y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; }
.y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styling for Chart Elements and Hover Interactions

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS defines base styles for text elements, including font families and stroke properties. It also specifies a series of hover effects for various graphical components like vertical lines, horizontal lines, reference lines, and Y-axis lines, providing visual feedback when a user interacts with them. These styles are crucial for enhancing user experience in interactive data visualizations.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; }
.vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; }
.vert-line:hover text { stroke: white; fill: #212427; }
.horizontal-line:hover text {stroke: white; fill: #212427; }
.ref-line:hover rect { stroke: #FFFFFF60; }
.ref-line:hover line { stroke: #FF0000; }
.ref-line:hover text { stroke: white; fill: #212427; }
.y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; }
.y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styling for SVG Elements with Hover Effects

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines styles for text elements and various line/rectangle elements within an SVG context. It includes hover effects that change fill, stroke, and text properties to provide visual feedback, commonly used in interactive charts or graphs.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### SVG Element Styling with Hover Effects

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

Defines common styles for text elements within SVG, including font family, stroke width, and paint order. It also specifies hover effects for various chart components like vertical lines, horizontal lines, reference lines, and Y-axis lines, changing their fill, stroke, and text properties on hover to provide visual feedback.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Styling for SVG Hover Effects

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS snippet defines styling for text elements and various line types within SVG graphics, specifically implementing visual changes on hover. It sets a monospace font for all text and applies distinct fill, stroke, and color modifications when different line elements are hovered over, providing interactive feedback.

```CSS
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

--------------------------------

### CSS Hover Effects for Table/Chart Elements

Source: https://github.com/posit-dev/great-tables/blob/main/docs/blog/pycon-2024-great-tables-are-possible/table.html

This CSS block provides styling for different interactive components, such as text and various types of lines (vertical, horizontal, reference, y-axis). On hover, it modifies properties like fill color, stroke, and text color to provide visual feedback, making the elements more responsive to user interaction.

```css
text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.