Untitled

100%

✓ Published0🌍 Public

Last edited Mar 23, 2020

Created on Mar 23, 2020

Forked from Untitled

This interactive line chart visualizes student enrollment counts across university modules, with a dropdown menu to select different module groups. It uses D3.js v4 with SVG rendering, mapping module codes on the x-axis and student numbers on the y-axis. The chart reads from a CSV file and employs a color scale from `d3-scale-chromatic`. When a user selects a new module, the line path transitions smoothly to display the updated values over one second.

AI-generated description

New Chart in v5

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

A bar chart displays the number of students per university module, with a dropdown menu to select a specific course. Selecting a new module triggers an animated transition that updates the bar heights and y-axis domain. The visualization is built with d3.v3, using SVG rectangles and the `transition` method for smooth updates, while the dropdown change event calls the update function. Data is loaded from a CSV file containing module codes and student counts.

KKeerthiKandadai

80% match

Loading thumbnail…

Stylized Bar Chart

This visualization presents a stylized horizontal bar chart that ranks academic modules by student enrollment numbers. A dropdown menu allows users to filter the displayed data by department codes (CSIS, CAM, GAV), though the implementation for this filtering is not shown in the core rendering logic. Built with React components and D3 v5, the chart uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the quantitative x-axis, rendering orange SVG rectangles within an 800x5000 pixel canvas. The data originates from a CSV file containing module codes and student counts.

KKeerthiKandadai

79% match

Loading thumbnail…

Untitled

This example presents a bar chart of average marks for university modules, with each bar representing a module code. The chart uses D3 v4 within a React framework to render SVG elements. Bars animate in sequentially using a transition with linear easing, and hovering over a bar triggers a mouseover event that highlights it in green, expands its width, and displays its average mark as a label. A mouseout event restores the bar’s original style and removes the label. The data comes from a CSV file containing module codes, student counts, and average marks.

VVishwas2629

78% match

Loading thumbnail…

Example

This interactive bar chart shows the enrollment numbers for various courses across 12 modules, with each bar color-coded by module code. Hovering over a bar displays a tooltip with the specific module, course, and enrollment count. The visualization uses a stacked bar layout implemented with D3.js, including `d3.layout.stack`, `d3.svg.axis`, and `d3.legend`, with data loaded from a CSV file. Animated transitions and hover-based highlighting of individual module series are supported through D3's data join and event handling.

Nnifemi-sys

78% match

Loading thumbnail…

SVG

This example shows student marks for individual modules, filtered by student ID through a dropdown menu. It presents a bar chart of marks per module for the selected student, with an animated update when the selection changes. The code uses D3 v5 to load the data with `d3.json`, binds the data to SVG rectangles, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The x and y scales are created with `d3.scaleBand` and `d3.scaleLinear`, respectively. The visualization is a React project but uses vanilla JavaScript and SVG rendering for the chart.

SSurajRepo

77% match

Loading thumbnail…

Untitled

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

CCrossZeigler

77% match

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

77% match