Skip to main content
SimilarExport ZIP
100%

barplot

✓ Published3🌍 Public
VVignesh Nallamothu
Last edited Mar 24, 2025
Created on Mar 24, 2025
Forked from Bar_Plot

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shish's barchart- ice6

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.

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

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

This chart visualizes the sleep duration in hours for a list of seventeen named individuals, with each name plotted along the x-axis and its corresponding duration on the y-axis. A single steelblue line connects the data points to reveal the variation across the group. The visualization is built with D3.js v6, using `d3.scalePoint()` for the categorical name axis and `d3.scaleLinear()` for the numeric duration axis. The line is generated with `d3.line()` and rendered as an SVG path, with rotated x-axis labels for readability.

VVignesh Nallamothu
78% match
Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between sleep duration in hours and age in years, with each blue circle representing an individual data point. The chart plots sleep duration along the x-axis and age along the y-axis using d3.scaleLinear for both scales, rendering circles as SVG elements through d3.selectAll and data binding. Axes are generated with d3.axisBottom and d3.axisLeft, while data is loaded asynchronously from a CSV file via d3.csv from a GitHub gist.

VVignesh Nallamothu
78% match
Loading thumbnail…

grades

This visualization presents a side-by-side bar chart comparing student grades across different sleep patterns, with the bars for each sleep category grouped by grade level. The chart is built using D3.js v7, which loads a CSV file from a GitHub gist, groups the data with the `d3.rollups` API, and scales using `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip that displays the sleep pattern, grade, and count, with the visualization rendered as SVG elements.

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

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with each point representing an individual’s reported hours of sleep plotted against their age. The visualization uses a reusable `scatterPlot` function built with D3 v6, which configures linear scales for both axes, draws circles with a fixed radius, and appends axis labels. Data is loaded asynchronously via `d3.csv` from a remote gist URL, with numeric parsing applied to the `Sleep Duration` and `Age` fields. The SVG fills the entire browser window, and the chart is rendered using standard D3 selections and joins.

Bbhargavinalamothu@gmail.com
76% match