Fork of Stylized Bar Chart

100%

Fork of Stylized Bar Chart

✓ Published1🌍 Public

Last edited Nov 26, 2022

Created on Nov 26, 2022

A scatterplot displays the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis, with each flower represented by a teal circle. The React app fetches CSV data from a GitHub gist using `d3.csv`, then renders SVG circles via the `Marks` component. Axes are generated by `AxisBottom` and `AxisLeft`, using `d3.scaleLinear` and `d3.extent` to compute domains, with tick formatting via `d3.format`.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart - Scatterplot

This scatter plot visualizes the Iris flower dataset, showing petal length on the x-axis and sepal width on the y-axis for individual samples. The React-based SVG visualization uses D3’s `scaleLinear`, `extent`, and `csv` parsing to load and map the data, with custom React components for axes and marks. Each circle includes a native `<title>` element for hover tooltips, while the clean Poppins-styled layout omits a legend to focus on data distribution.

Bbillmccabeusa@hotmail.com

94% match

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart visualizes the Iris dataset as a scatterplot, plotting petal length against sepal width as circles with tooltips on hover. The React and D3 v5 code uses `scaleLinear`, `extent`, and `format` from d3 to handle scales and tick labels, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG axes and data points. Data is loaded asynchronously via `csv` from a GitHub gist, with styling applied through Poppins fonts and CSS classes.

Ssb15jr@student.aau.dk

93% 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

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes with circular marks. Built with React and D3 v5, it uses `scaleLinear` with `extent` to set domains and `.nice()` to smooth the tick boundaries. Custom `AxisBottom` and `AxisLeft` components render the axes, while the `Marks` component adds SVG circles with tooltips. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and styled with Poppins font and teal colored marks.

Jjamesbrittan

93% 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

92% 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

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as an SVG scatter plot within a React application, mapping sepal length on the x-axis and sepal width on the y-axis. It uses `d3.scaleLinear` for both axes, with `d3.extent` to compute the domains from the CSV data, and renders circles for each observation. The code includes custom React components for the axes and marks, with `d3.format` handling the x-axis tick labels in compact notation. Styling is applied through CSS classes for ticks and marks, with data loaded via `d3.csv` from a GitHub-hosted file.

Pplusbeauxjours

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the relationship between sepal length and sepal width for the Iris dataset, rendered as a scatter plot of circles. It uses React to manage the component structure and d3.scaleLinear scales for positioning, with d3.axisBottom and d3.axisLeft generated from reusable React components. The data is loaded via d3.csv from a GitHub gist, and each circle includes a native SVG title element for tooltips. Axes are labeled and styled using the Poppins font.

EEugenio2192

92% match