Skip to main content
SimilarExport ZIP
100%

ICE-6 Scatter Plot

✓ Published0🌍 Public
SSrujana390
Last edited Mar 23, 2023
Created on Mar 23, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Scatter Plot

This D3.js scatter plot visualizes an insurance dataset, mapping BMI to charges for individual patients. Points are colored red for smokers and green for non-smokers, using a custom `scaleLinear` mapping for the axes. The visualization employs `csv` for data loading, `select` and `join` for SVG circle rendering, and `axisLeft`/`axisBottom` for labeled axes, with all text styled in cursive. The plot includes age and children values as `rx` and `ry` attributes on the circles, though these do not affect the visual output.

Ggayuvurukuti@gmail.com
88% match
Loading thumbnail…

ICE-6

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.

Vvagdevi-369
87% match
Loading thumbnail…

ICE-7 - Reusable Scatter Plot

This example presents a reusable scatter plot of BMI data, visualizing relationships between Height, Weight, Index, and Age, with points colored by gender. Built with D3 v6, the visualization cycles through different x-axis variables on an interval, updating axes and labels dynamically. It uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG circles for marks and a custom legend. Data loads from a CSV via `d3.csv`, and the chart is rendered through a reusable `scatterPlot` module.

SSaahithi49
86% match
Loading thumbnail…

Fork of ICE-6 Scatter Plot

This example presents a scatter plot of an insurance dataset, visualizing the relationship between patient height and age while encoding weight and income through non-standard circle radius properties (`rx` and `ry`), which distorts the marks into ellipses. The code colors each point by gender (red for female, green for male) and builds the SVG chart using D3 v5 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV file, with axes labeled “Charges” and “bmi” despite the actual mapped fields being age and height.

TTekmal-Bhavana
85% match
Loading thumbnail…

ICE7- Reusable scatter plot

This animated scatter plot visualizes an insurance dataset, plotting age on the x-axis against BMI, charges, or children, which cycle every two seconds. Built with D3.js, the SVG chart uses distinct symbols and colors to differentiate smokers from non-smokers, with axes labeled dynamically as the y-axis metric changes.

Kkotlavamsireddy@gmail.com
84% match
Loading thumbnail…

Activity8_Task3

This scatter plot visualizes the relationship between age and BMI for individuals in an insurance dataset sourced from a GitHub-hosted CSV file. Each point represents a person, colored by their region using a D3 ordinal color scale with the `schemeCategory10` palette. The visualization uses D3 v6’s `csv` loader, `scaleLinear` for axes, and SVG circles for marks, with axis labels for Age and BMI. The chart is responsive, sizing its dimensions based on the window’s inner width and height, and includes axes generated via `axisBottom` and `axisLeft`.

Aanusharamana0@gmail.com
84% match
Loading thumbnail…

ICE - VI (Scatter Plot)

This scatter plot compares medical charges with body mass index, coloring each point by the number of children. The chart uses D3 v5’s `csv` loader to parse the MedicalExpensesPredictors dataset, then maps BMI to the x-axis and charges to the y-axis via `scaleLinear` and `extent`. Points are rendered as SVG circles with `selectAll` and `join`, while `axisLeft` and `axisBottom` create the axes. Labels for both axes and a title are added as SVG text.

Mms.himabinduchalla@gmail.com
83% match
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
83% match