Skip to main content
SimilarExport ZIP
100%

Bar Chart Using CDC Data Describing Height for Males vs. Females

✓ Published1🌍 Public
RRidhima Saxena
Last edited Oct 26, 2021
Created on Oct 18, 2021

This bar chart visualizes CDC data on height by gender, showing the distribution of heights for males versus females using horizontal bars. The chart is rendered with D3 v7’s `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for tick marks, and SVG rectangles for the bars. Data is loaded from a CSV file using `d3.csv` and processed to numeric values. The visualization uses a simple steelblue fill and a fixed margin layout.

AI-generated description

A bar chart visualization of the cdc dataset outlining general health for males and females (https://gist.github.com/ridhimasaxena/a45f4774ff99a80bb5f71ca575f64ec3).

I forked my original scatterplot (https://vizhub.com/ridhimasaxena/ce31146b95a5497d96ec57e0670ff732) to start with, but mostly used the "Making a Bar Chart with D3" video as a guide. I also looked at the two bar charts below (https://vizhub.com/RED98310/a3ea8fbec4b64423a7797a418de4af57?edit=files&file=index.js) and (https://vizhub.com/pcordone/7022e550fada4acaae8833f6150f2072?edit=files&file=index.html)to understand how to make the bar chart more interactive and stacked.

MIT Licensed

Similar vizzes

Loading thumbnail…

Column Chart

This column chart visualizes gender-based frequency data from a CSV file, displaying two bars for Female (8) and Male (32) categories. The chart uses d3.csv for data loading and d3.scaleBand with d3.scaleLinear for positioning, rendering bars as SVG rectangles. Interactive features include mouseover tooltips that show values and click alerts, enabled through chart configuration flags. Axis labels appear for both dimensions, with d3.axisBottom and d3.axisLeft generating the scales.

KKanishka33
77% match
Loading thumbnail…

bar chart

This bar chart displays the distribution of males and females across six age groups, ranging from 20 to 50 years, using a pie chart layout. Built with D3.js v7, it fetches CSV data from a GitHub gist, processes the counts by age group and gender, and renders the visualization as SVG. The chart includes a legend showing total counts per age group and uses an interactive tooltip that appears on mouseover to reveal the specific male and female counts for each slice.

RRakesh Kumar Chekuri
77% match
Loading thumbnail…

Weigh/Height Comparison on Gender

This scatter plot compares height and weight across genders, with each circle representing an individual and color-coded by gender. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map data from a CSV file onto an SVG canvas. Points are rendered as semi-transparent red circles, with axes labeled “Height” and “Weight” and a title “Height/Weight.” The code loads data from VizHub, parses numeric fields, and applies margins and tick formatting to create a clean, readable chart.

Cceltic660
76% match
Loading thumbnail…

Fork of Bar Chart

This example displays a horizontal bar chart comparing two categories, female and male, by count, using data loaded from a CSV file. The visualization uses D3 v7 with SVG rendering, where `d3.scaleLinear` maps count values to bar widths and `d3.scaleBand` positions the categorical y-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with the x-axis formatted using `d3.format` to abbreviate large numbers. The chart is styled with steelblue rectangles and demonstrates a simple, clean layout with custom margins.

JJustin Roberts
76% match
Loading thumbnail…

3D Bar Chart_bonus

This example presents a 3D bar chart visualizing Height, Weight, Age, and BodyFat calculations for specific gender groups. The visualization employs the `d3-x3d` library to render interactive three-dimensional bars within an X3DOM scene, with data loaded from a remote CSV file. The chart is constructed using `d3.x3d.chart.barChartMultiSeries()` and populated by parsing CSV rows with `d3.csv`. The page includes a fixed background image, and the chart dimensions are set via CSS attributes on the chart holder element.

Ssaijahnaviappineni
76% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of male population totals for ten countries, sorted by descending value using a linear scale for bar width and a band scale for country positioning. The SVG renderer uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from `TotalPop.csv` and draw axes and rectangles. Bars are styled with steel blue fills, and margins are applied via a transformed group element.

Rrix007
76% match
Loading thumbnail…

Setting Attribute Values from Data

This example shows a horizontal bar chart of HPV vaccination rates for males across U.S. states and territories, with bars sorted in descending order of the male3doses value. The visualization uses D3 v3 to load a CSV file, sort the data, and render SVG rectangles whose widths encode the numeric attribute from each row. The code specifically applies the `d3.csv` method for data loading, `d3.descending` for sorting, and `.attr("width", ...)` to bind the data value to the bar length. The chart height is fixed, and bars are spaced vertically every 10 pixels.

CCindyJonesHulfachor
76% match
Loading thumbnail…

Building height Bar Chart

This bar chart displays population scores for countries, using horizontal purple bars scaled from 0 to 100. The visualization uses D3 v5 with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, accompanied by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes hover effects that reduce opacity.

Rrushithareddyy
75% match