Vishwas2629

@Vishwas2629·7 public vizzes

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`.

Apr 28, 2020

Loading thumbnail…

Module_wise Average Mark

This visualization presents the average marks for different module groups using an animated bar chart. Each bar represents a module group’s average mark, with the height corresponding to the value from the provided JSON dataset. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` for positioning, and SVG rectangles with transitions for rendering. Hovering over a bar highlights it, enlarges it, and displays the exact average mark and module code, demonstrating interactive mouseover and mouseout event handling.

Apr 27, 2020

Loading thumbnail…

Module_wise Average Mark

This visualization displays average marks for individual university modules using a bar chart. Each module is represented by a vertical bar, with its height corresponding to the module’s average mark, and the bars are colored green by default. When the user hovers over a bar, it changes to pink, highlighting the selected module. The chart uses D3.js v4 to bind the dataset and render SVG rectangles, with the data coming from a JSON array containing module codes, marks, and student counts.

Apr 27, 2020

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.

Apr 22, 2020

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.

Apr 2, 2020

Loading thumbnail…

SVG

This example visualizes monthly sales data as a bar chart rendered with SVG. Three bars represent January, February, and March, with sales values of 25, 10, and 15, colored red or gray based on a threshold. The code uses D3 v5’s `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and `d3.axisLeft`/`d3.axisBottom` to generate axes. Raw JSON data is loaded via `d3.json`, and bars are drawn using SVG `rect` elements with labels appended as `text` elements.

Apr 2, 2020

Loading thumbnail…

SVG

This example shows two labeled line charts, “Home” and “Away,” tracking a numeric value across eight time steps, with hover interactions highlighting each line and its points. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.line` for path generation, and SVG elements for rendering. Circles mark individual data points and show their values on hover, while lines increase in opacity and stroke width on mouseover. The chart includes bottom and left axes generated with `d3.axisBottom` and `d3.axisLeft`, and all transitions use D3’s `.transition()` and `.duration()` methods.

Mar 31, 2020