Skip to main content
SimilarExport ZIP
100%

8 class D3 in HTML vanilla

✓ Published1🌍 Public
Ccssergio
Last edited Jun 9, 2022
Created on Jun 7, 2022

This example visualizes the Iris dataset as a scatter plot with elliptically shaped marks, encoding sepal and petal measurements across four axes. Each ellipse’s vertical and horizontal radii reflect petal width and sepal width, while its fill color distinguishes the three species (setosa, versicolor, and virginica). The code uses D3 v6 modules like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to scales, and render axes. SVG ellipses are generated via a custom reusable `scatterPlot` function, with hover tooltips showing raw coordinates and color.

AI-generated description

A reproduction of a title.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 8 class D3 in HTML vanilla

This example visualizes the Iris dataset as a scatter plot with elliptical markers, where each flower’s petal and sepal lengths determine the x and y positions, and widths control the ellipse radii. Points are colored by species using a switch statement for setosa (blue), versicolor (red), and virginica (black). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` reusable function. Data is loaded from a remote CSV file and rendered as SVG ellipses with interactive titles.

Ccssergio
94% match
Loading thumbnail…

Untitled

This interactive D3.js (v6) scatter plot visualizes the classic Iris dataset, mapping petal length and width to the x and y axes. Points are color-coded by species, with setosa, versicolor, and virginica rendered in blue, red, and black respectively. The SVG rendering uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for tick marks. The code loads data via d3.csv from a GitHub gist, parsing numeric fields, and draws circles with a fixed radius, while also storing sepal dimensions as unused properties on each mark.

Eeravellisaimeghana
87% match
Loading thumbnail…

D3 Example

This example visualizes the classic Iris dataset as a scatter plot, encoding sepal length, petal length, and sepal width on the x-, y-, and radius scales, while color encodes species. It demonstrates a “popping effect” by using the CSS `currentColor` keyword so that each circle’s semi-transparent fill and opaque stroke share the same data-driven color, revealing overlaps between marks. Built with D3 v4 and rendered as SVG, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.csv` for data loading and scales.

CCurran Kelleher
87% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as an interactive scatterplot, mapping petal length to the x-axis, sepal length to the y-axis, and petal width to circle radius, with species indicated by color (blue, red, or black). It uses D3 v7’s `csv`, `scaleLinear`, `scaleSqrt`, `extent`, and `max` to load and scale the data, then renders SVG circles via a data join. Axis are drawn with `axisLeft` and `axisBottom`. The plot fills the browser window, and hovering reveals species and measurement details via tooltips.

Vvschan2
87% match
Loading thumbnail…

scatter plot

This D3 scatter plot displays the Iris Dataset, using petal length and width for the x- and y-axes while encoding species membership through circle colors (green, yellow, and black). It also maps sepal measurements to each point’s `rx` and `ry` attributes, though these elliptical properties are overridden by a fixed radius. Data loads via `d3.csv` and parses numeric columns. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while scales use `d3.scaleLinear` and domains derive from `d3.extent`. SVG rendering creates responsive, full-viewport visuals with rotated axis labels.

Eeravellisaimeghana
87% match
Loading thumbnail…

Iris

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while styling each circle with a color-coded species (orange, green, or brown). The code also encodes sepal dimensions by distorting each circle’s rx and ry attributes, creating ellipse-like shapes whose horizontal and vertical radii reflect sepal length and width. Built with D3 v6, it loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes via `d3.axisLeft` and `d3.axisBottom`. Circles are appended as SVG elements with custom fill, radius, and elliptical attributes.

Ssri7harsha
86% match
Loading thumbnail…

D3 Example

This scatter plot visualizes the classic Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, sepal width to the circle radius, and species to color. Rendered as an SVG using D3.js, the chart features axis labels, tick formatting, and a color scale with three categories. The visualization demonstrates a clean, readable design with Poiret One font styling, and the axes include labels for "Sepal Length (cm)" and "Petal Length (cm)".

CCurran Kelleher
86% match
Loading thumbnail…

In Class Assignment 6

This scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while encoding species through point color (grey, violet, and blue). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `d3.csv` from a remote GitHub gist. The code also applies `rx` and `ry` attributes to circles using sepal measurements, creating elliptical points, though the visual effect is subtle due to the fixed radius.

NNHRK555
86% match