Stylized Scatter Plot

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The chart uses React for the user interface and D3’s `scaleLinear` and `extent` functions for data scaling, with SVG circles as marks. Each circle includes a tooltip using D3’s `format` function, while axis labels and tick styling are customized through CSS. The data is loaded asynchronously via D3’s `csv` function from a GitHub-hosted CSV file.

PPaul Chen

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width for individual specimens. The visualization uses D3.js utilities—including `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation—combined with React to render SVG circles and axis ticks. Each data point is drawn as a small teal circle with a tooltip displaying its value. The chart includes labeled axes with customized tick formatting and a responsive layout, all styled with the Poppins font family.

FFonda Irena Santoso

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The React-based visualization uses D3's `scaleLinear` and `extent` functions to compute scales, while custom SVG components render the axes and circular marks. Styling employs the Poppins font with teal-colored circles and muted gray gridlines. The chart includes labeled axes with rotated y-axis text and a tooltip showing the petal length value on each point hover, loaded asynchronously via D3's `csv` parser.

SShashwat Priyadarshi

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each circle represents a sample, with a tooltip displaying the x-axis value. The visualization uses React to render SVG elements, while D3 v5 utilities handle data loading, scales, and formatting. CSV data is fetched asynchronously and parsed via `d3.csv`. The chart features custom axes with styled ticks and labels, uses the Poppins font, and applies a distinct color scheme for the marks.

MMorgan Worrell

Stylized Scatter Plot Iris

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, with its position determined by d3.scaleLinear scales and a tooltip showing the petal length value. The visualization uses React components for the axes and marks, with d3.csv loading the data from a remote source. Styling includes custom tick colors and Poppins typography, while the SVG rendering approach implements reusable axis components that generate tick marks and labels based on the provided scales.

EEFezerKW

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width using d3.scaleLinear for both axes. The React-based component uses D3 v5 to load data via d3.csv, render SVG circles for each observation, and generate bottom and left axes through custom tick components. A custom formatting function condenses large tick labels, and hover tooltips display the petal length value using SVG <title> elements. The visualization incorporates the Poppins font and a teal color scheme for the marks.

SSushan Prajapati

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis using d3.scaleLinear. The React-based visualization renders circles as marks via SVG, with styled axes built through d3.ticks. The code uses d3.csv to load and parse the data, while custom React components (AxisBottom, AxisLeft, and Marks) handle the rendering, applying a Poppins font and a teal color scheme to the circular data points.

Aaparnasj-sj

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flower specimens. The visualization uses React with D3 v5 scales and SVG rendering, featuring custom AxisBottom and AxisLeft components that generate tick marks and labels. Circles representing data points include native SVG title tooltips, while the Poppins font and teal color scheme create a distinctive aesthetic. The code leverages d3.scaleLinear, d3.extent, d3.format, and d3.csv for data loading and scaling operations.

AAbhay Kumar