Fork of Stylized Bar Chart

Bbillmccabeusa@hotmail.com

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.

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

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

Fork of Stylized Bar Chart

This example visualizes the iris dataset as a stylized scatter plot, displaying each flower’s sepal length and width as a circle. The chart uses D3 v5’s `scaleLinear` and `extent` to compute scales from the data, with axes rendered via custom React components (`AxisBottom`, `AxisLeft`). Tooltips show formatted tick values using `format('.2s')`. The visualization is built with React, uses SVG for rendering, and loads data via `csv` from a GitHub-hosted URL.

KKM44VW@student.aau.dk

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

Fork of Stylized Bar Chart

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`.

SSamirAhma

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

Fork of Stylized Bar Chart

This example visualizes the Iris dataset by plotting sepal length against sepal width as a scatterplot of circles. It shows the raw data points without any grouping or encoding by species, focusing purely on the relationship between these two measurements. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and rendering SVG circles via the `Marks` component. Data is loaded asynchronously from a CSV file using `csv` from D3, and axes are generated with custom `AxisBottom` and `AxisLeft` components that render ticks and labels.

Iivipaneva2002@gmail.com