Water potability Vega-Lite API Template

100%

Water potability Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 6, 2022

Created on Jan 19, 2022

This interactive scatterplot visualizes water potability by plotting turbidity against hardness, with point color encoding pH and point size encoding total dissolved solids. Hovering reveals whether each sample is potable (1) or non-potable (0). The visualization is built using the Vega-Lite API template with d3.csv loading data from a Kaggle-derived water quality dataset. Vega-Lite’s declarative API, registered with vega and vega-lite, handles rendering, while vega-tooltip provides interactive hover details. The custom config.js adjusts axis styling for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the Water Quality dataset found on Kaggle : https://www.kaggle.com/adityakadiwal/water-potability I can't find the original source for this dataset so there is a good probability it is fake. Anyways, this is just for me to understand how the Vega-Lite API works. With the mouse you can hover and see if the water is potable for each data point. One means it's potable, and 0 means it's not.

Gist : https://gist.github.com/GuillaumeLoslier/bceac23341313c2886304cb88e89b504

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

AAliaksandr

71% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

71% match

Loading thumbnail…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

OOleJRask

70% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

70% match

Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates six distinct data visualizations rendered sequentially on a single page, exploring relationships between automotive attributes like miles per gallon, horsepower, and weight from the auto-mpg dataset, alongside temperature trends over time from the week temperature SF dataset. The visualizations include scatter plots, line charts, and point plots, each customized with tooltips and color encoding. Built using the Vega-Lite API wrapper, the code dynamically retrieves CSV data via D3 and configures visual properties programmatically, with options for mark type, size, opacity, and axis scaling. The framework combines Vega, Vega-Lite, and Vega-Tooltip for interactive SVG rendering.

SSulav Bista

70% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

69% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

69% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Ssinghjy

69% match