Skip to main content
SimilarExport ZIP
100%

Shish's barchart- ice6

✓ Published0🌍 Public
SSai Shishir Koppula
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from HTML Starter

This bar chart shows the average sleep duration for various occupations, with each bar colored distinctly using D3’s `schemeTableau10`. The data is read from a CSV file via `d3.csv`, grouped by occupation with `d3.group`, and aggregated with `d3.mean`. The visualization is built using D3 v7’s SVG rendering, with a band scale (`d3.scaleBand`) for categories and a linear scale for the y-axis. Axis labels are rotated for readability, and the chart is rendered inside a styled HTML container.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

barplot

This bar chart visualizes sleep duration for individuals, with each bar representing a person’s name and the bar height corresponding to their hours of sleep. The visualization uses d3.csv to load data from a remote ICE5dataset, d3.scaleBand for the x-axis categories, and d3.scaleLinear for the y-axis. Bars are rendered as SVG rectangles with a hover effect that changes their fill to orange via d3.select, while d3.axisBottom and d3.axisLeft generate the labeled axes.

VVignesh Nallamothu
80% match
Loading thumbnail…

shish's scatterplot- ice6

This scatterplot visualizes the relationship between sleep duration and stress level, with each point representing a participant. The x-axis shows sleep duration in hours, while the y-axis tracks stress levels. Semi-transparent steelblue circles, each with a radius of five pixels, reveal the distribution and density of data points. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data comes from a sleep health dataset loaded via `d3.csv`, and the chart is rendered as SVG within a styled HTML page.

SSai Shishir Koppula
78% 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
74% match
Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj
73% match
Loading thumbnail…

Shish's Barchart- ICE6

This bar chart displays the top 10 most populous countries in 2025, using a horizontal axis for country names and a vertical axis for population counts. The bars are colored by continent using a Tableau10 color scheme. Built with D3 v7, the visualization loads CSV data, sorts it, and slices the top ten entries. It renders as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

SSai Shishir Koppula
73% match
Loading thumbnail…

sleep vs concenration

This grouped bar chart compares sleep patterns against concentration difficulty levels, showing the number of students for each combination. The data comes from a CSV file on student grades and mental health, loaded via `d3.csv`. The visualization uses `d3.rollups` to aggregate counts by two categorical dimensions, then renders the nested groups with `d3.scaleBand` for both axes and `d3.scaleLinear` for the y-axis. Colors are assigned using `d3.scaleOrdinal` with `d3.schemeTableau10`. SVG rectangles display the bars, with hover tooltips showing exact counts for each sleep and concentration category.

Ssarikakannikanti@gmail.com
73% 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
72% match
Loading thumbnail…

Tree graph of the project data(ICE-8)

This tree graph visualizes the distribution of sleep disorders across different occupations from a CSV dataset. The hierarchical structure shows disorder categories as root nodes, with occupation leaves displaying aggregated counts. Built with React and D3.js v6, the visualization uses `d3.tree` layout and `linkHorizontal` for curved connections. Node symbols vary by depth using `d3.symbol` with circle, square, and triangle shapes, rendered as SVG paths. A legend and color-coded nodes distinguish hierarchical levels.

Ttejasviteegala@my.unt.edu
72% match