Skip to main content
SimilarExport ZIP
100%

Reusable ScatterPlot with Symbols & Axis Labels

✓ Published1🌍 Public
WWRCIECH
Last edited Dec 31, 2022
Created on Dec 31, 2022

This reusable scatter plot visualizes the Iris dataset, mapping petal length against sepal width and encoding the flower variety with different D3 symbols. Built with React and rendered as SVG, the chart uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.axisLeft/axisBottom for ticks. It displays labeled axes and highlights points in red on hover via CSS, with the main chart logic encapsulated in a configurable scatterPlot function.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter PLot with Symbols

This example demonstrates a reusable scatter plot that displays the Iris dataset, mapping petal length and width along the axes while encoding species with distinct symbols and colors. The chart uses d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols to generate symbol paths, and d3.axisLeft/axisBottom for ticks. The SVG is rendered via React, and the plot is built as a configurable closure function, with hover tooltips added using SVG `<title>` elements.

Sserebryanaya.n@gmail.com
95% match
Loading thumbnail…

Reusable D3 Scatterplot with Symbols

This example presents a reusable D3 scatterplot that visualizes the Iris dataset, mapping petal length against sepal length. It employs SVG rendering within a React framework, using d3.csv to load data and d3.scaleLinear for axes. Distinct species are encoded using d3.scaleOrdinal for colors and d3.symbols for varied point shapes, with d3.axisLeft and d3.axisBottom providing labeled axes. The chart is configured fluently via a custom scatterPlot function, demonstrating a modular approach to building interactive visualizations.

Mmegan-grannan
95% match
Loading thumbnail…

Reusable scatter plot with different symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the x and y axes while using distinct symbols to represent different species. Built with D3 v6 and React, it renders as an SVG that fills the browser window. The reusable `scatterPlot` component leverages `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate the plot, with `axisLeft` and `axisBottom` for the axes. The chart also provides the 100-pixel marks and axis tick styling via CSS.

AAISWARYAMARAPATLA1999
95% match
Loading thumbnail…

Reusable ScatterPlot with Symbols

This example shows a reusable scatterplot of the Iris dataset, where each point is drawn as a distinct symbol based on flower variety. It uses D3’s `scaleOrdinal` to map varieties to D3 symbols, and `symbol` to generate the SVG paths. The chart axes are created with `axisLeft` and `axisBottom`, while a `scaleLinear` maps petal length and sepal width. The chart is packaged as a configurable function, allowing the data, accessors, margins, and symbol size to be set by the caller.

WWRCIECH
94% match
Loading thumbnail…

Reusable D3 Scatter plot with Symbol

This example demonstrates a reusable D3 scatter plot that visualizes the iris dataset, mapping petal length and sepal length along the x and y axes, with different species represented by distinct symbols. The chart is built using React and renders as SVG, with axes and symbols generated via d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs. The code loads the data asynchronously from a CSV URL and applies custom parsing to convert numeric fields.

WWasanta Pruttisarikorn
94% match
Loading thumbnail…

Reusable scatter plot with different symbols

A reusable scatter plot displays the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Different iris species are distinguished using distinct symbols, rendered as SVG paths. The visualization is built with React and D3, leveraging `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate and place the glyphs, along with `axisLeft` and `axisBottom` for the axes.

Ddheeraj1509
94% match
Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris dataset, encoding petal width against sepal length and distinguishing species by symbol type. The code builds a custom chart function using d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, and d3.symbol to generate SVG paths. Data loads via d3.csv, with numeric parsing handled by a row function. The chart adapts to the window size and applies a fixed margin, rendering symbols sized 50 pixels within an SVG container.

Ppawelsapiecha
94% match
Loading thumbnail…

Reusable D3 Scatterplot

This scatterplot displays the Iris dataset, plotting petal width against sepal length and encoding species with distinct symbols. Built as a reusable React component, it uses the D3.js library’s `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs, with marks rendered as SVG paths via the `symbol` function. The chart automatically sizes to the browser window, applies margins, and includes labeled axes, regenerating whenever input parameters change.

MMatthew Bruffey
93% match