Skip to main content
SimilarExport ZIP
100%

Activity6_Task3(tutorial 3.2)

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

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and encoding species with distinct marker shapes. It loads data from a CSV file hosted on GitHub, parsing and converting numeric fields. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, and `axisBottom` to construct the plot, axes, and a custom shape legend. The chart updates dynamically as data loads, demonstrating modular ES6 imports and a state-based rendering pattern.

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…

Activity6_Task3(Tutorial 3.2)

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by point shape. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to position and style marks, while custom ES6 modules handle axes and a shape legend. The visualization loads CSV data via `fetch` and `csvParse`, and updates through a state-based `setState` pattern. Interactive rendering occurs across the full window, with margins and labels configured for clarity.

Nnithinnc@outlook.com
94% match
Loading thumbnail…

Activity6_Task3_Tutorial 3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three flower species distinguished by different filled symbols. The visualization uses an ordinal scale with D3’s `symbolsFill` to assign shapes to species and includes a custom legend via `shapeLegend`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with data loaded asynchronously from a GitHub CSV and parsed by `d3.csvParse`. The plot renders within a full-window SVG.

Nnavyabade05@gmail.com
94% match
Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length and distinguishing species by shape. It uses D3 v7, loaded via UNPKG, with imported utilities like `scaleLinear`, `scaleOrdinal`, and `symbol`. The chart fetches CSV data from a GitHub repository, parses it with `csvParse`, and renders axes, labels, and a custom shape legend. The code demonstrates modular ES6 imports and D3's join-based selection pattern for declarative updates.

Gganeshseeram5decem@gmail.com
94% match
Loading thumbnail…

Activity6_Task3_Tutorial3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length, with each of the three species represented by a distinct symbol shape. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to map species to different geometric markers. A legend, generated through the shapeLegend module, explains the species-to-shape correspondence. The code loads CSV data via d3.csvParse from a remote source, applies numeric conversion, and renders SVG marks using the d3.symbol generator.

PPradhyumna Poralla
93% match
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length against petal length and distinguishing species by shape. It loads data from a CSV file and uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `csvParse`. The visualization includes custom axes and a shape legend, built with reusable local ES6 modules.

Llikhitha.sarahah01@gmail.com
93% match
Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each species represented by a distinct symbol shape. The plot encodes the three Iris species through shape, using d3.scaleOrdinal with symbolsFill to assign different geometric marks, while a custom legend explains the species mapping. Axes are rendered via d3.axisLeft and d3.axisBottom, with labels for both dimensions. The data is loaded asynchronously from a GitHub-hosted CSV file using d3.csvParse, and the visualization updates through a state management pattern that handles loading and rendering.

Nnikhilthoutu24@gmail.com
93% match
Loading thumbnail…

Fork of Activity6_Task3_Tutorial 3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length and using distinct symbols to represent the three iris species. The D3.js v7 code builds the visualization entirely with modular functions, including `scaleLinear` and `scaleOrdinal` for scales, `symbol` for generating shapes, and `csvParse` to load the data from a GitHub-hosted CSV file. Axis and shape legend components are rendered via `axisLeft`, `axisBottom`, and custom legend logic, with the chart redrawing responsively to the full window size.

Nnavyabade05@gmail.com
93% match
Loading thumbnail…

Activity6_Tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It visualizes the three iris species using distinct shapes via a categorical scale and includes a custom shape legend. The visualization loads CSV data from a GitHub repository, uses d3.csvParse to parse it, and builds the chart with d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. Axes and legend are modularized into reusable ES6 modules.

Ssaimanvith22@gmail.com
93% match