SaiTeja_ICE_6_Bar Chart

100%

SaiTeja_ICE_6_Bar Chart

✓ Published0🌍 Public

Last edited Mar 7, 2026

Created on Mar 7, 2026

A bar chart shows the average daily screen time in hours for each app category, sorted from highest to lowest, based on a digital usage dataset loaded from a CSV file. Each bar is rendered as an SVG `rect` with a rounded corner, and the average value is labeled above each bar. The chart uses D3 v7 APIs including `d3.rollup` to aggregate data by category, `d3.mean` to compute averages, and `d3.scaleBand` with `d3.scaleLinear` for axes, with horizontal gridlines and axis labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Saiteja_ICE_6_Line Chart

This multi-series line chart displays monthly trends in screen time, sleep hours, and productivity by aggregating daily records from the digital usage dataset into monthly averages. Three colored lines, generated with d3.line and scaled using d3.scaleTime and d3.scaleLinear, allow direct comparison of how these behavioral metrics change over time. The SVG chart includes gridlines, labeled axes, a legend, and uses d3.rollup to compute monthly means from the CSV data before rendering.

Ssaitejak1619@gmail.com

73% match

Loading thumbnail…

Saiteja_ICE5

This visualization summarizes a 150-row CSV dataset of simulated digital behavior records, showing key performance indicators like average app usage time and sleep hours in a left-hand card. An adjacent SVG bar chart, built with D3.js v7, displays the distribution of social media platforms using aggregated frequency counts. The page loads the remote CSV via JavaScript’s `fetch()`, parses it with `d3.csvParse`, and computes rollups with `d3.rollups`. A scrollable preview table shows the first eight rows to verify parsing.

Ssaitejak1619@gmail.com

73% match

Loading thumbnail…

Saiteja_ICE_6_Combined Chart (Bar + Line)

This combined bar and line chart displays monthly average notifications as light-blue bars on a left axis, with the average productivity score overlaid as an orange line on a right axis, facilitating comparison between the two metrics across time. The visualization aggregates daily records from a digital usage dataset by month using `d3.rollup` and `d3.timeMonth.floor`, then renders the result in SVG with D3 v7’s `scaleBand`, `scaleLinear`, `axisLeft`, and `line` generator.

Ssaitejak1619@gmail.com

72% match

Loading thumbnail…

ICE_7_Area Chart

This area chart visualizes the average monthly screen time from a digital usage dataset. Using D3.js v7, the example groups daily records by month, calculates mean hours, and renders a smooth area with axes, gridlines, and interactive tooltips. Data is loaded as CSV from a GitHub gist, with dates parsed and scales computed via `d3.scaleTime` and `d3.scaleLinear`. The SVG output includes rotated month labels and labeled axes for clarity.

Ssaitejak1619@gmail.com

71% match

Loading thumbnail…

ICE_7_Line Chart

This line chart visualizes monthly average screen time from a digital usage dataset, with each point representing the mean daily screen time for that month. The chart includes labeled axes, styled tick marks, and hover tooltips for data inspection. Built with D3 v7, it loads data from a CSV file, parses dates with `d3.timeParse`, groups entries by month using `d3.rollup`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. An SVG canvas with a white background and drop shadow presents the final visualization.

Ssaitejak1619@gmail.com

71% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni

69% match

Loading thumbnail…

Activity6_Task2

This bar chart displays average genre ratings across six categories—Action, Adventure, Comedy, Drama, Horror, and Sci-Fi—expressed as percentages. Built with Chart.js 3.7.0 and rendered on a Canvas element, the visualization loads from CDN and uses a `getElementsAtEventForMode` click handler to alert the selected bar’s label and value. The chart applies styling through custom `backgroundColor` and `borderColor` arrays, with tooltips and axis ticks configured for percentage formatting. Data originates from a local CSV file, though the example uses hardcoded values.

SSree Yuktha Sunkara

68% match

Loading thumbnail…

ICE-6-DS-BarGraph

This bar graph displays iPhone sales data, showing the sale price for each product name using vertical bars. It uses D3.js v7 to load a CSV file from a GitHub gist and render an SVG chart. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Rectangles are drawn for each data point, with hover effects changing the bar color to orange.

Mmukundakrishna.r@gmail.com

68% match