Bar chart on iris-dataset

100%

Bar chart on iris-dataset

✓ Published1🌍 Public

Last edited Sep 19, 2023

Created on Sep 19, 2023

This example presents a horizontal bar chart that visualizes the sepal length of different iris species classes from the classic Iris dataset. The chart encodes the measured sepal length along the x-axis, with each bar positioned by its corresponding flower class on the y-axis. The visual encoding clearly compares the distribution of sepal lengths across the three species. Using D3 v5, the code loads the dataset from a CSV file, scales the data with `d3.scaleLinear` and `d3.scaleBand`, and renders the visualization as SVG elements within an HTML canvas. Axis labels and a title are also generated using D3's axis utilities.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

This bar chart visualizes the sepal lengths of 150 iris flowers, with each bar representing one sample and colored a uniform steel blue. Values are plotted along a linear x-axis, while the y-axis categorizes flowers by species class. The chart is rendered as an SVG using D3 v6, and the code relies on `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to construct the axes and bars. Data is loaded from a local `data.csv` file.

Wwei

91% match

Loading thumbnail…

Bar Charts

This interactive example visualizes the classic Iris dataset using bar charts rendered with D3.js v5. The code loads data from a CSV file, converts the sepal and petal measurements to numbers, and uses `d3.csv` and `d3.scaleLinear` to map values. It draws rectangular SVG elements for each data point with fixed width and height attributes, creating a grid of bars that represent the dataset's samples. The visualization demonstrates basic D3 data binding with `selectAll`, `data`, and `enter` selections.

Ccodingtywu

90% match

Loading thumbnail…

Bar Chart

This bar chart displays the sepal length, sepal width, petal length, and petal width values from the Iris dataset, with each bar's length proportional to the numeric value in the "value" column. The visualization uses React for component structure and state management, while D3 v5 functions `csv`, `scaleLinear`, and `max` handle data loading and scaling. Bars are rendered as SVG rectangles with a smooth width transition, colored consistently in blue, and positioned along a linear scale that maps data values to pixel widths within a 600x400 canvas.

FFande Workspace

90% match

Loading thumbnail…

Bar Chart

A bar chart visualizes the average petal length for each iris variety (Setosa, Versicolor, and Virginica) from the classic Iris dataset. The code constructs the chart using D3.js v7 and React, loading data from a CSV file. Specifically, it uses `d3.scaleBand()` for the categorical x-axis and `d3.scaleLinear()` for the numeric y-axis, rendering the bars as SVG rectangles. The visualization also incorporates axes via `d3.axisBottom()` and `d3.axisLeft()`, with colors assigned from a predefined palette.

FFande Workspace

86% match

Loading thumbnail…

Stylized Bar Chart

This scatterplot shows the relationship between sepal length and sepal width for iris flowers, with each flower represented by a teal circle. The chart uses a React component structure with D3 scales (`d3.scaleLinear` and `d3.extent`) to map the data from the Iris dataset (loaded via `d3.csv`) to SVG coordinates. Axes are rendered as reusable React components, with tick marks and labels styled via CSS.

Hhuashe418

85% match

Loading thumbnail…

Styles bar chart

This scatter plot visualizes the Iris dataset, showing sepal length versus sepal width for three flower species. The chart uses React for component structure and renders as SVG. D3’s `scaleLinear` handles the axes, while `csv` from d3 loads the dataset. Data points are colored by species—purple for setosa and versicolor, green for virginica—and each circle includes a native SVG `<title>` tooltip. Axis labels and ticks are styled with CSS, and the layout applies fixed margins.

Bbgeffrault

85% match

Loading thumbnail…

Distributed Chart for Iris Dataset

This visualization displays the classic Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis, with each of the three species colored distinctly (red, green, blue). The code loads data from a CSV via `d3.csv`, uses linear scales (`d3.scaleLinear`) to map data coordinates, and renders circles (`svg.selectAll("circle")`) using the SVG rendering approach. Axes are constructed with `d3.axisBottom` and `d3.axisLeft` within a D3 v7 React-free HTML page.

Bbhanuteja1807@gmail.com

84% match

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

83% match