Skip to main content
SimilarExport ZIP
100%

tutorial 3.2

✓ Published0🌍 Public
Ppavanbellam@my.unt.edu
Last edited Apr 5, 2025
Created on Apr 5, 2025
Forked from Task_3 Pavan

This example shows a scatter plot of iris flower measurements, mapping sepal length against petal length and using different shapes to distinguish species. It loads the dataset from a remote CSV file and renders the chart using D3 v7. The code builds the visualization with a compositional approach, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and custom modules for drawing axes and a shape legend. The chart updates declaratively via D3's `selection.join` operations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, comparing sepal length against petal length, with each of the three species distinguished by a unique symbol shape via a custom legend. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.symbolsFill` to map species to symbols, and `d3.csvParse` to load and parse the remote CSV data. Custom modules handle axis rendering and legend construction, with the chart filling the entire viewport.

VVrushikaKanaparthy@my.unt.edu
92% match
Loading thumbnail…

tutorial3_extended

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with species differentiated by shape. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for categorical shapes, and custom modules for axes and a shape legend. Data is loaded from a CSV file via `fetch` and parsed with `csvParse`, then rendered as SVG paths using the `symbol` generator.

Ppavanpkkalyan3@gmail.com
92% match
Loading thumbnail…

Tutorial 3.2

A D3.js scatter plot displays iris flower measurements, plotting sepal length against petal length. Distinct symbols represent different species, with a legend mapping each species to its corresponding marker shape. The visualization loads CSV data from a GitHub repository, parsing and converting numerical strings to numbers. The code constructs linear scales for both axes and an ordinal scale for shapes, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate the visual encoding. Custom functions manage axes and legend rendering via `d3.select` and SVG path joins.

Jjtulasi05@gmail.com
91% match
Loading thumbnail…

Tutorial 3.2

This scatter plot displays iris flower measurements, mapping sepal length and petal length to Cartesian coordinates while encoding species with different SVG symbols. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill to assign distinct shapes, and a custom shape legend positioned at a fixed offset. Data is loaded asynchronously from a GitHub-hosted CSV file and parsed with d3.csvParse. The code builds the chart through reusable d3 function components for axes, legend, and plot rendering.

GGangumalla Ruchitha Reddy
91% match
Loading thumbnail…

Tutorial 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species differentiated by symbol shapes. The visualization uses D3 v7's scaleLinear for axes, scaleOrdinal with symbolsFill for shape encoding, and a custom shape legend to identify species. Data is loaded asynchronously from a CSV file containing the classic iris dataset. The axes and legend components are modularized into separate functions, with the chart updating responsively to the browser window size.

Jjtulasi05@gmail.com
91% match
Loading thumbnail…

tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length, with species encoded by symbol shapes and a corresponding shape legend. The visualization uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded asynchronously as CSV and parsed with `d3.csvParse`. The code is modularized into separate ES6 modules for the scatter plot, axes, and legend, built as a reusable visualization component.

Nnikhithaaitha22@gmail.com
91% match
Loading thumbnail…

tutorial 3.2

This example visualizes the classic Iris dataset, plotting sepal length along the x-axis and petal length along the y-axis for individual flowers. Each data point is represented by a distinct shape corresponding to its species, with a legend showing the species-to-shape mapping. The code builds the scatter plot using d3’s `scaleLinear` and `scaleOrdinal` scales, and renders points via `symbol` generators. Axes are added using `axisLeft` and `axisBottom`, while the shape legend is constructed manually with `symbol` and text elements. Data is loaded asynchronously via `fetch` from a remote CSV file.

Ssamithareddy9@gmail.com
90% match
Loading thumbnail…

Tutorial_3.2

This example demonstrates a D3.js scatter plot of the Iris dataset, showing sepal length against petal length with species encoded by symbol shapes. It uses D3 modules like `csvParse`, `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbol` to render the marks. It also includes custom axes and a shape legend built with `axisLeft`, `axisBottom`, and `symbolGenerator`. Data is fetched from a CSV file via UNPKG and processed into numeric fields before visualization.

HHarshithakodakandla@my.unt.edu
90% match