D3 Example

100%

✓ Published0🌍 Public

Last edited Apr 22, 2020

Created on Apr 22, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

83% 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

82% match

Loading thumbnail…

Average Attendance for each module

This visualization shows the average attendance for each module using a bar chart, with the y-axis representing the percentage of attendance and the x-axis displaying different module codes. The bars animate as they grow to their final height, and hovering over a bar highlights it in orange and displays its exact attendance value as a text label. The code uses D3.js v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, along with SVG transitions for animation. The data is loaded from a CSV file containing course names, ages, and average marks.

BBrahmareddym1996

82% match

Loading thumbnail…

HTML Starter

This example demonstrates a grouped, stacked bar chart that visualizes average scores (AVG_A, AVG_B, AVG_C) for different module groups (CAM, CIS, VGA, DES) and module codes. The chart uses D3.js v5 with the `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` APIs to render SVG rectangles, with a `d3-tip` tooltip for hover interactions. The data is structured in JavaScript arrays, and the layout includes axis labels and a color scale from `d3.scaleOrdinal`.

VVishwas2629

82% match

Loading thumbnail…

Average Attendance for each module

This visualization presents average attendance percentages for university courses, displayed as animated bar charts that grow sequentially upon load. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` to map course names and attendance values, with SVG rects transitioning via `transition.attr` and easing functions. Interactive mouseover and mouseout handlers alter bar width, position, and fill color between steelblue and orange while temporarily displaying the exact percentage value.

BBrahmareddym1996

80% match

Loading thumbnail…

D3 Example

This stacked bar chart shows the count of Up, Down, and Failed statuses across five days, with each layer’s height representing the cumulative value. It uses D3 v3’s `d3.layout.stack` and `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and a `d3.scale.category10` color scale for the status categories. The data is loaded from a CSV file, and the chart renders as SVG within a React framework, with axes and a color legend added via `d3.svg.axis` and `d3.legend.color`.

Pp4pravin

80% match

Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri

79% match

Loading thumbnail…

Average Attendance for each module

This bar chart displays the average attendance percentage for each module, with bars colored steelblue and one highlighted in orange. It uses d3.v4 to bind data from attend_data.csv to SVG rect elements within a 600×500 viewport. The x-axis maps module codes while the y-axis encodes attendance values, with margins set via a margin object. The chart reads from a preprocessed CSV and renders statically without transitions or interactive features.

Rremyapk

78% match