Scatter Plot with Small Points

100%

Scatter Plot with Small Points

✓ Published0🌍 Public

Last edited May 10, 2020

Created on May 10, 2020

Forked from 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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Student count for Each department

A scatter plot shows the relationship between female and male student counts across academic departments, with each circle colored by major category and a tooltip revealing the module name. The visualization uses the vega-lite-api library to define the chart specification, loading data from a CSV file via d3.csv. It renders through vega-lite and vega, with a custom dark-themed configuration for axes and labels. The circle size is fixed rather than encoding a third variable, and the chart fills the browser window.

KKeerthiKandadai

77% match

Loading thumbnail…

A scatter plot Graph.js

A scatter plot displays module marks for individual courses, with each circle’s vertical position representing a module code and horizontal position showing its mark. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Data loads from a local CSV file via d3.csv, and axes are generated with `axisLeft` and `axisBottom`. Grid lines extend across the plot through tick sizes, while a labeled axis and title provide context.

WW9183907

75% match

Loading thumbnail…

Student count for Each department

A scatter plot presents the average female student count against the average male student count for each department, with color encoding for the major category and tooltips revealing the specific module. Data is loaded from a CSV file via d3.csv. The visualization is built using the vega-lite-api, which layers vega-lite specifications and renders with the vega engine. Circle size is fixed, while axis and style configurations improve readability.

Mmarksampras

75% match

Loading thumbnail…

ScatterPlot

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.

Mmayhob

75% match

Loading thumbnail…

Scatter Plot with Small Points

This scatter plot visualizes automotive data from an auto-mpg CSV dataset, mapping vehicle origin to weight with small circular points. Tooltips reveal the car model names on hover. Built using the vega-lite-api, it renders through Vega-Lite’s markPoint encoding, with axis styling and layout configured in a separate config.js file, and the data loaded asynchronously via d3.csv.

CCurran Kelleher

75% match

Loading thumbnail…

Fork of Fork of Student count for Each department

This scatter plot displays the relationship between Female and Male student counts across different departments, with each point representing a department and its major category encoded by color. The data is loaded from a CSV file using D3’s `csv` function, and the visualization is rendered with the Vega-Lite API, configured via `vl.markCircle` for size, `vl.x` and `vl.y` for quantitative axes, and `vl.color` for categorical grouping. Tooltips show the module name, and the chart auto-fits the window using Vega-Lite’s `autosize` method.

NNarayana Reddy

74% match

Loading thumbnail…

A scatter plot Graph.js

This scatter plot shows the average marks achieved across university modules, with each module represented as a circle positioned along a linear mark scale and a point-based module axis. The visualization uses D3 v5 to load CSV data, apply linear and point scales, and render SVG circles with a steelblue fill. It includes custom axes with tick lines, formatted tick labels, and a marks axis label. The graph emphasizes distribution and comparison of module performance through clear spatial encoding.

WW9183907

74% match

Loading thumbnail…

Student count for Each department

This visualization shows the total number of students for each department using colored circles plotted on a scatter plot, with the department names on the y-axis and student counts on the x-axis. Each circle’s color encodes the department, while tooltips reveal the exact student count on hover. The data is loaded from a remote CSV file using `d3.csv` within the `getData.js` module, and the chart is rendered with the vega-lite-api library, which wraps Vega-Lite specifications. The visualization automatically fits its canvas to the full browser window using the `autosize` configuration.

KKeerthiKandadai

74% match