Breast Cancer Data Bar Chart

100%

Breast Cancer Data Bar Chart

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This bar chart visualizes breast cancer data, comparing two numeric attributes—perimeter_mean on the x-axis and radius_mean on the y-axis—across individual records. The chart uses D3 v7 to fetch a CSV dataset from a GitHub repository, then renders horizontal bars via SVG rectangles. Scales are created with d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, while d3.axisBottom and d3.axisLeft generate the corresponding tick marks and labels. The code includes React components for reusable axes and marks, though the primary implementation in index.html directly manipulates the SVG.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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…

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

76% match

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the number of cancer patients for ten Indian states and union territories in 2016, using the `csv` loader from D3 v6 to fetch the dataset. The React app renders SVG bars with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The bar widths encode patient counts, and the chart is static with no interactivity.

Yyastika

76% match

Loading thumbnail…

Cancer Paitents

This visualization displays cancer patient numbers across Indian states and union territories for the year 2016, using a bar chart rendered with SVG. The React component loads data from a CSV file via `d3.csv` and maps each state to a rectangle using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The chart is built with D3 v6 and React 17, with bars positioned starting from the left edge of the SVG canvas.

Yyastika

76% match

Loading thumbnail…

Bar Chart with react and D3

This bar chart displays the number of patients across different states and union territories in 2016, sourced from a CSV file about cervix uteri cancer. The visualization uses D3’s `csv` utility for data loading and `scaleBand` and `scaleLinear` to map the state names and patient counts to SVG rectangles. React handles the rendering, with a `useEffect` hook to fetch data asynchronously and a state variable to trigger the chart’s display once the data arrives.

Yyastika

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

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

75% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the number of cervix uteri cancer patients across different states and union territories in India. The visualization uses a horizontal bar layout with a clean, Poppins-font aesthetic and a single red accent color. It loads CSV data through D3’s `csv` utility, scales the bars with `scaleLinear` and `scaleBand`, and renders the chart as SVG elements in React. The React components build the axes and marks, while D3’s `format` function displays large numbers in a compact notation.

Yyastika

74% match