Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
Ssaivaishnogaruda@gmail.com
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Hello VizHub

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol. The example uses the D3.js library, specifically its `scaleLinear` for axes, `scaleOrdinal` for the shape scale, and `symbol` to generate the marks. A custom shape legend, built via a separate module, identifies the species. The data is loaded asynchronously from a CSV file hosted on GitHub, and the visualization fills the browser window.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the axes while using distinct symbols to represent the three iris species. The visualization loads the CSV data asynchronously via `fetch` and `csvParse`, then renders it with `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` generators. Axis labels and a shape legend are added through modular helper functions. The plot uses d3.v7’s data join pattern, showing how shape encoding distinguishes categorical values in a quantitative scatter plot.

Hhkodiripaka15@gmail.com
95% match
Loading thumbnail…

Fork of Hello VizHub

This example shows a scatter plot of iris flower measurements, using sepal length and petal length as axes and distinct symbol shapes to encode the three species categories. The visualization includes a shape legend labeled “Species” to identify the species associated with each symbol. The code uses D3 v7 APIs such as `d3.csvParse`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.symbolsFill` to render the marks, while an axes module builds the chart scaffolding with `d3.axisLeft` and `d3.axisBottom`. Data is fetched from a GitHub-hosted CSV of the classic Iris dataset.

Ssusarlasruthi2000@gmail.com
94% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, virginica). The code loads CSV data from a remote URL using d3.csv, applies linear scales with d3.scaleLinear, and renders SVG circles positioned via d3.selectAll and .join. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart dimensions adapt to the window size.

Ssaivaishnogaruda@gmail.com
94% match
Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica). The visualization uses D3 v6 via UNPKG, loading data with `d3.csv`, scaling with `d3.scaleLinear`, and rendering axes with `d3.axisLeft` and `d3.axisBottom`. Circles are appended to an SVG, with fill colors assigned per species and petal dimensions determining x- and y-positions. The chart includes labeled axes and a fixed radius for all points, sourced from a remote CSV hosted on GitHub.

Ssusarlasruthi2000@gmail.com
93% match
Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three flower species, with each species color-coded as skyblue, lightgreen, or orange. The visualization uses D3 v6 to load CSV data, create SVG circles, and generate axes with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code maps the data fields to plot coordinates, with axis labels for petal and sepal measurements, providing a clear comparison of the dataset’s dimensions.

LLakshmiPrasannaValdas@my.unt.edu
91% match
Loading thumbnail…

Fork of Hello VizHub

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis variables to visualize petal and sepal measurements across three species. The visualization uses D3's `scaleLinear` for axes and a custom `scatterPlot` module to manage the chart's geometry. It incorporates a color-coded legend for species, axis labels, and a title, with data loaded via `d3.csv` from a remote URL and rendered as SVG circles. The animation shifts the x-axis among four measurement columns at regular intervals.

Jjasthilavanya2022@gmail.com
91% match
Loading thumbnail…

Fork of Hello VizHub Divya Anusha Chandrupatla

This example displays a scatterplot of the Iris dataset, plotting sepal length against sepal width as steelblue circles. It uses D3.js v6 to load data via CSV, compute linear scales with `d3.scaleLinear` and `d3.extent`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output includes axis labels using SVG text elements. The visualization also exemplifies VizHub's ES6 module import through a message component and a separate `script.js` file that fetches the dataset from a GitHub gist.

Ddivyaanushachandrupatla@my.unt.edu
89% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Hello VizHub tutorial 3.1

This example displays the Iris dataset through a scatter plot, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load CSV data, apply linear scales with `d3.scaleLinear`, and render circles in an SVG container. It also draws axes via `d3.axisBottom` and `d3.axisLeft`, with labeled axis text, and handles the full window size for the plot area.

LLakshmiPrasannaValdas@my.unt.edu
89% match