Skip to main content
SimilarExport ZIP
100%

stylish the bar chart and submit the VizHub link

✓ Published1🌍 Public
Sshabbab01
Last edited Mar 7, 2022
Created on Mar 7, 2022

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes, while encoding the species of each flower with color (blue, red, or black). It also encodes the sepal measurements into the shape of each point through the `rx` and `ry` attributes, adding an extra dimension of data. Built with D3 v6 and rendered as an SVG, the code loads the data using `d3.csv`, deploys `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers to produce the chart.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of stylish the bar chart and submit the VizHub link

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes while coloring each point by species. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. Although the markup includes redundant `rx` and `ry` attributes, the circles maintain a fixed radius, producing a straightforward categorical color encoding of the three flower types.

Sshabbab01
94% 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
81% 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
81% match
Loading thumbnail…

Fork of Stylized Bar Chart

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.

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

Creating a Scatter Plot with D3.js

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3.js v6 with a linear scale and axis generators (`d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) to render SVG circles. Data is loaded via `d3.csv` from a remote URL, with numeric fields parsed on ingestion. The plot is sized to the full window and includes custom tick styling.

SShivaKarpe
79% match