Fork of vis

100%

✓ Published0🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

This grouped bar chart displays the average hours spent by gender, broken down by a three-level self-comparison score (Low, Medium, High). Data is loaded from a remote CSV and aggregated with `d3.rollups` to compute the mean hours per gender and level. The visualization renders SVG bars using `d3.scaleBand` for positioning and `d3.scaleLinear` for the y-axis, with colors assigned via `d3.scaleOrdinal`. The code also includes axis labels and a legend, both drawn with SVG elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork 1

This example shows a bar chart comparing average sleep quality across different water consumption levels, with each bar colored by gender. Built with D3.js v7, the visualization loads CSV data from a GitHub gist and aggregates it using `d3.rollups` to compute group means. The SVG rendering includes an ordinal color scale, rotated bottom axis labels, and interactive tooltips that display additional details on mouseover.

Bboinapallyhimaja657@gmail.com

80% match

Loading thumbnail…

Fork 3

This interactive bar chart displays averages of variables for individuals under custody, with both x- and y-axis variables selectable through dropdown menus. Users can rerender the data points and axes by choosing different grouping variables such as age, sex, or race. The visualization uses d3.nest() and rollup to aggregate data dynamically, with the general update pattern handling enter, update, and exit selections for bars and axes. Data comes from a remote JSON endpoint, rendered as SVG.

AAnnie Ulichney

77% match

Loading thumbnail…

Fork of Fork of HTML Starter

A bar chart displays average marks per subject, computed from a CSV dataset of student scores. The visualization uses D3.js v6 to load the data, calculate averages with `d3.mean`, and render SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels and a title. Bars turn orange on hover through CSS, and the chart includes rotated x-axis tick labels and clear axis annotations.

Vvenigallajaanu@gmail.com

76% match

Loading thumbnail…

Fork of Untitled

This bar chart displays the daily earnings of individuals, with each person’s name on the x-axis and their corresponding amount on the y-axis. The visualization uses D3 v6 to load CSV data asynchronously via `d3.csv`, then binds it to SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as static purple bars within an SVG canvas, with axis labels positioned manually via HTML divs.

VVineela Reddy

76% match

Loading thumbnail…

Fork of Fork of bar chart

This interactive bar chart visualizes the average math score for each academic department, derived from a CSV file containing individual student scores. The D3.js v7 code groups the data by department and computes the mean using `d3.group` and `d3.mean`, with bars and axes rendered as SVG elements. The visualization employs a `scaleBand` for the categorical x-axis and a `scaleLinear` for the continuous y-axis, both using standard D3 axis generators. Hovering over a bar triggers a CSS transition, changing its fill color from blue to amber.

Ssainishanthreddyk@gmail.com

76% match

Loading thumbnail…

Fork of bar chart

This bar chart displays the average math scores for students grouped by department, computed from a CSV file using D3's `d3.csv` and `d3.group` methods. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, rendering bars as SVG rectangles with a hover effect that changes their fill color. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and labels are added to clarify the department and score metrics.

Ssainishanthreddyk@gmail.com

76% match

Loading thumbnail…

Fork of Donut

This bar chart displays the average stress level for various occupations, using a horizontal layout with a sequential plasma color scale. The visualization is built with D3.js (v7), utilizing `d3.select`, `d3.csv`, `d3.rollups`, and `d3.scaleBand`/`d3.scaleLinear` to process and aggregate data from a remote CSV file. Bars are drawn as SVG rectangles, with axis labels and a title, all rendered in an SVG container.

Vvaishumamidi3@gmail.com

75% match

Loading thumbnail…

Fork of Fork of Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, using d3.scaleBand and d3.scaleLinear. The chart renders as SVG with hover highlighting, changing bar color from steelblue to brown on mouseover. The data is loaded from an external CSV file about crimes against Indian women, though the visible dataset is hardcoded inline. Two donut charts are mentioned as new features, but the code only implements the bar chart with simple axes and bar rects.

VVamsiYandapalli

75% match