Skip to main content
SimilarExport ZIP
100%

ScatterPlot

✓ Published0🌍 Public
Mmayhob
Last edited Mar 1, 2022
Created on Mar 1, 2022

This example displays a scatter plot of work-related variables, with each point representing an initiative and color-coded by its category. The visualization loads CSV data from a GitHub repository and uses the vega-lite-api to construct the chart, with custom styling applied through a config object. The plot is rendered as an SVG, and interactive tooltips show initiative names on hover. The code integrates React for state management and uses d3.csv for data parsing, with VEGA-Lite handling the quantitative encodings for both axes.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley
76% match
Loading thumbnail…

Vega Vehicle Scatter Plot

This example renders a scatter plot of vehicle data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, and miles per gallon, with origin as a color-coded category. Built with React and the Vega-Lite API, it uses `vl.markCircle` to encode fields for x, y, size, color, and tooltip, while the `config.js` file customizes axis styles and label appearance. The visualization fetches data asynchronously via `d3.csv`, registers the Vega tooltip handler for interactive tooltips, and dynamically sizes the plot to fit the window using `autosize`.

AAmeer Nuri
76% match
Loading thumbnail…

Scatter plot

This example renders a scatter plot from CSV data fetched from a GitHub Gist via `fetch` and parsed with `d3.csvParse`. It automatically selects numeric columns for the x and y axes, with an optional categorical column mapped to colored dots. The visualization is drawn as an SVG using D3 v7, featuring labeled axes, a legend for categories when present, and a warm, minimalist styling theme. The code is designed to be adaptable, falling back to the first two numeric columns if no recognizable column names are found.

SSreedevi Itta
76% match
Loading thumbnail…

React & Vega Integration Test

This example demonstrates the integration of React with Vega and Vega-Lite for data visualization. It renders a scatter plot of greenhouse gas emissions data from Our World in Data, mapping the "Processing" and "Farm" fields to the x- and y-axes. The React component loads CSV data using D3’s `csv` method, then constructs the plot via the Vega-Lite API, configuring axis styles and fitting the visualization to the window. The rendered SVG is appended to the DOM within a React lifecycle method, with cleanup handled on unmount.

Nnecat1
76% match
Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79
76% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

Jjacoyat08
76% match
Loading thumbnail…

Scatter Plot with Small Points

This scatter plot visualizes the relationship between module values and module codes, with point size encoding the department category. The visualization uses the vega-lite-api to construct a scatter plot with small, semi-transparent filled points, styled with custom axis and label configurations for improved readability. Data is loaded asynchronously from a CSV file using D3’s csv parser, and the chart is rendered as an SVG via vega-lite, with tooltips enabled through vega-tooltip. The plot fills the entire viewport and uses a fit autosize strategy.

KKeerthiKandadai
75% match