Skip to main content
SimilarExport ZIP
100%

ICE-6: Nghia Dang part 1

✓ Published0🌍 Public
Tteohangxanh
Last edited Mar 2, 2022
Created on Mar 1, 2022

This visualization shows the weights of ten students in 2022 as horizontal bars, sorted by name along the y-axis. It is built with React and D3 v5, using `d3.csv` to load data from a GitHub-hosted fake dataset and rendering SVG rectangles scaled with `scaleBand` and `scaleLinear`. The code manually generates axis ticks and gridlines rather than relying on built-in axis components.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Nnagarajuobbineni
82% 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
81% match
Loading thumbnail…

ICE 6-15540639 Rendering Marks and Channels with React, D3

This example visualizes the number of international students enrolled in UNT departments in 2016 using a horizontal bar chart rendered as SVG. The React component loads CSV data via `csv` and uses D3 scales (`scaleBand`, `scaleLinear`) to map department names to bar positions and student counts to bar widths. Custom tick marks and gridlines are drawn with D3 array methods, while React handles the SVG element creation through JSX. Styling uses pink background, green bars, and purple text labels.

SSravanthi Silla
79% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & SVG

A horizontal bar chart displays the age of 30 students by school year, using a React component that renders SVG marks. The visualization uses `scaleBand` for the y-axis school-year categories and `scaleLinear` for the x-axis age values, with tick marks and red grid lines generated manually through `xScale.ticks()`. Data loads from a CSV file via `d3.csv`, and React's `useState` and `useEffect` hooks manage the asynchronous data fetching. The bars show age increasing across school years, with the code leveraging `d3.max` and `format` from the D3 v5 library.

Ssushmithameher-patnam
79% match
Loading thumbnail…

ICE-6 Student Marks BarChart

This example visualizes student marks as a bar chart using React and D3. It shows the total marks for each student, with bars encoded by height on a linear scale and names on a band scale. The code fetches CSV data from a remote URL, parses it, and renders an SVG with rectangular bars using `scaleBand` and `scaleLinear`. It leverages React’s `useState` and `useEffect` for data loading, and D3’s `axisBottom` and `axisLeft` for axes. The chart uses a green fill for bars and includes margins and a title, with no interactive or animated behavior.

Cchalasanigayaetiri@gmail.com
78% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

A bar chart displays the 2022 population data for the top three students, using horizontal bars to show marks. It loads CSV data from a GitHub gist via `d3.csv`, then renders an SVG with React. The chart uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.axisBottom` and `d3.axisLeft` are omitted, with custom ticks drawn instead. Purple gridlines and labeled axes are included.

Mmanishcheruku
77% match
Loading thumbnail…

ICE-6 Assignment

A horizontal bar chart ranks universities by the percentage of international students, with countries listed on the y-axis and the percentage on the x-axis. The visualization loads data from a CSV file and uses React hooks to manage state, while D3’s `scaleBand`, `scaleLinear`, and axis functions handle the chart’s scales and ticks. The bars are drawn as SVG rectangles, and the data is sorted in descending order before rendering.

Vvinodreddysagam929@gmail.com
77% 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
77% match