Chandrashekhar Ramamurthi ICE-7 Reusable scatter plot

ICE-7 Reusable scatter plot with different symbol

This example presents a reusable D3.js scatter plot that visualizes the Iris dataset, encoding species type through both color and distinct symbols. The chart plots petal width against sepal length, with each data point rendered as an SVG path using `d3.symbol` for the shapes and `d3.scaleOrdinal` for color mapping. The code demonstrates a reusable chart pattern through a `scatterPlot` function that accepts configuration via getter-setter methods, applying `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for annotations.

CChandrashekharRamamuthi

ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis while encoding species with different symbols. The chart updates every 15 seconds, cycling through the four numeric columns for the x-axis. It uses a modular `scatterPlot` function with D3 scales, ordinal symbols, and axes, rendered as SVG, based on the "Towards Reusable Charts" pattern.

Mmanvithareddykarra

ICE-7 Fork of Reusable Scatter Plot

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses three distinct D3 symbol shapes to differentiate iris species, rendering each data point as an SVG path element. The implementation leverages reusable D3 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbols`, and `symbol`, with data loaded asynchronously via `csv`. The chart fills the entire browser window, with axes labeled and styled through CSS.

IIndhuKrishnaraj

ICE-7 Reusable Scatter Plot

This visualization displays the Iris dataset, plotting sepal length against petal width while distinguishing species through different SVG path symbols. The reusable scatter plot component, built with D3 v6, uses scaleLinear for axes, scaleOrdinal for symbol mapping, and d3.symbol to generate custom point shapes. The code demonstrates a functional chart factory pattern with setters for width, height, data, and margin, invoked via selection.call(). Iris data loads from a CSV file with type coercion applied to numeric columns.

CCHANDU BHARGAVI

ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length onto x and y axes with circles colored by species (blue, red, yellow). It uses d3.scaleLinear, axisLeft, and axisBottom to render axes, with the data loaded via d3.csv. The reusable scatterPlot function is configured through chainable setters for dimensions, margins, and radius, then invoked with selection.call(plot). The code also cycles through different column combinations for the x-value, demonstrating the plot’s reusability.

RRadhakrishna246

ICE-7 Reusable scatter plot with different symbol

This example presents the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses different symbols and colors to distinguish the three iris species, making group separation immediately visible. Built with D3.js, the visualization leverages a reusable `scatterPlot` component that accepts configuration for data, scales, margins, and symbol mapping. The code imports specific D3 modules for linear and ordinal scales, axes, and symbol generation, rendering the final result as an SVG. The dataset is loaded from a remote CSV file.

Kkarumanchimanasa

ICE-7 - Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with different D3 symbols and colors. Built as a reusable D3 component, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render points, axes, and margins dynamically. The SVG output updates based on window size, with data loaded via `csv` and parsed before rendering.

Aav.dj.2000@gmail.com

ICE-7 Resuable scatterplot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes (circles, crosses, and diamonds). Built with the reusable chart pattern, the `scatterPlot()` function configures scales, axes, and symbol generators via chained accessor methods. The visualization renders as animated SVG, with axes created using `axisLeft` and `axisBottom`, while `scaleOrdinal` and `symbol` map categorical data to geometric marks. Data loads asynchronously via `d3.csv` and updates smoothly through D3’s data join.

SShridhar Kshirsagar