Fork of Scatter Plot with Color

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. Each circle is color-coded by species using a d3.scaleOrdinal with a custom range, and axes are rendered with d3.scaleLinear and custom React components. The d3.csv loader parses numeric fields, while React components handle SVG rendering of axes and marks.

Oonceup

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers while color-coding points by species. The visualization uses D3 scales (scaleLinear, scaleOrdinal with schemeCategory10) to position and color marks, rendered as SVG circles within a React component structure. Axes are generated through reusable React components using D3’s tick generation, with formatted numeric labels and axis titles for petal length and sepal width. Data loading is handled asynchronously via D3’s CSV fetching and parsing utilities.

KKaminariOS

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each of the three iris species represented by a distinct color. The visualization uses React components to render SVG circles, with d3.scaleLinear mapping the quantitative axes and d3.scaleOrdinal assigning categorical colors. Axes are generated through custom React components that leverage d3’s tick generation, while the useData hook fetches and parses the CSV data using d3.csv. Hovering over a circle displays its exact petal length value via an SVG title element.

PPiotr Paszek

Fork of Scatter Plot with Color

This fork of the classic scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is rendered as an SVG circle, with its fill color determined by the flower’s species via a `scaleOrdinal` color scale. The React component uses `d3.scaleLinear` for both axes and `d3.extent` to compute domains, while custom `AxisBottom` and `AxisLeft` components generate gridlines and tick labels. The code loads data asynchronously from a CSV URL using `d3.csv` and styles the visualization with the Poppins font.

RRupendra Pamisetty

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for categorical colors. The SVG rendering includes custom axis components and circles with tooltips via SVG `<title>` elements, with data loaded asynchronously using d3.csv.

SShafi

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Built with React and rendered as SVG, it uses d3’s `scaleLinear` for positioning and `scaleOrdinal` for categorical colors, with custom `AxisBottom` and `AxisLeft` components drawing ticks and labels.

NNicolás Troncoso

Fork of Scatter Plot with Color

This example visualizes the Iris dataset, mapping petal length and sepal width to the x and y axes of a scatter plot. Each point is colored by species, and hovering reveals a tooltip with the precise petal length. The visualization is built with React and rendered as an SVG, leveraging D3 v5 utilities such as `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales and domains. Custom `Marks`, `AxisBottom`, and `AxisLeft` components generate the circles and axes, with data loaded asynchronously via `useData`.

RRoberto

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. The React-based chart uses d3.scaleLinear and d3.scaleOrdinal to map data values to positions and categorical colors, with SVG circles rendered as marks. Axes are generated via custom reusable components (AxisLeft, AxisBottom), and the data is loaded asynchronously from a CSV file using d3.csv.

AAnu Wat