Fork of Reusable scatter plot with different symbols

100%

Fork of Reusable scatter plot with different symbols

✓ Published0🌍 Public

Kkollirohit2000

Last edited Mar 30, 2023

Created on Mar 30, 2023

Forked from 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`.

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 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

95% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This 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 with a distinct symbol, determined by the `scaleOrdinal` and `symbols` APIs, with all points rendered at a fixed size. The visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `symbol().size()` to generate SVG paths. Data is loaded from a CSV via `d3.csv`, and the plot is drawn into a full-window SVG.

0057SatvikDamera

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 for individual flower samples. Different species are distinguished using distinct symbols applied via a d3.scaleOrdinal with an array of d3 symbols. The visualization uses D3 v6 APIs including d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol. A reusable scatterPlot function configures margins, size, and accessor functions. Data is loaded as CSV and parsed before rendering as SVG paths within a full-window viewport.

NNeeharikaGali

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 for individual flowers. It uses the d3.scaleLinear and d3.scaleOrdinal APIs to position points and assign distinct symbols to each species. The d3.symbol and d3.join methods render the SVG marks, with axes generated by d3.axisLeft and d3.axisBottom. The visualization demonstrates a reusable D3 module that accepts configuration for data, dimensions, margins, and symbol size.

NNikitha123171

95% match

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

95% match

Loading thumbnail…

Fork of 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. The built-in axes provide scale context, and the plot adapts to the window size. It uses D3's `scaleLinear` for positioning, `scaleOrdinal` to assign symbols from the `symbols` set, and `symbol()` to generate the paths for each data point. The code loads the dataset via `csv` and applies the reusable scatter plot module through a chained `.call()` method.

NNikitha123171

95% 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 flower specimens. The code uses d3.scaleLinear for the x and y axes, d3.axisLeft, and d3.axisBottom for the chart's frame. Each species is represented by a distinct symbol, drawn via d3.symbol and d3.symbols, with the symbol type selected through a d3.scaleOrdinal mapping species values to available symbols. The visualization is rendered as an SVG using a reusable scatterPlot function that accepts width, height, data, margin, and size as configurable parameters, with the final output fitted to the window dimensions.

SsreepavanKothapalli

95% 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

95% match