Fork of ICE-6 Scatter Plot

100%

Fork of ICE-6 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 22, 2023

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.

AI-generated description

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

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

86% 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

85% 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

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

81% match

Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This example visualizes diabetes-related health metrics in a responsive scatter plot, mapping pregnancies on the x-axis, glucose levels on the y-axis, and varying symbol shapes based on skin thickness. It uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, d3.symbols, and d3.symbol to generate SVG marks. The reusable chart function supports custom accessors, margins, and symbol size, drawing data from a CSV of diabetes records. The plot fills the browser window with hidden scrollbars and large axis tick text.

MM Hema

81% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Ssrivalliwuyyuru

81% match

Loading thumbnail…

Fork of pavan ice6.2

This example displays a scatter plot of BMI data, plotting each individual’s weight against their height. The visualization uses red and yellow circles to differentiate between male and female data points, with labeled axes for both dimensions. The code loads CSV data from a GitHub gist using `d3.csv`, maps the parsed height and weight values through `d3.scaleLinear` and `d3.extent`, and renders circles as SVG elements. It leverages D3 v6’s `select`, `axisLeft`, and `axisBottom` APIs to generate the chart, with a fixed radius for each point and axis tick labels styled at 24 pixels.

Ppavan vasamsetti

81% 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

81% match