Fork of bar chart

100%

Fork of bar chart

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This bar chart shows the average radius mean of breast cancer tumor cells, grouped by diagnosis (benign or malignant). Sourced from a CSV file fetched via `d3.csv`, the data is aggregated using `d3.rollups` and `d3.mean`. Rendered as SVG, the chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Bars are styled with a black fill that transitions to steelblue on hover. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the chart drawn on an 800x500 canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Bar Chart

This bar chart compares the average tumor radius between benign (B) and malignant (M) diagnoses in a breast cancer dataset. Two black bars represent the computed mean radius for each diagnostic group, with labeled axes and a bold title. The visualization uses D3.js scaling, axis generation, and SVG rendering within a React component, processing data loaded from a CSV file.

Ssravya010

88% match

Loading thumbnail…

bar chart

This bar chart shows the average radius mean of cell nuclei grouped by diagnosis (M for malignant, B for benign). The chart uses a vertical bar layout with a color-encoded categorical scale and displays the numeric value above each bar. Built with D3 v7, it loads CSV data, aggregates values using `d3.rollups` and `d3.mean`, and renders an SVG with axes, a grid, and hover opacity effects. The data source is a remote GitHub-hosted CSV file.

Ssravya010

87% match

Loading thumbnail…

Breast Cancer Data Bar Chart

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.

HHemanthh81

83% match

Loading thumbnail…

task 3

This visualization presents a combined multi-series chart of the Breast Cancer dataset, displaying three variables across sample indices. Light gray bars represent smoothness_mean, scaled by a factor of 1000, while two overlaid polylines show radius_mean in steelblue and perimeter_mean in orange, using a shared y-axis for measurement values. The chart is rendered as an SVG using d3.v7, with data fetched remotely via d3.csv. Axes include grid lines created through SVG transforms and d3.axisBottom and d3.axisLeft, with a legend and axis labels clarifying the series. The dataset is sliced to the first 80 rows.

Ssravya010

78% match

Loading thumbnail…

Question3

This example visualizes cancer data as a scatterplot, plotting tumor radius mean on the x-axis against texture mean on the y-axis. Each point is colored green for benign diagnoses and red for malignant ones, based on the dataset’s Diagnosis field. The code loads CSV data via `d3.csv` from a GitHub raw URL, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart. Rendering is done with SVG circles, with axes and labels appended directly to the SVG container.

Vvishu.valandas@gmail.com

76% match

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This example shows a pie chart of breast cancer diagnosis counts, comparing malignant and benign cases. It loads CSV data via `d3.csv`, aggregates counts with `d3.rollup`, and renders slices using `d3.pie` and `d3.arc` in an SVG. Hovering displays a tooltip with details, while labels and a legend identify each category. The code uses `d3.scaleOrdinal` with `schemeCategory10` for colors and positions text labels at arc centroids via `arc.centroid`.

Jjtulasi05@gmail.com

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

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

74% match