Skip to main content
SimilarExport ZIP
100%

In Class Assignment 6

✓ Published0🌍 Public
NNHRK555
Last edited Jun 26, 2022
Created on Jun 25, 2022

This visualization shows the average pass percentage for each school section in 2021 using a horizontal bar chart. It displays section names on the y-axis and percentage values on the x-axis with red grid lines. The chart is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements for bars. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization renders in an SVG container with a grey background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a React-based bar chart that visualizes class performance data for different grade sections, ranking them by their 2020 average scores. The visualization uses D3.js scales, including `scaleBand` and `scaleLinear`, to map the data to SVG rectangles, with axes and labels created through D3's selection and data-join methods. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart updates dynamically through React's state management. The code shows a clean separation between data fetching, scaling, and rendering within a single SVG container.

RRohithNaiduDevareddy@my.unt.edu
76% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays student statistics by area for the top 15 entries, using horizontal bars where area names appear on the y-axis and numeric stats on the x-axis. The visualization is built with React and D3 v5, using `d3.csv` to load remote data and `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent the marks, with grid lines and tick labels generated via `d3.ticks()`. Data is pulled from a GitHub gist CSV, and the chart renders within a fixed 960x500 viewport with defined margins.

SSaiipriiya
75% match
Loading thumbnail…

D3 Example

This visualization uses a stacked bar chart to display average marks for modules within different module groups, with each bar colored by its module code. The code employs D3 v3’s `d3.nest()` and `d3.layout.stack()` to group and stack data from the Attendance.csv file, while `d3.scale.ordinal()` and `d3.scale.linear()` map the categorical and numeric axes. A color legend is rendered using the `d3-legend` library, and the SVG output is built with React.

VVishwas2629
74% match
Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23
74% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels

This example visualizes the grades of 20 students as horizontal bars in a bar chart, with student names on the y-axis and grade values on the x-axis. It uses React and D3 v5, importing specific functions like `scaleBand`, `scaleLinear`, `max`, and `csv` from the d3 module. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements, including custom ticks with green grid lines and blue-bordered orange rectangles for each bar.

BBVNPK001
73% match
Loading thumbnail…

Bar Graph using D3.js

This bar graph displays the final exam marks of students, with each student’s name on the x-axis and their corresponding marks on the y-axis. The visualization loads data from a CSV file using `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to SVG rectangles. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart is annotated with a title and axis labels. The code employs D3 v7 in a plain HTML page with an SVG container.

SSamanvitha1
73% match
Loading thumbnail…

Bar Chart with React & D3

A bar chart displays the Grades of the top 10 students, with student names on the y-axis and grade values on the x-axis. The visualization uses React hooks (`useState`, `useEffect`) to fetch CSV data asynchronously from a GitHub URL, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are manually constructed from tick values, with grid lines drawn using SVG `<line>` elements. D3 v5 and React 16.9 are loaded via UMD scripts, and the chart updates reactively once data arrives.

Kkirangithub23
73% match
Loading thumbnail…

ICE-6 Assignment

This horizontal bar chart displays the percentage of international students across university-hosting countries, with bars sorted descending from highest to lowest. Using React and D3 v5, the visualization maps countries to a band scale on the y-axis and percentages to a linear scale on the x-axis, rendering bars as SVG rectangles. Data loads from a CSV via d3.csv, with y-axis labels manually positioned to accommodate varying country name lengths.

Ssagamreddy929@gmail.com
73% match