Skip to main content
Log in
B

boinapallyhimaja657@gmail.com

@Himaja657·11 public 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`.

Apr 24, 2025
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This area chart displays total tip amounts for each day of the week, ordered from Thursday through Sunday, using a teal filled path. The visualization loads tab-separated tip data from a GitHub gist via `d3.dsv` with `d3.autoType`, aggregates values with `d3.rollups`, and renders the chart as an SVG. It uses `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the smooth area path, with labeled axes and a bold title.

Apr 23, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This visualization gallery page presents a health dashboard exploring how diet, cardiovascular health, and sleep influence each other. It uses D3.js v7 and links to multiple Tableau Public dashboards and VizHub-hosted D3 visualizations. The page displays project buttons that route to external scatter plots, line charts, and dashboards, with a bubble-chart-style backdrop. The code sets up core D3 modules via package.json and uses CSS flexbox, backdrop filters, and hover transitions to organize the gallery layout. The visualization itself is a curated collection of health-tracking charts focused on the three-way relationship between lifestyle factors.

Apr 23, 2025
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.

Apr 9, 2025
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.

Apr 8, 2025
Loading thumbnail…

Fork of D3 Starter

This example visualizes tip distribution in a restaurant dataset by smoker status, showing a pie chart with colored slices labeled inside each segment. The chart loads tab-separated data via `d3.dsv` from a GitHub gist, then uses `d3.rollups` to aggregate total tips per category. Slice geometry is computed with `d3.pie()` and `d3.arc()`, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors. SVG text elements provide titles, axis labels, and a legend, all rendered within a 600×600 viewport.

Mar 27, 2025
Loading thumbnail…

Fork of titanic

This fork of the Titanic dataset visualizes passenger survival status as an interactive pie chart. The code uses D3.js v7 (d3.pie, d3.arc, d3.rollup, d3.scaleOrdinal) to aggregate CSV data into two slices—Survived and Not Survived—with hover scaling effects and readable labels. Legend items and axis titles clarify the comparison, while SVG rendering and transitions provide smooth visual feedback. Data loads from a remote Gist-hosted CSV file, and the chart includes color-coded slices with animation on mouseover and mouseout.

Mar 27, 2025
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This pie chart visualizes the distribution of smokers versus non-smokers in a tips dataset. It uses d3.pie and d3.arc to generate SVG path slices, with a d3.scaleOrdinal color scale distinguishing the two categories. The chart includes labeled slices showing counts, plus a legend built from SVG rect and text elements. Data is loaded asynchronously via d3.csv from a GitHub gist, and nested grouping with d3.nest calculates category frequencies.

Mar 27, 2025
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This pie chart displays the proportion of smokers versus non-smokers in a dataset loaded from a GitHub gist. The visualization uses D3.js v6's `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning blue and red fills for the two categories. Each slice is labeled directly with its category name and count using the arc centroid. A separate HTML legend, built with D3 selections, repeats the color-keyed counts beside the chart, all rendered on a styled sky-blue background.

Mar 27, 2025
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot explores the Iris dataset by cycling through different combinations of sepal and petal measurements on the x-axis, while the y-axis consistently shows sepal length. The visualization uses D3.js version 6.7.0 to render SVG circles colored by species, with a custom `scatterPlot` module handling the linear scales and axes. Data loads from a remote CSV file, and a `setInterval` function triggers the periodic axis updates, regenerating the chart and axis labels with each cycle.

Mar 27, 2025
Loading thumbnail…

Fork of Hello VizHub

This example displays a static, centered message, “Hello VizHub!”, as a demonstration of the basic D3.js setup within a VizHub project. It uses the `select` function from D3 to target a `div` element with the id `message` and sets its text content via a custom ES6 module. The `index.html` file references the D3 library from a CDN, while external JavaScript and CSS files handle the logic and styling, illustrating a modular file structure.

Mar 27, 2025