gradesBlock

100%

✓ Published0🌍 Public

Last edited Sep 7, 2016

Created on Sep 6, 2016

This bar chart displays student grades, where each orange bar represents an individual student’s code and grade. Users can hover over any bar to view a tooltip with the exact grade and code, or click the "Organizar" button to sort the data by grade. The visualization uses D3 v3 with SVG rendering, applying ordinal and linear scales for axes, and the d3-tip library for interactive tooltips.

AI-generated description

what

Dataset Types: Tables. La información de las notas está organizada en arreglo de objetos

why

Present - Discover - lookup - explore En la visualización soporta la organización de las notas para que de esa forma el usuario puede ver la tendencia de las calificaciones-

how:

Order - Look - navegate - embed La visualización permite interactuar con el usuario que cuando quiere mayor detalle selecciona cada barra que simboliza las notas

Decidí tomar representar el problema con diagrama de barras debido a que por el tipo de variables como código y promedio es la mejor manera para mostrar esta información. Las marcas en este caso usadas son las líneas y el canal el color de las líneas.

forked from <a href='http://bl.ocks.org/apolan/'>apolan</a>'s block: <a href='http://bl.ocks.org/apolan/6e76364f5e232260e82bb0a2e3745f1e'>gradesBlock</a>

mit Licensed

Similar vizzes

Loading thumbnail…

gradesBlock

A bar chart displays the grades of a set of students, with each bar representing a student’s code on the x-axis and their grade on the y-axis. The visualization uses D3 v3 with SVG rendering, and hover interactions trigger a tooltip via the d3-tip plugin to show the exact grade and code. A button labeled "Organizar" sorts the data by grade and repaints the chart. The chart uses orange bars that darken on hover, with axes labeled "Estudiantes" and "grades".

Aapolan

97% match

Loading thumbnail…

Tarea3-Notas

A bar chart displays exam grades for a list of student codes, with each bar’s height representing the grade and the horizontal axis showing the code. Hovering over a bar reveals the exact grade via a tooltip. Built with D3 v3, it uses ordinal and linear scales, SVG axes, and the d3-tip library for interactive tooltips.

AaiMojica10

81% match

Loading thumbnail…

Tarea3-Notas

The chart displays student grades as vertical bars, with student codes on the x-axis and grade values on the y-axis. Each bar’s height encodes the grade, and hovering over a bar triggers a tooltip showing the exact grade value. The visualization uses d3.v3 with SVG rendering, leveraging `d3.scale.ordinal` and `d3.scale.linear` for axes, and the d3-tip library for interactive tooltips. Data comes from an inline array of student codes and grades, with axes rotated for readability.

AaiMojica10

80% match

Loading thumbnail…

Students Grades of Bar Chart

This horizontal bar chart displays student grades, with each student’s name on the y-axis and their corresponding numerical grade on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars. Data is loaded from a CSV file, and interactive features include tooltips on mouseover and an alert on click, triggered via `select` and event listeners. Grid lines and axis labels are conditionally configured through a chart configuration object.

SshanLU999

80% match

Loading thumbnail…

D3: Linked charts

A bar chart displays student grades from a dataset of student IDs and numeric grade values, with each bar representing a student. The visualization uses linked charts to show grades and allows sorting by ascending or descending order. Built with D3.js, it uses SVG rendering with animated bar transitions and axes. The bars are color-coded using hue and saturation, and hovering highlights individual bars to reveal exact grade labels. The data appears to be sample grade records with student IDs, and the chart is designed to compare grade distributions across students.

AAdlopez2016

80% match

Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com

79% match

Loading thumbnail…

Grades of Students

A stacked bar chart displays the percentage of student grades across six subjects, using categories from Fail to A. The visualization, rendered in SVG with D3 v7, highlights the distribution of grade counts per subject. The x-axis represents the count of students, while the y-axis lists the subjects. Hovering over each segment reveals a tooltip showing the precise percentage for that grade category within the subject. The chart uses a linear scale for counts, a band scale for subjects, and an ordinal color scale to differentiate grade levels.

Ssamithareddy9@gmail.com

77% match

Loading thumbnail…

Tarea 3: Visualización calificaciones

A bar chart displays student grades, identified by student code along the x-axis and grade value on the y-axis, with a red line marking the class average. The bars are colored orange and turn darker on hover. Using d3.v3 and the d3-tip library, hovering over a bar reveals the exact grade via a tooltip. The chart is rendered as an SVG, with d3.scale.ordinal and d3.scale.linear handling the axes, and d3.mean calculates the average line shown. Data is embedded directly in the script as a JSON array.

LLauraCortes

77% match