Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public
Rradhadevarapu
Last edited Mar 12, 2023
Created on Mar 10, 2023

This fork of a reusable D3 scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. Each species is encoded by a different symbol from the `symbols` range, generated using `symbolGenerator.type()`. The chart is rendered as SVG, fills the viewport, and includes labeled axes with custom font styling.

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 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 scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with each species represented by a distinct D3 symbol shape. Built as a reusable D3 module, it uses `scaleOrdinal` to assign symbols, `scaleLinear` for axes, and `symbolGenerator` to generate SVG paths. The code draws axes with `axisLeft` and `axisBottom`, and loads data asynchronously via `d3.csv`.

SSravaniPosina
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three species. The plot encodes species identity through distinct D3 symbols, including a custom square symbol, and uses D3’s `scaleLinear` for axes and `scaleOrdinal` for symbol mapping. Data is loaded via `d3.csv` and rendered as SVG paths, with axes generated using `axisLeft` and `axisBottom`.

Pprachow
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length for individual flowers. The data comes from a CSV file loaded via `d3.csv`, and each species is represented by a distinct symbol using `d3.scaleOrdinal` and the `d3.symbol` API. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while the reusable `scatterPlot` function handles the layout and rendering. The SVG output is sized to the full browser window, with axes and ticks styled via CSS. The plot is built with D3 v6 and focuses on comparing species distributions across two measured traits.

PPrathyusha Jampala
94% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols. The visualization uses a reusable `scatterPlot` function that leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths. The dataset is loaded as CSV via `d3.csv` and parsed into numeric values. Axis tick labels are styled at 24px, with the plot filling the entire browser window.

SSharanyaSriram
94% match
Loading thumbnail…

Fork of Fork of Reusable scatter plot with different symbols

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each species is represented by a distinct symbol from the d3.symbols collection, with the symbol type determined by a d3.scaleOrdinal. The code uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load the data. Rendering is done via SVG paths, with the chart configured through a custom reusable function pattern.

MMokshithabhi
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot visualizes the Iris Dataset, mapping sepal length against petal width with D3 v6. The code uses `d3.csv` to load data and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes. A `d3.scaleOrdinal` and `d3.symbol` generator draw points as SVG paths, with symbol types based on species. The `scatterPlot()` function is reusable, configured via chained methods for dimensions, margins, and accessors.

AAlena
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. It uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render axes, while `symbol` and `symbols` generate distinct markers for each iris species. The reusable `scatterPlot` function configures scales, margins, and encoding via method chaining. Data loads asynchronously from a GitHub Gist CSV, with numeric parsing applied to all measurements. SVG output adapts to the full viewport size.

NNikhilchiguru-8
94% match