Skip to main content
SimilarExport ZIP
100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public
MMokshithabhi
Last edited May 12, 2023
Created on May 11, 2023

A scatter plot visualization displays the classic Iris Dataset, with points rendered as randomly colored and sized hexagons. The example demonstrates a reusable D3 v6 approach where SVG polygons are bound to data via `selectAll` and `enter`, generating hexagon shapes with randomized sizes and colors from predefined ranges. The code shows how array methods like `map` and `join` construct the polygon points, while `Math.random` drives the dynamic style and dimension updates applied through D3 selections. The implementation runs in a vanilla HTML page using a local `d3` dependency.

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 displays the Iris Dataset as a scatter plot, mapping petal width and sepal length to x and y positions while encoding species with distinct D3 symbols. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and the d3.symbol API to generate path shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The visualization is a reusable module, created via a custom scatterPlot function that is called once within an SVG container sized to the viewport.

Nnsatyaprakash22
88% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the Iris dataset as a scatter plot of petal width against sepal length, with each species represented by a distinct D3 symbol. The visualization uses d3.scaleLinear for positional encoding, d3.scaleOrdinal to map species to symbol types, and d3.symbol to generate the icon shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The reusable chart component accepts configurable accessor functions and margin parameters, and the data is loaded asynchronously from a GitHub Gist via d3.csv.

MMokshithabhi
87% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot uses the Iris Dataset to visualize the relationship between petal width and sepal length, with each of the three flower species represented by a distinct symbol. D3.js v6.7.0 powers the visualization, employing `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol()` for mark generation. The reusable `scatterPlot` component draws SVG paths, includes left and bottom axes, and automatically scales to the browser window size.

0057SatvikDamera
87% 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
87% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset with a scatter plot that maps petal width to the x-axis, sepal length to the y-axis, and encodes the iris species using different symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render SVG paths for the marks and axes. The plot fills the entire browser window, with margins adjusted for labels. The code is structured as a reusable `scatterPlot` function that accepts configuration for data, dimensions, and value selectors.

NNeeharikaGali
87% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

A D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented by a distinct symbol from d3.symbols, with symbol types assigned via d3.scaleOrdinal. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a custom scatterPlot module to manage the reusable layout. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering fills the full browser window.

SSANEEM MOHAMMAD
87% match
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
87% match
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, displaying petal width against sepal length. Points are colored and shaped according to the species of each iris flower. The visualization is built using D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions to map data values to coordinates and symbol types. The `scatterPlot` module defines a reusable chart function that generates SVG paths for each data point, along with axis elements created via `axisLeft` and `axisBottom`.

Kkollirohit2000
87% match