Skip to main content
SimilarExport ZIP
100%

Exploratory Summary (Vega-Lite API)

✓ Published0🌍 Public
WWaseem Medhat
Last edited Oct 17, 2020
Created on Oct 17, 2020

This example provides an exploratory summary of the Indian Liver Patient Records dataset from GitHub, displaying dataset size, row and column counts, and column names alongside an interactive circular scatterplot. The visualization plots the Albumin column against itself using Vega-Lite’s API within a React app, with d3.v6 handling CSV parsing. The chart is rendered as an SVG via the vega and vega-lite libraries, with a vega-tooltip handler enabling hover interactions and custom axis styling from a shared configuration.

AI-generated description

A react app that loads and parses a CSV dataset hosted on GitHub, and shows some summary information and univariate plots.

Dataset: Indian Liver Patient Records.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays patient data, plotting total hospital stay against number of visits, with color encoding for patient category, point size for sepsis flag, and tooltips revealing patient identifiers. It uses the Vega-Lite API to declare the circle mark and encodings, with vega and vega-lite handling rendering and the Handler from vega-tooltip providing interaction. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file. The chart fits to the window size and applies custom axis and label styling from a config object.

EEngineerRajeev
76% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

AAtharvap2000
74% match
Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render a scatter-style point plot of institutional data, with countries on the x-axis and the number of experts on the y-axis. The points are colored and sized by expert count, and tooltips display institution names. It loads CSV data from a GitHub gist using d3.csv, configures visual appearance through a custom config object, and renders interactively with a tooltip handler. The visualization is built in a React-compatible setup using vega, vega-lite, and vega-lite-api libraries, with a responsive full-window layout.

Aashershah
74% 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
74% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between vehicle weight, horsepower, and miles per gallon. The visualization uses the Vega-Lite API within a React framework, loading data from a CSV file via D3’s `csv` method. It renders a circle mark for each car, with color encoding weight, size encoding mpg, and tooltips revealing the car name. The code registers Vega-Lite with Vega and integrates the Vega Tooltip handler for interactive labels.

RRahul Gupta
74% match
Loading thumbnail…

ExploreVLAPI

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a React application. It loads automobile data from a remote JSON dataset and renders a scatterplot showing the relationship between miles per gallon and engine displacement, with color encoding for cylinders and faceting by origin. The visualization leverages the vega-lite-api library to construct the chart declaratively, while vega-tooltip enables hover interactions. Data is fetched asynchronously using a custom getData function, and the resulting chart is rendered as an SVG inside a React component.

Ssking8484
74% match
Loading thumbnail…

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Bbakstorage00001
74% match
Loading thumbnail…

vega

This example visualizes automobile data using a Vega-Lite scatter plot, with circles positioned by weight and horsepower, colored by origin, sized by miles per gallon, and showing car names on hover. The visualization is built with the vega-lite-api library, which compiles specifications to Vega, and is rendered as an SVG using the vega view. Data is loaded asynchronously from a CSV file with d3.csv, and the chart is dynamically sized to fit the window. The code includes custom styling for axes and tooltip formatting.

MMatt Lane
74% match