Skip to main content
SimilarExport ZIP
100%

Tarea 3: Visualización calificaciones

✓ Published0🌍 Public
LLauraCortes
Last edited Sep 6, 2016
Created on Sep 6, 2016

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.

AI-generated description

forked from <a href='http://bl.ocks.org/Caged/'>Caged</a>'s block: <a href='http://bl.ocks.org/Caged/6476579'>Using d3-tip to add tooltips to a d3 bar chart</a>

<font color="red">What<br></font> Es una tabla donde las filas son los códigos de los estudiantes y la única columna es la calificación. Por tanto es un atributo ordenado y cuantitativo, tiene un ordenamiento secuencial pues se sabe que las calificaciones pueden ir desde 0 hasta 5. Los datos son dinámicos pues estos pueden cambiar si hay un reclamo. <br> <font color="yellow">Why<br></font> Se quiere presentar las calificaciones, teniendo la ubicación conocida, pues para el estudiante es su código pero no sabe el objetivo pues la calificación es desconocida. El estudiante va a querer identificar su calificación y poder compararse respecto al desempeño de los demás. Finalmente, se espera poder observar la distribución de las calificaciones.<br> <font color="green">How<br></font> Para poder analizar más rápido los datos sería interesante tenerlos ordenados por el atributo y alinearlos sobre el mismo eje. Para representar las calificaciones se va a utilizar el tamaño, por lo tanto la longitud en una gráfica de barras. Lo ideal sería que el estudiante al pasar el mouse sobre su barra pudiera ver la calificación exacta<br>

I have made the decision to use a bar chart because it is the easiest way for people to compare themselves with their classmates, they can find how many students had a better grade and if they are over the average or below. On the other hand, there is the opportunity to stand over their bar to see the exact grade, this way the students aren't loosing the accuracy.

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/61be3dc65bb47d0a74fd820461802c7b'>Tarea 3: Visualización calificaciones</a>

mit Licensed

Similar vizzes

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
77% match
Loading thumbnail…

Homework #3

This visualization presents student grades as a set of circles positioned along a common scale from 0 to 6 on the x-axis, with student codes on the y-axis. Each circle is colored based on its distance from the class average: green for the maximum grade, red for the minimum, blue for grades within one standard deviation, orange for those within two standard deviations, and purple for outliers beyond that. The visualization uses position and color hue to support tasks of presenting grades and discovering extreme values, and includes animated text labels for grades, interactive tooltips on mouseover, and gridlines to aid in comparison across the distribution.

JJuanSMartinez
77% match
Loading thumbnail…

Making a bar chart: my grades

A bar chart displays university grades, with each subject on the y-axis and its corresponding score (from 18 to 30) on the x-axis. The chart uses green bars and a readable font size. The implementation relies on D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to position and scale the marks. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is created through `svg.append('g')` and `selectAll('rect')` calls.

HHilario Calderon
76% 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
75% 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
74% match
Loading thumbnail…

Bar chart

This visualization uses D3.js to render a vertical bar chart of student grades, with each bar representing a module code from the provided CSV data. The chart uses a linear color scale to map grade values from steelblue to grey, while the x-axis displays the numeric grade and the y-axis lists module codes. SVG rendering with animated transitions brings the bars in over one second using D3’s `transition` and `easeLinear`. The axes are formatted using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Kkalyanreddy997
73% match
Loading thumbnail…

AVERAGE GRADE ACHIEVEDt

This stacked bar chart shows the distribution of average grades achieved across many module codes, segmented by grade bands from F to A. It is rendered as an animated SVG using D3.js version 3.5.6, with data loaded from a CSV file. The visualization uses `d3.layout.stack` with an expand offset to display proportions, and allows transitions between percentage and count views via radio buttons, though the buttons are commented out. Hovering highlights individual segments through CSS opacity changes.

WW9183907
72% match
Loading thumbnail…

D3 testing2

A D3.js bar chart visualizes a single student’s self-assessed skills across five categories: programming, computers, art, communication, and collaboration. Each category is rendered as a fixed-width rectangle, with bar heights scaled by multiplying the numerical skill value by ten. The chart uses SVG rectangles appended directly to a hardcoded, static data object, with no axes or scales defined. Interactive tooltips appear on hover, implemented via D3 mouseover, mousemove, and mouseleave event handlers that dynamically update an HTML div’s opacity and position.

PPere Ginebra Solanellas
72% match