Skip to main content
SimilarExport ZIP
100%

Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
Bboinapallyhimaja657@gmail.com
Last edited Apr 23, 2025
Created on Apr 8, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
83% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example demonstrates a data summary and preview dashboard, loading a CSV of fictional individuals and presenting it through a card-based interface. It shows key dataset metrics like row and column counts, a preview table of the first five rows, and a bar chart visualizing categorical counts. The implementation uses d3.csv for data loading, D3 selections to dynamically build HTML elements for the summary and table, and an SVG bar chart for the visualization. The interface features a dark-themed, responsive layout with hover effects on table rows.

RRithvik
79% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sports statistics from a CSV file, offering four switchable D3 v7 visualizations. A scatter plot compares athletes' goals or points against their assists, color-coded by sport, while a pie chart shows the proportional share of players per sport. Line and area charts plot matches played against goals or points, with the area chart filling the space beneath the line. All charts are rendered as SVG and include interactive tooltips on data points, using d3.csv for data loading and d3.rollups for aggregation.

Ssandyman2109@gmail.com
79% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sales data loaded from a cleaned CSV file hosted on GitHub. It provides a dataset summary, a full HTML table of all rows, and an SVG bar chart showing total sales by region. Built with D3 v7, it uses `d3.csv` and `d3.autoType` for parsing, `d3.rollup` and `d3.sum` for aggregations, and `scaleBand`/`scaleLinear` with SVG `rect` elements for the chart.

Ssrinathkarumuru@my.unt.edu
78% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example presents a data-summary dashboard that loads a CSV file with d3.csv, displays basic row and column counts, and previews the first five rows in an HTML table. It also renders a simple bar chart of categorical counts as SVG. The code uses D3 v7 selection methods and d3.csv for asynchronous data loading, with data sourced from a public GitHub gist.

RRithvik
77% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example demonstrates four chart types—scatter plot, pie chart, line chart, and area chart—built with D3.js and rendered as SVG. Each chart visualizes a cricket dataset fetched as a CSV from a GitHub gist, mapping runs against strike rates, and runs across years. The code uses `d3.csvParse`, `d3.scaleLinear`, `d3.pie`, `d3.arc`, `d3.line`, and `d3.area` to construct the visualizations. All charts are appended directly to the page body, with scales and color schemes defined inline for each plot.

Ssdarsi2404@gmail.com
76% match
Loading thumbnail…

Project

This visualization presents a health data dashboard with three SVG charts. It includes a pie chart showing gender distribution, a bar chart displaying age distribution using d3.bin, and a scatter plot correlating glucose levels with BMI using d3.scaleLinear. The code uses d3.csv to load data and d3.rollup for aggregation, rendering all charts with D3 v7's SVG API.

Ppavanbellam@my.unt.edu
75% match
Loading thumbnail…

Fork of Fork of Hello VizHub

A scatter plot visualizes diabetes patient data, showing Blood Pressure against Glucose Level, with each point colored skyblue for non-diabetic outcomes and lightgreen for diabetic outcomes. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and parse the diabetes dataset from a GitHub URL, then render circles in an SVG. Circle radii are fixed, while additional data attributes for SkinThickness and Insulin are stored but not visually encoded. Axis labels and a title are added directly via SVG text elements.

LLakshmiPrasannaValdas@my.unt.edu
75% match