Skip to main content
SimilarExport ZIP
100%

D3

✓ Published0🌍 Public
Nnifemi-sys
Last edited May 16, 2020
Created on May 16, 2020

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Attendance

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.

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

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

AArun Pratap
76% match
Loading thumbnail…

Student Course Data description

This example presents a demonstration webpage that showcases the size and structure of a student course performance dataset. The page displays a static classroom SVG image alongside a summary of the loaded CSV data, including its file size in kilobytes, row count, and column count. The code uses the D3.js v7 `d3.csv` and `d3.csvFormat` APIs to fetch and measure the dataset from a GitHub-hosted CSV file, then inserts the calculated text into a styled `<pre>` element. The page is built with minimal HTML, CSS, and JavaScript.

NNHRK555
76% match
Loading thumbnail…

Let's make a face with D3.js!

This horizontal bar chart displays student enrollment counts for various university module codes, sorted along the y-axis. The visualization uses the D3.js library (v5) to load data from a CSV file, map the module codes to a band scale on the y-axis, and the student counts to a linear scale on the x-axis. The chart renders as SVG rectangles, with blue bars representing the data, and includes labeled axes for "ModuleCode" and "Students".

KKeerthiKandadai
75% match
Loading thumbnail…

D3

This example shows a horizontal bar chart of population data for ten countries, with population values scaled by a factor of 1,000. The visualization uses D3 v5 to load the CSV, create linear and band scales, and render SVG rectangles with axes. The code demonstrates `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and the chart is built within a React context, with the SVG element targeted by `d3.select`. The bars are styled with steelblue fill, and axes are labeled with a custom font size.

JJeffrey Miiller
75% match
Loading thumbnail…

Student Data Previous 10 years

This example visualizes the number of students at D.G. Ruparel College over the past ten years using an SVG bar chart rendered in React with D3 v5. Each bar represents a year, with height scaled by the student count and color mapped through a rainbow sequential scale. The chart includes dashed gridlines, reversed y-axis tick labels, and yearly annotations. The code loads CSV data via the `useData` hook and d3.csv, then applies `scaleLinear`, `scaleSequential`, and `interpolateRainbow` to encode values.

VVikil Lakkavatri
74% match
Loading thumbnail…

D3

This example showcases a D3 visualization rendered as an SVG within an HTML page, loading the d3.v5 library from a CDN. The code sets up an SVG canvas of 960 by 500 pixels and includes a linked stylesheet, suggesting styled output. The visualization depends on an external JavaScript module (`/js/main.js`) that likely leverages D3’s core APIs to generate the graphics, though the specific chart type or data source is not visible in the provided files.

CCody Shaner
74% match