Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Oct 24, 2017

Created on Oct 23, 2017

This interactive scatter plot visualizes the Wisconsin breast cancer dataset, displaying two distinct clusters corresponding to benign and malignant diagnoses. The visualization is built with D3 v4 and rendered as an SVG, featuring brush-and-zoom functionality that allows users to explore the data by panning and scaling the view. Each point represents a cell nucleus, colored to differentiate the two diagnostic categories (B for benign, M for malignant), and the plot includes a color legend for reference. The implementation is based on Mike Bostock's Brush & Zoom II example and Curran's Stylized Scatter Plot with Color Legend.

AI-generated description

An example of brush and zoom of a scatter plot.

This shows Wisconsin breast cancer dataset. Originally published at UCI Machine Learning Repository: Breast Cancer Wisconsin (Diagnostic) Data Set, this dataset was also published on Kaggle This data set contains information about benign or malignant and ten features computed for each cell nucleus, such as radius, texture, and perimeter.

The data visualization shows these two different clusters(B and M).

Forked from curran 's Stylized Scatter Plot with Color Legend.

forked from <a href='http://bl.ocks.org/anqi-lu/'>anqi-lu</a>'s block: <a href='http://bl.ocks.org/anqi-lu/fc7b249b6a5ba80ffbd599657f150ab2'>Scatter Plot - Breast Cancer</a>

Learned from Mike Bostock 's Brush & Zoom II

mit Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

This responsive scatter plot visualizes the Wisconsin breast cancer dataset, displaying 569 cell nucleus samples plotted by radius_mean and texture_mean. Each point represents a tumor, colored by diagnosis: blue for benign (B) and red for malignant (M). The visualization uses D3 v4 with SVG rendering, and the plot dynamically resizes along with the data point sizes when the window dimensions change. Two distinct clusters emerge in the data, illustrating the separation between benign and malignant cases based on the selected features.

Aanqi-lu

93% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot visualizes the Wisconsin breast cancer dataset, plotting two key measurements—radius mean and texture mean—for each cell nucleus. Benign and malignant samples are distinguished by color, with a color legend generated using d3-legend. The visualization reveals two distinct clusters corresponding to the diagnostic classes, rendered as SVG circles via D3 v4. The data, originally from the UCI Machine Learning Repository, includes 30 computed features for each nucleus, though only two are shown here to illustrate the separation between benign and malignant cases.

Aanqi-lu

92% match

Loading thumbnail…

ICE-6 Scatter Plot

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.

KKetha

82% match

Loading thumbnail…

DOM panzoom demo 2

This interactive scatterplot visualizes the Wisconsin breast cancer dataset, plotting Mitoses against Bland_Chromatin with points colored by tumor class. Built with Vega-Lite and rendered via D3, the visualization uses the Panzoom library to enable smooth panning and zooming of the entire DOM area. The chart fills the browser window and includes tooltips for exploring individual data points, with a configurable axis style to improve readability.

OOleJRask

79% 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…

Activity7_Q1

This example presents an animated visualization of the Wisconsin Breast Cancer dataset, rotating through three pie charts every few seconds. The charts display the distribution of mean smoothness, the count of malignant versus benign tumors, and the distribution of mean radius. Using D3 version 6, the visualization loads CSV data from a Gist URL, computes bin counts client-side, and renders each chart with SVG paths via d3.pie and d3.arc. A setInterval timer drives the rotation, while a legend with color-coded ranges updates for each chart.

Rrohitpotluri@my.unt.edu

77% 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…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com

77% match