ICE-7 Reusuable scatterplot

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

ICE 7 reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species through colored symbols. Built with D3 v6, it uses reusable chart components via `scatterPlot()`, employing `scaleLinear` and `scaleOrdinal` for axes and color mapping. The SVG rendering includes axis labels and a legend-free design, with data loaded asynchronously from a CSV URL. The chart adapts to the viewport size, demonstrating a modular approach to building customizable visualizations with D3's selection and join methods.

Kkakumanusreya

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

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct symbol shapes for each species. Built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol, it encodes species categories through different symbol types. The chart renders as an SVG, filling the viewport, and includes axis labels via d3.axisLeft and d3.axisBottom. The implementation uses a custom scatterPlot function called with a fluent interface to set dimensions, margins, data accessors, and symbol size.

SShridhar Kshirsagar

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, with data points colored by species. Built with D3.js v6, the plot cycles through different attribute pairs on the x-axis, including petal width, sepal width, petal length, and sepal length, updating the axes and circles each second. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, along with SVG elements for rendering and a fixed legend for species identification. The implementation follows a reusable chart pattern, allowing dynamic configuration of dimensions, margins, and value accessors.

Ssuchitra2602

ICE -7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length while encoding species with distinct symbol shapes. Built as a reusable chart pattern, it uses D3 scales and axes to render SVG marks that cycle through different column pairings every 15 seconds via setInterval. The visualization demonstrates the accessor-based architecture for creating modular, configurable chart components.

Nnehabaddam

ICE-7 reusable scatter plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis while encoding species through symbol shapes and colors (grey, coral, and aqua). The chart uses reusable D3.js components, including scaleLinear, scaleOrdinal, axisLeft, axisBottom, and the symbol generator, to render SVG marks. Data is loaded via d3.csv and parsed into numeric values before being passed to the customizable scatterPlot function.

CChathurya