LP-Explain Cardiotocograms_AirQuality

LP-Explain Cardiotocograms

This example visualizes cardiotocogram data from the UCI Machine Learning Repository, presenting a scatter plot of two data fields colored by class alongside a small multiples navigator grid. The main chart uses vega-lite-api with `vl.markCircle` and encoded quantitative fields for x and y axes. A secondary chart repeats 4x4 mini plots for navigation, both rendered via vega-lite-api’s `repeat` and `config` options. Data loads asynchronously through d3.csv, and vega-tooltip provides interactive hover details.

84% match

Vega-Lite API Template 6

This interactive scatter plot visualizes the relationship between temperature (T) and relative humidity (RH) from the UCI Air Quality dataset, rendering thousands of overlapping semi-transparent points to reveal density patterns. Built entirely with the Vega-Lite API, the visualization uses `vl.markCircle` and encodes quantitative axes with configurable scales. The code imports data via D3's `csv` method, then renders the chart using Vega and Vega-Lite engines with an SVG renderer and tooltip support, while custom configuration adjusts axis styling and typography for readability.

79% match

Vega-Lite API Template 7

This example visualizes automobile data from the UCI Auto MPG dataset, plotting two numeric attributes as a scatter plot with points colored by vehicle class. The main chart fills the viewport, while a smaller overview version in the corner provides navigation context. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, with `vl.color().fieldN()` for categorical coloring. Data loads via D3’s `csv` function, and the configuration customizes axis styling and label appearance.

74% match

interactive graph

This interactive scatterplot displays air quality index (AQI) values over time, plotting each daily measurement as a point with a fixed size and full opacity. Hovering reveals the exact AQI value via tooltip. The visualization loads daily API data from a CSV file using `d3.csv`, then builds the chart with the vega-lite-api library, which registers Vega and Vega-Lite and renders to SVG. The chart automatically fits the window size and applies custom styling for readability.

CChase Hall

73% match

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

YYodae Lim

Vega-Lite API Template 8

This visualization displays two scatter plots of Auto MPG data from the UCI Machine Learning Repository. The main chart plots two quantitative fields against each other, colored by vehicle class, while a smaller repeater panel shows multiple combinations of the same fields. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode variables, with D3’s `csv` loader for data parsing. The code configures custom axes, tooltips via vega-tooltip, and responsive sizing that adapts to the window dimensions.

bar graph exsample

This example combines a bar graph and a line graph to compare Air Quality Index (AQI) values across different pollutants. The bar chart displays AQI values with tooltips, while the line chart overlays the same data points, both sharing the x-axis for AQI and y-axis for pollutant names. The visualization uses vega-lite-api, registering vega and vega-lite, and loads data from a CSV file via d3.csv. Custom axis and label styling is applied through a config object to improve readability.

CChase Hall

tests

This visualization plots air quality index (AQI) values over time, with each point colored by the main pollutant type. It uses the vega-lite-api library to construct a scatterplot with tooltips showing AQI value and pollutant. A horizontal red rule line is also drawn at a fixed y-value of 20, though its significance is not labeled. The data is loaded from a CSV file hosted on GitHub using d3.csv, and the visualization is rendered with Vega-Lite in an SVG view.

CChase Hall