Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Vvagdevi-369
Last edited Mar 12, 2023
Created on Mar 12, 2023

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This example visualizes the relationship between age and BMI in insured individuals using a horizontal bar chart, displaying the top 15 counties by the number of hospitalized COVID-confirmed patients. The chart uses an SVG rendering with React for state management and D3 v5 for scales, axes, and data loading. Specifically, it employs `scaleBand` for the y-axis counties and `scaleLinear` for the x-axis patient counts, with data fetched via `d3.csv` from a GitHub raw URL. The bars are drawn as SVG `<rect>` elements, and custom tick labels replace traditional axes for clarity.

DDineshK2602
90% match
Loading thumbnail…

ICE6

The visualization displays a BMI bar chart comparing height, weight, and BMI values for multiple individuals. It renders two side-by-side SVG bar charts using React and D3 v5. The left chart shows BMI scores with bars colored teal, while the right chart displays height and weight as paired orange and blue bars. Data is loaded from a remote CSV file using `d3.csv`, with scales created via `scaleBand`, `scaleLinear`, and axes drawn with `axisBottom` and `axisLeft`.

KKusumaKumariDama@my.unt.edu
89% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the relationship between age and BMI using an insurance dataset, with each point colored by species. The visualization uses D3 v6 with SVG rendering, loading data from a GitHub gist via `d3.csv` and parsing numeric values. Axes are generated with `axisLeft` and `axisBottom`, while `scaleLinear` maps data domains to pixel ranges. Circle marks are drawn using `selectAll` and `join`, with axis labels styled via SVG text elements in a React-friendly HTML page.

SSrujana390
87% match
Loading thumbnail…

ICE-6

This bar chart displays the ages of the first fifteen employees from a company dataset, with each row labeled by full name and bar length proportional to age. Built with React and D3 v5, it uses `d3.csv` to load remote CSV data, `d3.scaleBand` and `d3.scaleLinear` for axes, and renders an SVG with `rect` elements for bars. Grid lines and tick labels are generated via `d3.ticks`, while the layout follows a margin convention in a `VizContainer` component.

Ggeethanjalikotaru
86% match
Loading thumbnail…

Fork of ICE-6

This visualization displays the relationship between age and BMI for insured individuals, showing a bar chart of hospitalized COVID-confirmed patients per county. The data comes from a CSV file loaded via `d3.csv`, with the first fifteen records rendered as horizontal bars. The chart uses React for component management and D3 v5’s `scaleBand`, `scaleLinear`, and `max` functions to map county names and patient counts. The SVG output includes manually drawn axes with tick marks and labels, while the grid lines are styled in red.

Hhm0421
86% match
Loading thumbnail…

ICE-6

This visualization displays the relationship between holiday status and temperature for insured individuals, using horizontal bars to compare temperature values across different holiday categories. The React component loads data from a CSV file and renders an SVG chart with D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while manually constructing axes and gridlines. Each rectangle’s width corresponds to the temperature value, and the chart title clarifies the focus on age and BMI, though the visualization actually plots holiday flags against temperature data.

Hhm0421
85% match
Loading thumbnail…

ICE-6

This bar chart displays the average height of men across 20 countries, with countries listed along the vertical axis and height values on the horizontal axis. The visualization uses React to manage the component state and D3 v5’s `csv` loader to fetch data from a GitHub-hosted CSV file, while `scaleBand` and `scaleLinear` position the bars. Blue rectangles represent the height values, and the SVG rendering approach uses custom ticks and gridlines generated with D3’s `scaleLinear` ticks method.

Ssaidhiraj16
84% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
83% match