Fork of Stylized Bar Chart

100%

Fork of Stylized Bar Chart

✓ Published1🌍 Public

Last edited Apr 10, 2021

Created on Apr 7, 2021

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other as colored circles. Users can change which quantitative field appears on each axis through dropdown menus, allowing exploration of relationships between all four flower dimensions. The visualization uses React components to render SVG marks and axes, with D3.js v5 providing scales, CSV data loading, and extent calculations. A Poppins font and muted color palette give the chart a clean, modern appearance.

AI-generated description

Scatterplot

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width, with each point representing a flower specimen. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` for coordinate mapping, plus custom `AxisBottom` and `AxisLeft` components for tick rendering. The SVG chart includes axes, labels, and tooltips via SVG `<title>` elements, with data loaded asynchronously using `useData` and D3's `csv` parser. The styling uses the Poppins font, and the visualization displays the dataset without color encoding for species.

EEthan Pierce

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This scatterplot displays the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The chart uses React with D3 version 5, rendering SVG elements through reusable axis and mark components. Data is loaded asynchronously via d3.csv, with linear scales created using d3.scaleLinear and extent. Axis components generate tick marks and labels, while circular marks include tooltips via SVG title elements. The visualization is lightly styled with the Poppins font and a teal color for data points.

JJanna Uutela

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width as circular marks. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.extent` to set scales, while custom Axis components render tick lines and labels in SVG. The visualization includes hover tooltips via SVG `<title>` elements, styled with Poppins typography and teal marks, with data loaded asynchronously from a CSV source.

IIlyas Filali

95% match

Loading thumbnail…

Fork of Stylized Bar Chart

This scatterplot displays the Iris dataset, plotting sepal length against sepal width, with each point representing a flower sample. The visualization uses D3.js scale functions to map data to SVG coordinates, with React components rendering the axes and circular marks. The chart is a fork of a stylized bar chart example, adapted to show the relationship between two quantitative variables. The styling employs the Poppins font and a custom color scheme, while tooltips reveal the sepal length value for each point.

Wweny1109

94% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length along the x-axis and sepal width along the y-axis. Each flower is rendered as a circle with a tooltip showing its sepal dimensions. The visualization uses React to generate SVG elements, with D3 v5 providing scaling, extent calculation, and tick formatting through `d3.scaleLinear` and `d3.format`. The axes and marks are constructed from reusable components, with custom styling applied via CSS classes for fonts and colors.

MMichael Bergerson

94% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width, with each flower species represented by a circular mark. The chart uses React components to render SVG axes and marks, with d3.scaleLinear handling both spatial scales. D3’s csv loader parses the data, while the d3.format function applies abbreviated tick labels. The visualization demonstrates a clean, styled layout with labeled axes and a tooltip showing the sepal length value on hover.

JJi Won Yeom

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as a scatter plot of sepal length against sepal width, with each flower represented by a circle. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and `d3.extent` to set domains, while `d3.csv` loads data from a GitHub-hosted CSV. The SVG rendering includes custom axis components and circle marks with tooltips showing the sepal length value.

KKonJoDot

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the Iris dataset as a scatter plot, with sepal length and width mapped to the x- and y-axes. The visualization uses React to render SVG elements, including circular marks for each data point, styled with the Poppins font and custom colors. Axis tick marks and labels are generated using d3.scaleLinear and d3.format APIs, while d3.csv loads the data from a remote file. Tooltips reveal the precise sepal length value when hovering over a circle.

CChristian Rohrer

93% match