ICE-6 Scatter Plot

100%

ICE-6 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

This scatter plot visualizes the Breast Cancer Wisconsin dataset, showing the relationship between the radius and texture mean of cancer cells. Each point is colored blue or yellow to indicate a malignant or benign diagnosis, with axis labels for both dimensions. The visualization is built using D3 v6 within a React framework, loading CSV data via `d3.csv` and rendering SVG circles with `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`. It uses JavaScript’s `innerWidth` and `innerHeight` to size the chart responsively.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE Bonus 3D Scatter Plot

This 3D scatter plot visualizes a cancer dataset, plotting radius, area, and cancer status as three dimensions. Two traces render the same data points with different marker styles, both using gray tones for the circles. The visualization is built with Plotly's `scatter3d` trace type, with data loaded via D3's `d3.csv` function from a GitHub-hosted CSV file. The Plotly `newPlot` function renders the chart inside an HTML div.

KKetha

81% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot, built with D3.js, visualizes breast cancer tumor data from a CSV file, cycling through different feature pairs on the x-axis. It shows the relationship between various cell measurements, with data points colored by cancer stage (orange for stage one, blue for stage two, black for stage three). The visualization uses an SVG with a custom `scatterPlot` function and a `setInterval` animation to swap the x-axis variable, while a legend and axis labels clarify the mapping.

Aamiralitah

80% match

Loading thumbnail…

Scatterplot of Breast Cancer

This scatterplot shows the relationship between clump thickness and cell size in the Breast Cancer dataset, with each point representing a sample. The code loads the CSV data from a GitHub gist using `d3.csv`, parses the numeric fields, and maps them to x and y positions via `d3.scaleLinear` with an auto-computed extent. Circles are rendered as SVG elements, and axes are added using `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, with margins and a fixed point radius, demonstrating a basic D3 v6 data-joining workflow.

RRidhima Saxena

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 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Breast Cancer dataset, with points transitioning every two seconds between four numeric attributes: area, texture, perimeter, and radius standard error. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined to data and updated via a `setInterval` callback that swaps the x-value accessor. The reusable chart pattern, defined in `scatterPlot.js`, accepts configurable width, height, margins, and radius, with animations handled through D3’s data join.

Aamiralitah

77% match

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

77% match

Loading thumbnail…

Fork of Fork of Fork of 3D Scatter Plot with Breast Cancer

This visualization displays two scatter plots of breast cancer dataset features, including radius, texture, perimeter, and area measurements. The visualization combines a 2D scatter plot and a 3D scatter plot, both rendered using the Plotly.js library with data loaded via D3.js’s CSV parsing. The plots use marker styling with custom colors, symbol shapes, and opacity settings to distinguish between the two display modes. The 3D scatter plot explores relationships between radius, texture, and area features, while the 2D plot compares radius and texture with perimeter measurements.

Aamiralitah

76% match

Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Nneeharika2023@gmail.com

76% match