Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Reusable scatter plot with different symbol

✓ Published0🌍 Public
NNeeharikaGali
Last edited Mar 25, 2023
Created on Mar 25, 2023

This fork of the ICE-7 reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length to reveal species clusters. It uses d3’s `scaleOrdinal` to assign distinct symbol shapes and colors (black, grey, pink) for each iris species. The code builds the chart with `scaleLinear`, `axisLeft`, and `axisBottom`, while `symbolGenerator` generates the mark paths. Data loads via a CSV URL, and the SVG renders with window-sized dimensions and custom margins, showing setosa, versicolor, and virginica points.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species using distinct D3 symbols and colors. Built as a reusable component, it leverages `scaleLinear` for axes, `scaleOrdinal` for symbol and color mapping, and `symbol` generators to render SVG paths. The chart updates to fill the window, with axes drawn via `axisBottom` and `axisLeft`. Data loads from a CSV URL and is parsed with numeric coercion, demonstrating D3’s data-joining workflow with `.join()` and configuration via getter-setter methods.

PPrathyusha Jampala
94% match
Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each data point is rendered as a distinct symbol, with colors corresponding to the species of iris. The plot, implemented with D3.js, uses ordinal scales for symbols and colors, linear scales for axes, and SVG paths for marks. Data is loaded from a CSV file hosted as a GitHub gist.

Ssivamani
93% match
Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

This visualization displays the Iris dataset as a scatter plot. It shows the relationship between petal width and sepal length, with each of the three iris species represented by a distinct color and symbol. The plot uses D3's `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` functions to map data values to visual properties. The `scatterPlot` function is a reusable component, configured via a fluid interface, and renders as an SVG.

Mmanishcheruku
92% match
Loading thumbnail…

Fork of DV ICE7-Reusable Scatter Plot for Iris Data

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species by symbol type. Built as a reusable chart module, it uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for ticks. The SVG rendering fills the viewport, with data loaded via d3.csv from a GitHub Gist and parsed into numeric fields. The chart’s dimensions, margins, and accessor functions are configurable through a fluent API, demonstrating a modular approach to D3 visualization.

NNeeharikaGali
91% match
Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This scatter plot displays the Iris dataset, mapping petal width along the x-axis and sepal length along the y-axis. Each flower species is represented by a distinct SVG symbol, rendered using D3’s `scaleOrdinal`, `symbol`, and `symbolGenerator`. The chart reads CSV data asynchronously via `d3.csv` and builds axes with `axisLeft` and `axisBottom`. It follows a reusable chart pattern, exposing configuration methods like `.width()`, `.height()`, and `.margin()` for customization. The visualization uses D3 v6 and is styled with the Share Tech font in SVG.

NNikitha123171
91% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This fork of the ICE 7 reusable D3 scatter plot visualizes the Iris dataset, rendering each flower as a symbol whose shape encodes species and position encodes petal width and sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` within a custom reusable chart function. The plot animates every 15 seconds by cycling the x-axis through four different numeric columns using `setInterval`, updating the scales and re-rendering the SVG dynamically.

NNaimisha-M
91% match
Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

A D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Data points use different symbols and colors (yellow, aqua, red) to distinguish iris species. The reusable `scatterPlot` component builds linear scales, ordinal symbol and color scales, and renders SVG paths with an axis. It loads CSV data via `d3.csv` and parses numeric fields, with the plot sized to the full window.

Ssivamani
91% match
Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length with points colored and shaped by species—setosa, versicolor, and virginica. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbol generators to render SVG marks. The axes dynamically cycle through different measurement columns every ten seconds via setInterval, updating the chart through a reusable closure-based chart function that returns getter and setter accessors.

NNikitha123171
90% match