Fork of ICE-6 Scatter Plot

100%

Fork of ICE-6 Scatter Plot

✓ Published3🌍 Public

Last edited Apr 8, 2023

Created on Mar 23, 2023

This fork of an ICE-6 scatter plot visualizes Commonwealth Games data, mapping sleep time on the x-axis and BMI on the y-axis. Points are colored red for smokers and black for non-smokers based on the Smoking attribute. Built with D3 v6 and React, the SVG chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded via `d3.csv` from a remote gist.

AI-generated description

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

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

79% match

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This visualization displays a scatter plot of Commonwealth Games data, with each circle representing a country positioned by its first and second place finishing counts. The circles are colored by country—red for the USA, yellow for China, green for Japan, and black for others—with a sky-blue background. The code loads a German Credit CSV dataset, though the visualization appears to plot sports performance metrics, using D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. It renders as an SVG with circle elements, axis labels, and custom tick font styling.

Cchandanagandla

79% match

Loading thumbnail…

Fork of Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between age groups and their average deep sleep percentage, with each data point representing an individual. The visualization uses D3.js v7 within a React framework, rendering as an SVG. The code employs `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, `d3.extent` to determine domains, and `d3.axisBottom` and `d3.axisLeft` for axes. A legend is added using color ticks. The data comes from a GitHub gist, and the page uses a light blue background with Arial font.

TTekmal-Bhavana

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

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

78% match

Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a BMI bar chart with two side-by-side graphs: one displaying BMI values per person, and another comparing Height and Weight as grouped bars. The visualization uses React for component structure and D3 v5 for data parsing via `d3.csv` and scales (`scaleBand`, `scaleLinear`). A CSV from GitHub Gist provides the dataset, which is loaded asynchronously and rendered as SVG with rounded rects, rotated axis labels, and custom axis text.

Rrobertotienonyaranga@gmail.com

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

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

78% match