Fork of Bubble Chart new

100%

Fork of Bubble Chart new

✓ Published0🌍 Public

Last edited Sep 24, 2023

Created on Sep 24, 2023

This interactive bubble chart visualizes the classic Iris dataset, plotting flower measurements as circles on a scatterplot. Users select from sepal and petal attributes via dropdowns to update the x and y axes. The D3 v6 code loads data with `d3.csv`, creates an SVG canvas, and uses `d3.scaleLinear` and `d3.axisBottom` to map positions and axes. When attributes change, a transition with a 500-millisecond duration animates the circles to their new coordinates, providing dynamic exploration of the data.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Fork of Iris Scatter Plot-0616053

An interactive scatter plot of the Iris flower dataset, colored by species, allows users to explore relationships between four flower measurements. The visualization uses D3 v5 to render an SVG chart with selectable X and Y axes, dynamically updating the plot when the user changes the dropdown menus for sepal and petal dimensions. The data is loaded from a local CSV file using `d3.csv`, and the chart is drawn with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear`, applying species-specific colors and translucent points.

Gginnyching

84% match

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles represent individual flower samples, with axes rendered using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads data via `d3.csv`, parses numeric columns, and appends SVG circles sized with a fixed radius. It leverages D3 v6, fetching the dataset from a GitHub Gist and responsively filling the browser window with full viewport dimensions.

DDuckGorilla

84% match

Loading thumbnail…

Fork of D3 Scatter Plot

A fork of the classic D3 scatter plot, this example visualizes the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. It uses d3.csv to load and parse the data, with d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for the axes. Circles are appended to an SVG via d3.selectAll and data joins. The chart fills the entire browser window, with a fixed radius of 5 pixels for each point. The code relies on d3 v6.

AAaron

83% match

Loading thumbnail…

Fork of D3 Scatter Plot2

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a small circle positioned using D3’s `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. The code loads the CSV data via `d3.csv`, parses numeric fields, and renders the marks as SVG circles, with the chart sized to fill the browser window. The example uses D3 v7 within a React-independent HTML page.

Rroyable88

83% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of four flower measurements (sepal/petal length/width) via dropdown menus. Points are color-coded by species, with a legend and animated transitions (using D3’s `transition().duration(1000)`) when axes change. The visualization uses D3 v5 to load CSV data, compute linear scales, render SVG axes with `axisBottom` and `axisLeft`, and bind data to circles. Animated positional updates highlight distribution differences between flower classes.

YYi-Qing

83% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which measurement appears on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while data points are drawn as SVG circles with color-coded species and an accompanying legend. When the axes change, the circles smoothly transition to their new positions using D3's `transition()`.

HHaowenWeiJohn

83% match

Loading thumbnail…

Bubble Plot D3

This bubble plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each circle's radius encodes petal width, while its color distinguishes the three iris species (setosa, versicolor, virginica) via a categorical color scheme. Built with D3.js v6, the SVG visualization uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeSet1` for species coloring. Data is loaded asynchronously from a CSV file using `d3.csv`, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Bbhavanimandula@my.unt.edu

83% match