Student Perfomance

100%

Student Perfomance

✓ Published0🌍 Public

Last edited Sep 23, 2020

Created on Sep 16, 2020

The chart shows the distribution of student performance by race/ethnicity, with bars grouped and colored by parental level of education. It uses vega-lite-api to construct a bar mark, transforms data via vl.groupby and vl.count to aggregate counts, and encodes race/ethnicity on the x-axis, student count on the y-axis, and education level as color. Data is loaded asynchronously from a CSV using d3.csv, with vega-tooltip for interactivity.

AI-generated description

This bar chart visualization shows the parental level of education distribution along with different race/ethnicity.

A visualization constructed using the vega-lite-api.

See Data on Gist: Student Performance Data

MIT Licensed

Similar vizzes

Loading thumbnail…

Student Perfomance

This bar chart visualizes the distribution of student test preparation course completion (completed or not) across different race/ethnicity groups. It aggregates student counts per race/ethnicity and preparation status, with color encoding distinguishing the two course-completion categories and tooltips revealing exact counts. The visualization is built using the Vega-Lite API, which compiles specifications to Vega for rendering in SVG, while D3 handles CSV data loading from a GitHub Gist. The chart’s appearance is customized through a config object that adjusts axis styling and label fonts.

ZZG

89% match

Loading thumbnail…

Fork of Student Perfomance

This bar chart shows the distribution of students by race/ethnicity and test preparation course completion, with the y-axis counting total students and color encoding whether the course was completed. The visualization uses the Vega-Lite API with D3.js, retrieving data from a CSV hosted on GitHub Gist. A bar chart is rendered by grouping records by race/ethnicity and test preparation status, with tooltips revealing exact counts for each group. The chart’s appearance is customized through a config file that adjusts axis styles and label colors.

NNarayana Reddy

86% 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

80% match

Loading thumbnail…

Student Performance Between Male & Female

This scatterplot compares male and female student performance by plotting math scores against writing scores, with gender encoded by color and parental education level available via tooltip. The visualization reveals that males tend to score higher in math, while females lead in writing and reading, with two notable female outliers from low-education backgrounds. Built with React and Vega-Lite API (vl), the code loads CSV data via d3.csv from a GitHub gist, uses a drop-down selector, and renders an interactive SVG with a custom dark theme and tooltip handler.

Ssamemurk21

74% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays student performance across five test attempts, breaking down questions into four categories based on correctness and confidence level. The bar chart uses color to distinguish between correct strong, correct weak, incorrect strong, and incorrect weak responses, while the x-axis orders test numbers by their totals. The visualization is built with the Vega-Lite API, which configures the bar marks, scales, and tooltips, while D3’s CSV loader is present for data fetching. The data is hardcoded in the script, representing fictional assessment results rather than an external dataset.

JJeyasuriya M

74% match

Loading thumbnail…

Student Performance Between Male & Female

A scatterplot compares male and female student performance by plotting math scores against writing scores, with gender encoded as color. The visualization reveals that males tend to score higher in math while females score higher in writing, highlighting a notable difference in achievement across subjects. Data comes from a CSV file on student performance, and the chart is built using vega-lite and D3 within a React framework. The code employs vega-lite's markCircle for plotting and encodes the parental level of education as a tooltip.

KKeerthiKandadai

73% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart visualizes student scores as horizontal bars, with each bar’s length representing a score value. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It loads data from a CSV file and applies an axis layout. The bars are styled purple and become semi-transparent on hover via CSS.

Ppemmasaniprudhvinadh

72% 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

72% match