Skip to main content
SimilarExport ZIP
100%

Stylized Line Chart

✓ Published1🌍 Public
YYenTingWu
Last edited Jul 9, 2021
Created on Jul 9, 2021
Forked from Working With Time

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and sepal width (y-axis). A dropdown menu lets users change the x-axis attribute among sepal length, sepal width, petal width, or species. The chart uses D3's `scaleLinear` for both axes and renders SVG circles via React. The `extent` function computes the domain, and `format('.2s')` tick labels abbreviate large numbers with a 'B' suffix. Styling uses the Zen Loop cursive font.

AI-generated description

A scatter plot of The Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each flower represented as a teal circle. Built with React and D3 v7, the visualization uses d3.scaleLinear for both axes and d3.extent to compute the domain from the data. SVG circles render the marks, while React components for the axes and marks handle the tick lines, labels, and hover tooltips. The data loads asynchronously via d3.csv from a remote gist, and the chart applies a custom Poppins font and muted color palette.

Jjiro2017
91% match
Loading thumbnail…

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
91% match
Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes map to the x and y axes, with the chart updating dynamically via React state management. The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute domains, and d3.csv for data loading. React components render SVG circles as marks, with axes generated by custom AxisBottom and AxisLeft components that leverage d3's tick generation.

Rrstrauss127
91% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents one flower sample, with hover tooltips revealing the precise x-value. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to set domains, and `format` for tick labels. The SVG rendering includes custom axis components with tick marks and labels, while data loading relies on D3’s `csv` method with type coercion for numeric values. The chart’s teal circles and Poppins typography give it a modern, stylized appearance.

DDenise Mauldin
91% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. Each circle represents a flower specimen, with a fixed radius and teal fill. The chart uses React components to render SVG axes and marks, while D3’s scaleLinear and extent functions compute the scales from the CSV data. Axis labels and tick formatting are customized, and tooltips display values via SVG title elements.

Ddiska432
91% match
Loading thumbnail…

Line Chart

This line chart visualizes the relationship between sepal length and petal width from the Iris dataset. The visualization uses React to render SVG elements, with D3.js utilities (scaleLinear, extent, format) handling data scaling and axis generation. The scatter plot encodes each data point as a circle, with tooltips displaying formatted sepal length values. The chart includes custom tick formatting, axis labels, and a clean styling scheme using IBM Plex Sans typography and muted colors.

Nnexus1058
91% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the relationship between petal length and sepal width in the classic Iris dataset, loaded via the D3 `csv` utility. React state manages the data, while D3's `scaleLinear` and `extent` functions map values to a fixed SVG coordinate system. Circles render as marks with tooltips, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) draw axes and points. The chart uses a Poppins font, styled grid lines, and a teal color scheme to create a polished, modern look.

Yyejichun@naver.com
91% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Each point is rendered as a circle with a tooltip showing the x-axis value on hover. The chart uses D3 v5’s `scaleLinear` for axis scaling and data extent calculation, with custom React components for axes and marks. The visualization is built with React and rendered as an SVG, styled with the Poppins font and a muted color palette for ticks, labels, and data points.

LLaura Pippinato
91% match