Fork of Fork of Vega-Lite API Template

100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 30, 2021

Created on Nov 29, 2021

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

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart of student performance data, showing chapters on the x-axis and total scores on the y-axis, with bars colored by difficulty level and tooltips revealing the total score. The underlying data is a small set of chapter names, percentages, scores, levels, and elapsed times. The visualization is built with the `vega-lite-api` library, which generates a Vega-Lite specification that is rendered by the Vega engine. The code registers both Vega and Vega-Lite, applies custom configuration for axis styling, and uses the d3 `csv` function to fetch data from a remote URL, though the live render uses hardcoded data instead.

JJeyasuriya M

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

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

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

NNaimisha-M

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between study time and exam marks for individual students, using a scatter plot with semi-transparent circular marks. It is built with the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications into Vega and renders them as SVG. The code reads student data from a remote CSV file via `d3.csv`, and incorporates a custom `config` object to adjust axis styling and label appearance. Tooltips are enabled through the Vega Tooltip handler, allowing users to inspect exact mark values.

SShivaPriyad

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

76% match

Loading thumbnail…

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays individual student subject scores as orange bars alongside skyblue bars representing the average score for each favorite subject. The bar chart animates upward on load using D3 transitions, with hover interactions changing bar color and showing a tooltip with the exact score. The code uses d3.text to load tab-separated data from a GitHub gist, d3.rollup to compute means, and d3.scaleBand with d3.axisBottom and d3.axisLeft to render the SVG chart.

SSYAM TEJ

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

75% match