Skip to main content
100%

Bar Chart in D3 v5 w/ our data

✓ Published0🌍 Public
Aalex-rind
Last edited Oct 11, 2019
Created on Oct 11, 2019

This bar chart displays the BMI values of individuals from a diabetes dataset, with each bar labeled by the person’s name and the y-axis representing BMI frequency. The chart uses D3 v5’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data is loaded as CSV via `d3.csv`, then parsed and mapped to numeric BMI values before being drawn as SVG rectangles with hover styling. The visualization follows a conventional margin layout.

AI-generated description

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3885304'>Bar Chart</a>

forked from <a href='http://bl.ocks.org/Golodhros/'>Golodhros</a>'s block: <a href='http://bl.ocks.org/Golodhros/6f8e6d1792416ee3770ff4ddd5c9594e'>Bar Chart in D3 v5</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bar Chart-BMI

This example visualizes the Body Mass Index (BMI) of ten individuals from a CSV dataset, using a bar chart to compare each person’s BMI value. The chart shows the BMI for each name, with bars representing the numeric BMI values. The visualization is built with D3.js v7, rendering SVG elements. It uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` to display the axes. The data is loaded from the provided CSV file, and each bar’s height reflects the BMI, colored in steel blue.

CChaturyaAkhilaPallem@my.unt.edu
85% match
Loading thumbnail…

Untitled

This bar chart displays the average BMI across different age groups from a heart disease dataset. It uses D3 v4 to render the SVG visualization. The code reads the data from a CSV file, scales the values, and applies D3's `scaleBand` and `scaleLinear` to position and size the bars. The chart includes a title, axis labels, and a legend.

Aabhi7r
81% match
Loading thumbnail…

Untitled

This bar chart displays the average BMI across different age groups from a heart disease dataset. It uses D3 v4 to render the SVG visualization. The code reads the data from a CSV file, scales the values, and applies D3's `scaleBand` and `scaleLinear` to position and size the bars. The chart includes a title, axis labels, and a legend.

Aabhi7r
81% match
Loading thumbnail…

BMI Bar Chart

This bar chart displays the top 10 highest BMI values from a local dataset, ranking individuals by their body mass index in descending order. The visualization uses D3.js with `scaleBand` and `scaleLinear` to map names and BMI values to the x and y axes, respectively. The code imports the data from `bmiData` and renders it as an SVG, with each bar’s height proportional to the BMI value. Axes and labels are added using the `@curran/axis-labels` library, and the chart is designed to fit the container’s dimensions.

CChaturyaAkhilaPallem@my.unt.edu
81% match
Loading thumbnail…

Diabetes Scatter Plot

This scatter plot visualizes the relationship between HbA1c levels and BMI in a diabetes dataset, with each dot representing a patient. The code uses D3 v5 to load CSV data and render SVG circles positioned by linear scales. Axis labels and tick marks are generated with d3.axisBottom and d3.axisLeft, while CSS classes style the dots with semi-transparent outlines.

Aalex-rind
80% match
Loading thumbnail…

Diabetes Scatter Plot w/ Label

This scatter plot visualizes the relationship between HbA1c and BMI for individuals with diabetes, with each point labeled by patient name. The data loads from a remote CSV file and uses d3.scaleLinear to map values to a 400x400 plotting area, with axes and labels added via d3.axisBottom and d3.axisLeft. Circles are styled with translucent strokes, while text labels are positioned to the left of each point. The code explicitly coerces CSV string values to numbers using the unary plus operator before computing the domain maxima with d3.max.

Aalex-rind
80% 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…

Scatter Plot - Project 16

This scatter plot visualizes a diabetes dataset, mapping glucose levels on the x-axis against BMI on the y-axis, with each point colored by outcome (red for positive, green for negative). It also encodes insulin and blood pressure values into the `rx` and `ry` attributes of the circles, creating elliptical markers. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. Data is loaded asynchronously via `d3.csv` from a GitHub gist URL, with a custom row parser converting numeric fields.

Ggayuvurukuti@gmail.com
78% match