WorldMap Simple

100%

WorldMap Simple

✓ Published0🌍 Public

Last edited Feb 21, 2026

Created on Feb 21, 2026

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It renders circular marks for each observation using D3 v6’s `csv` loader, `scaleLinear`, and `axisLeft`/`axisBottom` for the axes. The plot fills the entire browser window, leveraging SVG circles with a fixed radius. Data is fetched from a GitHub Gist containing the Iris CSV file, which is parsed with custom number coercion for its four numeric columns.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example visualizes the Iris dataset as a scatter plot of petal length against sepal length. It uses d3.csv to load the data and d3.scaleLinear with d3.extent to map values to screen coordinates. Circles are rendered in SVG, and d3.axisLeft and d3.axisBottom generate the scales. The plot fills the entire browser window, with data points drawn at a fixed radius of 5 pixels.

BBismark Kofi Owusu Sarfo

94% match

Loading thumbnail…

World Map Simple

This example displays a scatter plot of the Iris Dataset on a world map, but the map itself is not rendered—only the data points appear. It loads geographic JSON from the visionscarto-world-atlas package, parses it with `csvParse`, and scales the sepal and petal length values using `scaleLinear` and `extent`. The visualization is drawn with D3 v7, using `selectAll` and `join` to bind circles that represent each flower sample. The code fetches the atlas data asynchronously and updates the state to trigger re-rendering.

NNavak94

91% match

Loading thumbnail…

World map

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length on the x-axis against sepal width on the y-axis. Each black circle represents a single flower sample, with the plot rendered within a framed chart area using margins. Built with React and D3 v7, the code uses `d3.scaleLinear` for both axes, `d3.extent` to compute the domain from the CSV data, and `d3.axisBottom`/`d3.axisLeft` for ticks. Axis labels are added with custom text elements, and the visualization updates dynamically as the data loads.

BBismark Kofi Owusu Sarfo

88% match

Loading thumbnail…

world map

This visualization displays Fisher's Iris dataset as an interactive scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each flower is rendered as a small circle, with axes and tick labels generated via `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, using `d3.scaleLinear` for scaling, `d3.extent` to compute data domains, and `d3.csv` to load the data from a gist. The SVG canvas resizes to the full viewport, and circles are positioned using `d3.select` and the `.join` API.

BBismark Kofi Owusu Sarfo

88% match

Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, using petal length on the x-axis and sepal length on the y-axis. The code loads the data via `d3.csv`, maps values to screen coordinates with `d3.scaleLinear` and `d3.extent`, and renders SVG circles. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. Each point includes a `<title>` element for hover tooltips. The visualization fills the browser window and is implemented with D3 v7.

Wwspwll@gmail.com

84% match

Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, mapping petal length on the x-axis and sepal length on the y-axis to reveal patterns across the flower samples. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct axes and render circles in SVG, with data loaded asynchronously via `d3.csv` from a GitHub gist. The plot fills the entire browser window, using a simple margin-based layout and a fixed point radius to represent each data point.

AAaron

84% match

Loading thumbnail…

D3 Scatter Plot Following Along

This example displays the classic Iris dataset as a scatter plot, mapping petal length along the x-axis and sepal length along the y-axis. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to compute the domain from the CSV data, then renders circles via SVG selection joins. Axis components are generated with `axisLeft` and `axisBottom`. The plot fills the entire browser window, with data loaded asynchronously from a GitHub gist, parsed to numeric values, and drawn with fixed 5-pixel radius points.

PParker-D5

84% match

Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang

83% match