Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Stylized Scatter Plot

✓ Published0🌍 Public
NNikhilchiguru-8
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example is a scatter plot of the Iris Dataset, mapping petal length against sepal width. The visualization uses a React and D3 v5 architecture, with linear scales (`scaleLinear`) from D3 to map data values to pixel coordinates. The SVG rendering is composed from custom React components for axes and circular marks. The page loads the Iris dataset from a GitHub gist using D3's `csv` function, and includes an embedded YouTube video in its README. The chart uses a clean, minimal design with Poppins typography and a teal color for the data points.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis using d3.scaleLinear scales. The React application loads CSV data via d3.csv and renders SVG circles with custom React components for axes and marks. Data points appear as teal circles with tooltips showing formatted values, while styled axis labels and tick marks use the Poppins font. The visualization demonstrates a clean, minimal aesthetic with fixed dimensions and margins.

NNikhilchiguru-8
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao
94% match
Loading thumbnail…

Fork of Stylized Scatter Plot -- from video

This example shows a scatter plot of the Iris Dataset, mapping petal length against sepal width with points rendered as fixed-size circles. The visualization relies on React for component structure and SVG for rendering, while D3 v5’s `scaleLinear` and `extent` handle axis scaling and domain calculation. Axes are built from reusable React components, and each circle includes a native SVG `<title>` element for tooltips. Data loads asynchronously via D3’s `csv` parser, with numeric coercion applied to all measurement columns.

AAndrea Picciau
94% match
Loading thumbnail…

Fork of Stylised Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length. The visualization uses React components for the axes and marks, with D3 v6 handling data loading via `useCsv` and scaling through `scaleLinear` and `extent` for domain calculation. SVG is the rendering approach, with circles representing data points and tooltips showing precise values. The chart includes styled axis elements with custom tick formatting using D3's `format` function. The code demonstrates a modular structure with separate React components for axes, marks, and data handling.

Nnagamaheswar
94% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization uses React to render SVG circles as data marks, with d3.scaleLinear for axes and d3.csv for data loading. Axis components are custom-built with d3 ticks, and each circle includes a native SVG `<title>` element for hover tooltips. The styling uses the Poppins font and a muted teal color for marks.

Aavneet12284
94% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The visualization uses React components to render SVG circles and axes, with D3 v5 providing the scaleLinear, extent, max, and format functions for data scaling and tick formatting. Styling is applied via CSS class selectors, and a native SVG title element displays tooltips on hover. The data is loaded asynchronously from a CSV file using D3’s csv function.

JJONATHAN SIMON
94% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it renders SVG circles using the `scaleLinear` and `extent` functions to position marks. The axes are custom components that generate ticks and grid lines. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist, with numeric coercion applied in the row parsing callback.

SSerjohn27
94% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example displays a scatter plot of the Iris Dataset, mapping petal length against sepal width with circles of a fixed radius. The visualization uses React components to render SVG elements, with axes and marks built through reusable functional components. D3’s `scaleLinear`, `extent`, and `max` functions handle scaling and domain calculations, while the `csv` loader in `useData` parses the dataset asynchronously. A native SVG `<title>` element provides tooltips for each point, and the styling uses the Poppins font with custom tick and label colors.

EEugenio2192
94% match