Tarea3-Notas

100%

✓ Published0🌍 Public

Last edited Sep 6, 2016

Created on Sep 6, 2016

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.

AI-generated description

What:

Why:

HOW:

Argumentation:

The grades of an exam are presented to the sdudents in class by the teacher. For the students is essential to know their respective grades,because of this, the grades are presented with the student code and not only the grades by themselves. Therefor they are presented in two dimensions.

Bar chart diagram is the chosen based on the following reasons: it facilitates the visualization of the grades by code also the comparation with the other grades. It make use of marks as lines and length as the channeles. In the horizontal axis are located the codes and in the vetical axis are the grades. To make it a little bit clear, it is used the iteractivity to show the right note by passing the mouse by the bar.

forked from <a href='http://bl.ocks.org/aiMojica10/'>aiMojica10</a>'s block: <a href='http://bl.ocks.org/aiMojica10/cb8b73e9ef7e1b58e775dae8512e7476'>Tarea3-Notas</a>

mit Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

gradesBlock

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.

Aapolan

81% match

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

80% match

Loading thumbnail…

Tarea3

This visualization displays student grades as individual data points plotted along a single quantitative axis. The scatterplot uses a linear x-scale with an oriented bottom axis, though the y-axis remains unused. The code loads grade data from an embedded array of objects and renders dots with stroke outlines. It relies on D3 v4 for the main visualization, while also loading D3 v3 for the axis and scale APIs, mixing both versions. The SVG rendering includes margin-based positioning and a placeholder text element, but no interactive features or additional encodings are implemented.

AaiMojica10

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…

Making a bar chart: my grades

This example shows a horizontal bar chart of a student’s final grades in university courses, with each bar’s length proportional to the numeric grade. The chart uses categorical labels on the y-axis and a linear scale on the x-axis. Built with D3 v5, the code loads data from a CSV file using `d3.csv`, creates scales via `d3.scaleLinear` and `d3.scaleBand`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG rectangles, and the styling is defined in an external CSS file.

DD0no

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

76% match