Skip to main content
SimilarExport ZIP
100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public
GGregS1290
Last edited Oct 30, 2021
Created on Oct 26, 2021
Forked from Pathetic Bar Chart

This example displays the Iris dataset as a scatter plot of petal length against sepal width, with circular marks colored teal and axes with tick labels. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains, and SVG for rendering. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders circles with HTML tooltips showing petal length values. Data loads asynchronously via `csv` from a GitHub-hosted Iris dataset.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the Iris dataset as a scatter plot of sepal length against petal width, with axes and labeled tick marks. The React-based code uses D3 v5 utilities like `scaleLinear`, `extent`, and `format` to compute scales and format tick labels. It renders an SVG with custom components for the bottom and left axes, marks as circles, and includes axis labels. Tooltips display the x-value on hover, and the styling uses the Poppins font with specific color classes for ticks and marks.

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

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

Fork of Refactored Bar Chart

This example visualizes the Iris flower dataset, plotting sepal length against sepal width as a scatter plot of blue circles. The chart uses React components to render SVG elements, with D3’s `scaleLinear` and `min`/`max` functions determining the axis domains. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while the `Marks` component maps each data point to a circle. Data is loaded asynchronously via D3’s `csv` from a GitHub-hosted CSV file, and axes are styled with CSS classes.

Jjth500
90% match
Loading thumbnail…

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
90% 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
90% 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
90% 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
90% match