floraho401

@floraho401·6 public vizzes

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three species distinguished by color. The visualization uses D3 v7's scaleLinear for positioning, scaleOrdinal for categorical coloring, and the axisBottom and axisLeft components to create labeled axes. A separate color legend, built with custom SVG elements, maps each species to a specific color using a switch statement. Data is loaded from a local CSV file and parsed with d3.csvParse before being rendered as circular marks.

Sep 21, 2023

Loading thumbnail…

Submit of Iris Scattering Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each of the three species—setosa, versicolor, and virginica—receives a distinct color, with a custom color legend positioned on the right. The code uses D3 v7’s `scaleLinear` for axes, `scaleOrdinal` for colors, and `selection.join` to manage circles and axis elements. The legend is built manually with SVG circles and text, while data is loaded remotely and parsed via `csvParse`.

Sep 21, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v7 with the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` APIs to load and render the data as SVG circles. Axis labels indicate "Petal Length" and "Sepal Length," though the latter appears mislabeled relative to the plotted variables. The chart fills the browser window with margins and styled tick text.

Sep 21, 2023

Loading thumbnail…

Fork of Loading Data

This example demonstrates loading and parsing the Iris Dataset from a CSV file using D3’s `csvParse` function, then rendering a single circle at a fixed position with the `scatterPlot` module. The visualization initializes with a loading state, fetches the data asynchronously, converts numerical columns to numbers, and triggers a re-render once data arrives. It uses D3 v7 selections and joins to manage the SVG and circle elements, with a minimal UI showing the data-loading process.

Sep 19, 2023

Loading thumbnail…

Flora's Scatter Plot with Color

This visualization displays the classic Iris Dataset as an interactive scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with species categories encoded by color. The plot uses D3 v7’s `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for color mapping, rendering circles with a fixed radius of 10 pixels. A custom color legend shows species names alongside matching swatches, while the axes are generated using `axisLeft` and `axisBottom`. Data loads from a local CSV file and is parsed with `csvParse`.

Sep 19, 2023

Loading thumbnail…

Flora's Scatter Plot with 1 .js

This example visualizes the classic Iris Dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to color via an ordinal color scale. It features labeled axes and a custom color legend generated with D3’s `scaleOrdinal` and `schemeCategory10`. The data loads from a CSV file using `d3.csvParse`, while reusable modules handle axes, legends, and the plot itself, leveraging `selection.join` for efficient SVG updates.

Sep 19, 2023