Attendance

100%

✓ Published1🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

Forked from Fork of Smiley Face Part III

This example displays a horizontal bar chart of attendance figures by year using React and D3.js. Data is loaded asynchronously from a CSV file via `d3.csv()`. The chart uses `d3.scaleBand()` for the categorical year axis and `d3.scaleLinear()` for the quantitative attendance axis, with magenta gridlines and value labels. SVG rectangles encode each year’s attendance, with a fixed 960×500 canvas and margins for axis labels.

AI-generated description

Smiley face implementation with React & D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Attendance

This example displays attendance counts by year as a horizontal bar chart. The bars, rendered as SVG rectangles, encode attendance values on a linear scale while the y-axis uses a categorical band scale for each year. Built with React and D3 v5, the code separates chart components into modular files, uses `scaleLinear` and `scaleBand` for scales, and fetches data from a CSV file via `d3.csv`. The visualization demonstrates a refactored approach to organizing D3 code within a React framework.

EErick Brandao

90% match

Loading thumbnail…

Stylized Attendance

This bar chart displays attendance counts by year. The graph uses a linear scale for the attendance values and a band scale for the years, with the bars extending from the left axis. Built with React and D3 v5, the visualization renders as SVG, pulling data from a CSV file via the `d3.csv` function. The chart includes custom axes (`AxisBottom`, `AxisLeft`) and rectangular marks (`Marks`) to represent each data point.

EErick Brandao

88% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

80% match

Loading thumbnail…

D3

This example visualizes student attendance records, differentiating by gender and course, with statuses like present, absent, and partial. It uses the D3.js library to load CSV data via `d3.csv` and renders the visualization using the Chart.js library with a horizontal bar chart type. The SVG element on the page is present but not actively used for rendering.

Nnifemi-sys

78% match

Loading thumbnail…

Average Attendance for each module

This D3.js v4 bar chart displays the average attendance percentage for each module, with bars animated sequentially on load. Hovering over a bar highlights it in orange, increases its size, and reveals the exact percentage value above it; moving the mouse away restores the original appearance. The visualization loads data from `attend_data.csv`, uses an SVG canvas, and leverages D3 scales for the band and linear axes, along with transitions for the hover effects.

BBrahmareddym1996

78% match

Loading thumbnail…

Bar chart Testing

This example displays a horizontal bar chart of Indian population data by year, using React to render SVG elements. D3’s `scaleLinear` maps population counts to bar widths, while `scaleBand` positions bars along the y-axis and `scaleOrdinal` assigns colors from `schemeDark2`. The code fetches CSV data via D3’s `csv` method, parses the first five entries, and draws axes with SVG lines and ticks. Both D3 v7 and React 18.2 are used, with the visualization mounted through `ReactDOM.createRoot`.

PPathan Khuvanejarkhan

78% match

Loading thumbnail…

Bar chart using react and d3

This gallery example demonstrates a horizontal bar chart that visualizes population data for various countries. The chart uses D3's `scaleBand` and `scaleLinear` functions to map country names to the y-axis and population values to bar widths, rendering the results as SVG rectangles. The data is loaded asynchronously from a CSV file via `d3.csv` and managed through React's `useState` and `useEffect` hooks. The visualization leverages React's declarative component model alongside D3's scaling utilities to produce a clean, interactive-free static chart.

MmohitPassan

77% match

Loading thumbnail…

Axes with React & D3

This example renders a horizontal bar chart of 2020 population estimates for ten countries in SVG. Data is loaded from a CSV file using `d3.csv`, and React uses `useState` and `useEffect` to manage the asynchronous fetch. D3 scales (`scaleBand`, `scaleLinear`) compute bar positions and widths, while axis ticks are generated manually from `xScale.ticks()` with rendered lines and text. The chart displays country labels on the left and value ticks below the bars.

TTroy Marchesseault

77% match