Fork of Student Perfomance

100%

Fork of Student Perfomance

✓ Published0🌍 Public

Last edited Apr 20, 2021

Created on Apr 20, 2021

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.

AI-generated description

This bar chart visualization shows the test preparation course (completed/not) 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

93% match

Loading thumbnail…

Student Perfomance

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.

ZZG

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

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

78% match

Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Pprudhvi

77% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart displays student test scores from a CSV file, ranking each student along the y-axis with a score from 0 to 100 on the x-axis. The purple bars are rendered as SVG rectangles within a fixed 960 by 450 pixel canvas, using D3 v5’s `scaleLinear` and `scaleBand` to map data to coordinates. The chart includes axes generated by `axisLeft` and `axisBottom`, with a hover effect that reduces bar opacity. The student data is loaded asynchronously from `data.csv`.

Pprudhvi

77% match

Loading thumbnail…

Fork of

A horizontal bar chart displays average marks for courses, with bars colored on a gradient from steelblue to grey based on value. The visualization supports hover tooltips and click alerts, and includes axis labels and gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, with data loaded from a CSV file.

NNarayana Reddy

76% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This horizontal bar chart displays student exam scores from a CSV file, with each bar representing an individual student’s score on a scale from 0 to 100. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data and render an SVG with purple bars that become semi-transparent on hover. Student names appear on the y-axis, while the x-axis shows score values, with the chart laid out within a 960-by-450-pixel SVG canvas.

Oolddb

76% match