Skip to main content
SimilarExport ZIP
100%

D3-Bubble Chart

✓ Published0🌍 Public
CChandana Srinivas
Last edited Feb 26, 2024
Created on Feb 24, 2024
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Distributed Chart for Iris Dataset

This visualization displays the classic Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis, with each of the three species colored distinctly (red, green, blue). The code loads data from a CSV via `d3.csv`, uses linear scales (`d3.scaleLinear`) to map data coordinates, and renders circles (`svg.selectAll("circle")`) using the SVG rendering approach. Axes are constructed with `d3.axisBottom` and `d3.axisLeft` within a D3 v7 React-free HTML page.

Bbhanuteja1807@gmail.com
87% match
Loading thumbnail…

D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 to load the CSV data via `d3.csv`, and then builds scales with `d3.scaleLinear` and `extent` to compute domains. Circles are drawn as SVG elements, with axes generated through `d3.axisLeft` and `d3.axisBottom`. The visualization adapts to the full browser window and includes a large font size for tick labels via CSS.

SSubhendu Karmakar
86% match
Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting sepal length against petal length with points colored by species (setosa, versicolor, virginica). It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for categorical colors, and d3.axisBottom/axisLeft with tickSize to create a ggplot2-style gray background with white gridlines. The SVG circles are appended via d3.selectAll and .enter(), with data loaded through d3.csv. The chart includes axis labels and a legend-free design, emphasizing the three species clusters through distinct color ranges.

SSheela2930
86% match
Loading thumbnail…

fresh block

This example shows the classic Iris dataset as a bubble chart, mapping sepal length to the x-axis, petal width to the y-axis, and sepal length to bubble radius, with species distinguished by color. The chart is rendered as static SVG in D3 v3, using `d3.scale.linear` for position and size scales, `d3.scale.category10` for colors, and `d3.svg.axis` for the labeled axes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with a title and axis labels added manually.

AAlexMutiso
86% match
Loading thumbnail…

fresh block

This example shows the classic Iris dataset as a bubble chart, mapping sepal length to the x-axis, petal width to the y-axis, and sepal length to bubble radius, with species distinguished by color. The chart is rendered as static SVG in D3 v3, using `d3.scale.linear` for position and size scales, `d3.scale.category10` for colors, and `d3.svg.axis` for the labeled axes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with a title and axis labels added manually.

AAlexMutiso
86% match
Loading thumbnail…

iris dataset

This example visualizes the Iris dataset as a scatter plot, showing sepal length on the x-axis and sepal width on the y-axis for individual flowers. The code uses D3 v5 with React, rendering SVG circles colored in red, with axis labels and a title. It employs `d3.csv` to load the data, `scaleLinear` for scaling, and `axisBottom` and `axisLeft` with tick lines to construct the chart, while the data comes from the `data.csv` file.

SShweta-tech
85% match
Loading thumbnail…

D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization renders circles as marks in an SVG, with scales defined using `scaleLinear` and axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`, with numeric fields parsed through a custom row function. The chart fills the browser window, with margins applied to position the axes and plot area.

SSubhamChhetri
85% match
Loading thumbnail…

D3 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v7 and React, the visualization uses SVG circles and linear scales to map data values to screen coordinates, with axes generated by d3.axisLeft and d3.axisBottom. The code loads CSV data asynchronously via d3.csv, parses numeric fields, and renders points with a steelblue fill. Axis tick labels are styled with a large Courier New font, and the chart fills the browser window dynamically.

Nnicolekevans
85% match