Skip to main content
SimilarExport ZIP
100%

Fork of Fork 1

✓ Published0🌍 Public
Bboinapallyhimaja657@gmail.com
Last edited Apr 8, 2025
Created on Apr 8, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork 11

This bar chart visualizes the relationship between daily water consumption and average sleep quality, with bars sorted by sleep quality in ascending order. The visualization uses D3.js v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG chart. Data is loaded via `d3.tsv` from a remote CSV file, then processed with `d3.rollups` to group and average sleep quality by water consumption category. Interactive tooltips appear on hover, displaying the specific water consumption level and corresponding sleep quality score.

Llakshmisurekhamaddukuri@my.unt.edu
91% match
Loading thumbnail…

Fork 11

This bar chart displays the relationship between daily water consumption and average sleep quality, with a dropdown filter for gender and the "7-10 cups" category excluded. The visualization renders aggregated data using SVG and D3 v7 modules, including `scaleBand`, `scaleLinear`, and `axisBottom`. Bars are interactive, showing a tooltip on hover and changing color, while the data is sourced from a TSV file processed with `rollups` and `mean` from `d3-array`.

Bboinapallyhimaja657@gmail.com
89% match
Loading thumbnail…

Fork of grades vs sleep

This vizhub fork displays a grouped bar chart of student grades (A, B, C, D) across different sleep pattern categories. The chart shows the number of students in each grade category for each sleep pattern, with color-encoded bars for each grade level. Built with D3 v7, the code uses `d3.csv` to load a Gist-hosted dataset, `d3.rollups` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeSet2` for color encoding. The visualization includes axis labels, a title, and a tooltip on mouseover.

Ssarikakannikanti@gmail.com
80% match
Loading thumbnail…

Fork of vis

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.

Ssarikakannikanti@gmail.com
80% match
Loading thumbnail…

Fork 1

This interactive health dashboard explores relationships between lifestyle factors and health metrics using multiple D3.js v7 visualizations. A scatter plot shows sleep duration versus sweet food intake with jittered points colored by gender, while a bar chart displays average heart rate by consumer type. A pie chart breaks down cholesterol levels across alcohol consumption categories, and an animated box plot filters heart rate distributions by gender with hover tooltips. The dashboard uses `d3.rollups`, `d3.groups`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.pie` with transitions for smooth updates, loading TSV data from a GitHub gist.

Bboinapallyhimaja657@gmail.com
80% match
Loading thumbnail…

Fork of blood pressure

This visualization shows the relationship between age and sleep duration for a group of individuals, with each person represented as a point on a scatterplot and connected by a smooth line. The chart uses D3.js v5 to load CSV data from a GitHub gist, parse the numeric fields, and render the SVG visualization. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` to create the curved trend line. The line is styled in maroon with a thick stroke, while gridlines and axis labels are formatted with custom CSS. The data source is a public dataset on sleep health and lifestyle.

Bbhavana.bayyapu@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration of 17 individuals as a smooth area graph, with the filled region emphasizing the distribution of hours per person. The SVG rendering is built using D3 v6, employing `d3.scalePoint`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shaded area and its boundary line. Custom CSS styles the area and line, while `d3.axisBottom` and `d3.axisLeft` produce rotated and labeled axes for the categorical names and numerical hours.

VVignesh Nallamothu
78% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
78% match