Bubble Chart in D3

100%

Bubble Chart in D3

✓ Published1🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This bubble chart visualizes the size distribution of turtles, plotting length on the x-axis and width on the y-axis. Circle size encodes height, while color distinguishes sex: blue for male and orange for female. Interactive tooltips appear on mouseover, displaying exact measurements. Built with D3 v7, the SVG visualization uses scales like `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, with data loaded from a CSV file and axes rendered via `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

A bubble plot depicting the width, length, height, and sex of turtles.

Height is displayed using circle size, and gender is displayed using color (Blue = male, Orange = female)

MIT Licensed

Similar vizzes

Loading thumbnail…

Turtle test

This stacked area chart visualizes turtle population counts for three species—Green, Loggerhead, and Hawksbill—from 1940 to 2010, based on data from `data.csv`. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the areas and `d3.area` with `d3.curveBasis` to render smooth paths in SVG. The `d3-area-label` library positions white text labels within each area, while `d3.scaleOrdinal(d3.schemeDark2)` colors the series. Hovering turns areas black, and an interactive resize listener updates the chart’s dimensions.

CChristine Lanser

73% match

Loading thumbnail…

Bubble Chart Example

This example visualizes a small dataset of points with x, y, and size attributes as a bubble chart, where each circle's horizontal and vertical positions map to the x and y values, and its radius corresponds to the size value. The chart is rendered as an SVG element using the d3.v6 library, including linear scales for both axes, axis ticks and labels, and steelblue filled bubbles. The code demonstrates the use of d3.select, d3.max, d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

BBhavanaGIrni

73% match

Loading thumbnail…

D3-Bubble Chart

This example displays the Iris dataset as a bubble chart, plotting sepal width on the x-axis and petal width on the y-axis. Circle size encodes sepal length, while color distinguishes species (setosa, virginica, versicolor) via a scaleOrdinal with a custom range. Built with D3 v7, it uses d3.csv for data loading, d3.scaleLinear for positioning and size, and SVG circles for rendering. The chart also includes axis labels and size legend annotations.

CChandana Srinivas

73% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the relationship between the number of women and men at various universities, with bubble size representing the gender gap. The visualization uses a scatter plot layout where each school is positioned by their female and male student counts, and the radius of each bubble scales with the gap between these values. The chart is built using D3 v6, employing linear scales for the x and y axes, a square-root scale for bubble radius, and an ordinal color scale to distinguish schools. Data is loaded from an external JSON file, and the visualization includes a color-coded legend rendered as SVG.

HHarshithaAmbilpur

72% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

AArun Pratap

71% match

Loading thumbnail…

Bubble Chart

This bubble chart displays three data points as red circles, with each bubble’s horizontal position, vertical position, and radius mapped from the `a`, `b`, and `c` fields of the data array via `d3.scaleLinear` ranges. The SVG rendering uses D3 v7’s selection API (`d3.select`, `.enter().append()`) to create the circles, while `d3.axisBottom` and `d3.axisLeft` add labeled x- and y-axes with explicit pixel translations. The static example demonstrates basic D3 scales, SVG circle generation, and axis construction without interaction or animation.

Ssaipaidipalli

70% match

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes sea turtle population trends from 1910 to 1990, showing the decline of Green, Loggerhead, and Hawksbill species using mock data. The chart uses d3.stack with ascending order, d3.area with curveBasis smoothing, and d3.scaleTime for the x-axis. Label placement employs d3-area-label, while hover interactions reveal species names via SVG titles. The visualization renders as SVG within an HTML page, using d3-scale-chromatic’s schemeDark2 for categorical colors and d3.axisBottom and d3.axisLeft for gridlines and tick marks.

Ggaryz1997

70% match

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes mock sea turtle survival data for three species—Green, Loggerhead, and Hawksbill—over time, with each colored layer representing population counts. The chart uses D3 v4’s `d3.stack()`, `d3.area()`, and `d3.scaleTime()` to render the SVG paths, while `d3-area-label` positions the species labels inside each region. Axis ticks and gridlines are styled with CSS, and the y-axis title labels the population metric. Data is loaded from a CSV file, filtered to post-1900 dates, and the chart redraws responsively on window resize.

NNarayana Reddy

69% match