Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
Jjia-sin
Last edited Apr 11, 2023
Created on Apr 11, 2023

This example displays the classic Iris Dataset, plotting petal width against sepal length and using different symbols to distinguish between the three iris species. The code loads CSV data via `d3.csv`, maps each measurement to numeric values, and uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` to map species to a set of D3 symbols via `d3.symbol`. A reusable `scatterPlot` function configures margins, axis labels, and symbol size, then renders the chart as SVG with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example is a reusable scatter plot that visualizes the Iris Dataset, using distinct symbols to represent different species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axis labels rendered via `d3.axisLeft` and `d3.axisBottom`. The implementation leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate SVG paths for each data point. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed with a custom row handler. The plot’s dimensions adapt to the browser window, and styling is applied through a linked stylesheet.

Bbhanuteja1807@gmail.com
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from the `d3.symbols` collection, using the `scaleOrdinal` scale. The visualization uses `scaleLinear` for axes, `axisLeft`, and `axisBottom` for ticks, and renders as an SVG. The code creates a reusable `scatterPlot` function that accepts data, value accessors, and margin settings, with data loaded from a CSV file.

DDonald Bagwell
96% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, mapping petal width and sepal length to the x and y axes. Each of the three iris species is represented by a distinct symbol from D3’s `symbol` and `symbols` APIs, with positions scaled using `scaleLinear` and axes drawn via `axisLeft` and `axisBottom`. The chart is built with a reusable `scatterPlot` function in D3 v6, rendering SVG shapes whose paths are generated by `symbolGenerator`, and loaded asynchronously from a CSV URL.

Ggeethanjalikotaru
95% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This example visualizes the Iris dataset as a scatter plot, mapping petal width and sepal length along the axes while using distinct D3 symbols to differentiate iris species. The code renders SVG via a reusable `scatterPlot` function that takes configuration for dimensions, margins, and accessor functions. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` to assign `d3.symbols` shapes per species, and `d3.symbol` to generate path data. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while data is loaded asynchronously with `d3.csv`.

Zzhuomo-maker
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for individual flowers while encoding species with different D3 symbols. The reusable `scatterPlot` function uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` to assign symbols from the `d3.symbols` collection, and `d3.symbol().size()` to generate paths. Data is loaded via `d3.csv`, and the plot renders in SVG with axes created by `d3.axisLeft` and `d3.axisBottom`.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and using distinct symbols for each species. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` to render SVG paths, with axes generated via `axisLeft` and `axisBottom`. The chart is built through a reusable `scatterPlot` function configured with margin, size, and accessor methods. Data is loaded as CSV from a GitHub gist and parsed into numeric values.

Vvamshisoletii
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example presents the classic Iris dataset as a reusable D3 scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Different species are distinguished through distinct SVG symbols, generated using D3’s `symbol` and `scaleOrdinal`. The visualization is built with a reusable `scatterPlot` function, which configures linear scales, axes, margins, and symbol size. Data is loaded as CSV via D3’s `csv` method, and the plot updates the DOM by joining path elements. The output is a clean, interactive-free scatter chart rendered as SVG.

LLakshmiManjushaReddyYarreddu
95% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot displays the Iris dataset, plotting petal width against sepal length, with each species (setosa, versicolor, virginica) represented by a distinct symbol. The visualization is constructed as a reusable D3 function, `scatterPlot`, which uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types via `symbols`, and `symbol().size()` to generate the marker paths. The `index.js` orchestrates loading CSV data with `csv`, parsing numeric fields, and applying the plot function to an SVG, while also adding custom axis labels and a title.

Bbhanuteja1807@gmail.com
95% match