ICE 7: Reusable D3 Scatter Plot

ICE_7_Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements while coloring each point by species. The chart cycles through four different x-axis variables on a timer, updating the axes and labels dynamically with animated transitions. Built with D3 v6, it uses SVG rendering with custom scales, axes, and legend elements. The code leverages d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the data, with a reusable scatterPlot function handling the chart structure.

Nnithish-1999

ICE-7 Reusable D3 Scatter Plot from sheshidhar reddy

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between petal and sepal measurements for different species. The visualization cycles through different variable pairings every five seconds, showing how the data distribution changes across dimensions. Built with D3.js, the example uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, while SVG circles represent individual data points colored by species. The data is loaded from a GitHub-hosted CSV file, and the animation automatically updates the axes and marks to explore different attribute combinations.

SSheshidharreddy

ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. The chart cycles through different attribute combinations every ten seconds, dynamically updating both axes and the data point positions. Built with a reusable D3 module, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for coloring points by species, with symbols varied by species type. The implementation loads data via `csv` from a GitHub gist and renders animated SVG elements.

Ssreesushmav

ICE 7- Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, mapping petal width on the x-axis and sepal length on the y-axis as circular marks. Built as a configurable chart component, it uses the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs from `d3` to derive scales and axes, with data loaded via `csv`. A `setInterval` timer cycles the x-axis through all four iris flower measurements every two seconds, animating the plot's layout. The visualization renders as SVG, with circles positioned through `attr` calls and axes drawn using D3's axis functions.

Ssaidhiraj16

ICE 7 Reusable Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal and sepal measurements for three flower species (setosa, versicolor, and virginica) using color-coded circles. Built with D3 v6, the visualization cycles through different measurement combinations every 2 seconds using setInterval, updating the x-axis and scatter positions. The implementation uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and d3.axisLeft/d3.axisBottom for rendering axes in SVG. Data loads from a GitHub Gist CSV via d3.csv, with circles animated through D3's join pattern.

Vvegurusaiprathyusha

ICE-7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to positions on a D3.js canvas. The visualization cycles through different attribute pairs every two seconds, updating the x-axis and redrawing circles using the `scatterPlot` reusable chart component. Data points are color-coded by species, with a legend indicating categories. The example demonstrates a modular approach to building dynamic charts, leveraging D3 v6's `scaleLinear`, `axisLeft`, and `axisBottom` APIs for scalable, animated data exploration.

BBhanuMotupalli

ICE 7 D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding petal and sepal measurements as x/y coordinates while color-coding points by species (setosa, versicolor, and virginica). Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG axes and circles. A `setInterval` cycles through four measurement columns, animating the x-axis mapping across petal width, sepal width, petal length, and sepal length. The visualization includes a fixed y-axis for sepal length, a color legend, and axis labels, with data loaded from a remote CSV via `d3.csv`.

SSnapika

ICE - 7 Reusable Scatter Plot

This scatter plot animates through different pairings of Iris flower measurements, cycling every two seconds between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with circles colored by species (setosa, versicolor, or virginica). Data comes from a CSV of the classic Iris dataset, and the transitions are driven by `setInterval` calling the plot function with new x-value accessors.

AArv1228