Fork of histogram

100%

Fork of histogram

✓ Published0🌍 Public

Last edited Apr 27, 2023

Created on Apr 27, 2023

This visualization presents a histogram of BMI values from a heart disease dataset, showing the distribution of data points across ten bins. The chart includes a dashed line marking the mean BMI and displays the count of observations above each bar. The implementation uses D3 v5's `d3.histogram()` for binning, `d3.scaleLinear` for axes, and SVG rendering within a React framework. The code also embeds accessibility features like ARIA roles and labels for the chart elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Histogram of BMI by Age

This visualization shows the average Body Mass Index (BMI) by age as a bar chart, with each bar representing the mean BMI of individuals grouped into age bins. The bars are rendered as SVG rectangles using D3 v7’s `scaleLinear`, `bin`, and `sum` APIs. Data comes from the CDC dataset, with BMI calculated from weight and height. The chart includes labeled axes, tick marks, and a title, all styled with custom CSS.

CChaoying Zheng

83% match

Loading thumbnail…

Fork of Pie Chart

This visualization compares BMI values against general health categories using a pie chart, with the top ten highest BMI records from a heart disease dataset. The chart renders as an SVG using D3's `pie` and `arc` generators, with each slice colored via `scaleOrdinal` and `schemeCategory10`. A legend lists health categories with corresponding values, and hovering over a slice logs its BMI to the console. Data is loaded as CSV via `d3.csv`, while the React-free interface relies on plain D3 selections and the `bundle.js` build.

Cchandanagandla

81% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of average body mass index (BMI) across different ages, using survey data loaded from a CSV file. The chart renders orange bars in an SVG canvas, with age on the x-axis and average BMI on the y-axis. The code uses D3 v7 APIs including `d3.bin` to group data into bins, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks. Data preprocessing calculates BMI from height and weight values.

VVarshareddy2912

79% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

RRiya Mathur

79% match

Loading thumbnail…

Fork of Untitled

This bar chart displays the relationship between BMI and age group from a heart disease dataset. Each bar represents the BMI value for a specific age category, plotted along the x-axis. The chart uses D3.js v4 with SVG rendering, specifically leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is loaded from a CSV file using `d3.csv`, and bars are drawn as SVG rectangles with the class "bar". Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Cchandanagandla

79% match

Loading thumbnail…

Histograms

A scatterplot-like histogram visualizes average Body Mass Index by age, using binned rectangles to group individuals and display the mean BMI per age bracket. The chart loads CSV health data from GitHub and uses D3 v7 APIs including `d3.bin` for histogram generation, `d3.scaleLinear` for both axes, and `d3.axisLeft`/`d3.axisBottom` for labeled tick marks. SVG rendering applies a green fill to rectangles with white strokes, while axis labels and a title clarify the data relationship.

SSwapna1915

78% match

Loading thumbnail…

Fork of Heart Disease Scatter Plot

This fork of a Heart Disease scatter plot shows the relationship between a patient’s BMI and the presence of heart disease, with the X-axis representing BMI and the Y-axis indicating heart disease status. The visualization uses D3 v6 to load CSV data from a GitHub gist, parse values with `d3.csv`, and map them to SVG circles via `d3.scaleLinear`. Axes are drawn with `axisLeft` and `axisBottom`, and the plot is rendered as an SVG canvas. The data originates from the Heart Disease UCI Kaggle dataset.

Ssahajm99@gmail.com

78% match

Loading thumbnail…

Histogram

This histogram visualizes the average Body Mass Index of CDC survey participants by age, using binned age groups and an indigo bar chart overlaid on an SVG canvas. The code imports specific D3 v7 modules like `bin`, `scaleLinear`, `axisLeft`, and `axisBottom` to generate the binning, axes, and gridlines. It computes BMI from weight and height data loaded via `csv()`, then renders the bars with color fills and white strokes.

Ssumikshab

77% match