Skip to main content
SimilarExport ZIP
100%

fm viz - students vs ratios

✓ Published0🌍 Public
MMahesha999
Last edited Feb 8, 2022
Created on Feb 7, 2022

This visualization shows student-to-teacher ratios across different students using two overlaid line charts, comparing two quantitative variables (d and e) for each student name. The data comes from a CSV file referenced from the UCI Machine Learning Repository. Built with Vega-Lite API and d3, the code uses vega-lite-api’s `markLine` and `encode` methods to map the categorical student names to the x-axis and the quantitative values to the y-axis, with the second line layered on top using `vl.layer` to combine both series. The visualization is rendered as an SVG, with custom styling for axes and labels defined in a configuration object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

My bookmarks:

MIT Licensed

Similar vizzes

Loading thumbnail…

Student to Teacher Ratios - Ratio by Education Type

This visualization displays student-to-teacher ratios across different education types as a scatter plot, with each dot representing a country positioned by education category and ratio value. The points use partial opacity to reveal data density, while tooltips identify outlier countries by name. Built with the Vega-Lite API on top of D3.js, the chart loads CSV data from a Tidy Tuesday dataset and uses a custom configuration to adjust axis and label styling.

Vvwm
74% match
Loading thumbnail…

Student to Teacher Ratios

This example loads a student-to-teacher ratio dataset from a CSV file and displays summary statistics about the data, including its size in kilobytes, row count, and column count. The visualization uses the D3.js library (v5) to fetch and parse the CSV via `d3.csv`, then formats the results using `d3.csvFormat`. A large `<pre>` element shows the computed metrics in text form. The dataset, sourced from Tidy Tuesday, contains country, year, educational level, and ratio fields, though the current code only reports dataset dimensions rather than rendering charts or graphs.

Vvwm
72% 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
70% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays student performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting exam marks against study time as circles colored by number of courses and sized by an integer attribute. Built with the Vega-Lite API and D3 v5, it renders an interactive scatter plot with tooltips showing student names. The code uses `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode variables, while fetching data via `d3.csv`. The chart fills the browser window and employs a custom config for improved label readability.

NNaimisha-M
69% match
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
69% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the Students to Staff Ratio for universities across different countries. It uses D3.js (version 7) with an SVG rendering approach to display each country as a red circle, positioned along a categorical x-axis for country names and a linear y-axis for the ratio values. The code loads data from a CSV file via a GitHub gist URL, and employs D3's `scaleBand` and `scaleLinear` functions to map the data coordinates, along with `d3.axisLeft` and `d3.axisBottom` to generate the axes.

Vvinodreddysagam929@gmail.com
68% match
Loading thumbnail…

Student Performance

This visualization compares student performance in math and reading scores, colored by gender, with tooltips revealing parental level of education. Each point represents an individual student from the Kaggle dataset, plotted without a zero baseline to emphasize score distribution. The chart is built using Vega-Lite API within a D3.js v5 framework, loading CSV data via d3.csv and rendering as an SVG with custom configuration for axis styling and tooltip formatting.

Ssamemurk21
68% 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
68% match