Skip to main content
SimilarExport ZIP
100%

Fork of Fork 11

✓ Published0🌍 Public
Llakshmisurekhamaddukuri@my.unt.edu
Last edited Apr 10, 2025
Created on Apr 10, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% match
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
91% 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
80% 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
78% 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
77% match
Loading thumbnail…

fork of Finishing Touches

This visualization shows a 100% stacked bar chart of sleep disorder prevalence across stress levels, using data from a sleep health and lifestyle dataset. The chart displays the proportion of people with no disorder, insomnia, or sleep apnea, with a gray and two blue color scheme to distinguish healthy from disordered sleep. Users can filter by gender and view only disorder categories through dropdown menus, while hovering reveals exact percentages via a tooltip. The implementation uses D3 v7 with d3.stack, d3.scaleOrdinal, and d3.axisBottom/Left to render the SVG with interactive animation.

Ccsabavath@wpi.edu
77% 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
77% match
Loading thumbnail…

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

A line chart shows sleep duration in hours for 17 named individuals, with each name on the x-axis and duration from 0 to 9 on the y-axis. The SVG visualization uses d3.scalePoint for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.line to generate the path connecting data points. Axes are rendered with d3.axisBottom and d3.axisLeft, with rotated bottom labels for readability. The chart's static dataset lists names and sleep durations directly in code, styled with steelblue strokes and labeled axes.

Bbhargavinalamothu@gmail.com
77% match