Skip to main content
SimilarExport ZIP
100%

Activity6_Task3.2

✓ Published1🌍 Public
KKhushi Desai
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Hello VizHub

This example demonstrates a scatter plot of iris flower measurements, encoding sepal and petal length on the axes and using different symbols to distinguish species. It loads the Iris dataset from a GitHub-hosted CSV file and parses it with `d3.csvParse`. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and modular ES6 imports for reusable axes and legend components. The legend is rendered with `d3.symbol` positioned at a fixed coordinate within the SVG canvas.

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…

Activity_6_Task 3.2

This example shows a scatter plot of iris flower measurements, encoding sepal length against petal length and using different symbols to distinguish species via a shape legend. It loads data from a remote CSV file and parses it with `d3.csvParse`. The visualization uses D3 v7 features including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft`/`d3.axisBottom` to render axes and marks, with a custom legend built from modular ES6 functions.

Mmudunurirahulvarma98@gmail.com
95% match
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, encoding sepal length and petal length on the x- and y-axes while using distinct symbol shapes to represent species. The visualization loads CSV data from a remote source, parses it with `d3.csvParse`, and renders marks using the `symbol` generator from D3 v7. A custom legend built with D3's `scaleOrdinal` and `symbolsFill` maps species names to shapes, with axes created via `axisLeft` and `axisBottom`. The code is modularized into local ES6 modules for the scatter plot, axes, and legend.

Ssasidhharreddy@gmail.com
95% match
Loading thumbnail…

Activity6_task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species indicated by different symbols and a legend. The visualization loads the data from a GitHub CSV file, parses it with `d3.csvParse`, and uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. The code employs a `join`-based declarative grammar to build SVG elements, with a custom `shapeLegend` for symbol encoding. The plot adapts to the window size and updates dynamically as data loads.

RRJVENKATESH789@GMAIL.COM
95% match
Loading thumbnail…

Activity6_task 3 .2

This example displays a scatter plot of Iris flower measurements, showing sepal length against petal length for three species. The visualization uses distinct symbols for each species, with a shape legend positioned in the upper right corner to identify the categories. Built with D3 v7, the code imports specific modules such as `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` for scaling and symbol generation. The plot loads data from a CSV file hosted on GitHub, parsing it with `csvParse` and converting numeric fields before rendering. Axes and labels are created using reusable axis functions.

Ggouthamigongidi2457@gmail.com
94% match
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of iris flower measurements, mapping sepal length to the x-axis, petal length to the y-axis, and encoding species with different symbol shapes. The visualization includes labeled axes generated with `d3.axisLeft` and `d3.axisBottom`, plus a custom shape legend built from `d3.symbol` with `symbolsFill`. Data loads asynchronously from a CSV file via `d3.csvParse`, and the plot uses `d3.scaleLinear` and `d3.scaleOrdinal`, with marks rendered as SVG paths via `symbolGenerator`.

CChandra Prakash Reddy Kalwakolu
94% match
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species as symbol shapes (circles, triangles, and squares) with a custom legend. It uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape mapping, and d3.axisLeft/axisBottom via a reusable axes module. The data loads asynchronously as CSV from a GitHub repository and is parsed with d3.csvParse. The visualization builds its SVG using d3.select and join patterns, with local ES6 modules for modular structure.

DDeekshitha Annreddy
94% match
Loading thumbnail…

Activity6_Task3.2

This example displays 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 distinct symbols and a corresponding legend. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position marks and generate shapes. Data is loaded from a remote CSV via `csvParse` and fetched asynchronously. The visualization also demonstrates modular ES6 imports for reusable axis and legend components.

Kkrishnavisheshkatta@my.unt.edu
94% match
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length with different point shapes representing species. The visualization loads data from a GitHub-hosted CSV file, parses it with `d3.csvParse`, and renders points using D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbol` generators. A custom shape legend, implemented as an ES6 module, displays the three species with matching symbols. Axes are drawn using `axisLeft` and `axisBottom`, with labels positioned via D3 selection methods.

Gguttavenkata745@gmail.com
94% match