Skip to main content
SimilarExport ZIP
100%

Activity6_Task3.2

✓ Published0🌍 Public
HHari Kiran
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

This example demonstrates a scatter plot of flower measurements, encoding bloom length and stem length along the axes while using distinct symbols to represent different flower species. It shows how D3 v7’s `scaleOrdinal`, `symbolsFill`, and `symbol` APIs can map categorical data to visual shapes, accompanied by a custom legend built with reusable ES6 modules. The visualization loads CSV data from a GitHub repository, parses it with `csvParse`, and renders the plot across the full browser window using modular functions for axes and the legend.

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
89% match
Loading thumbnail…

Activity6_Task3.2

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.

KKhushi Desai
88% match
Loading thumbnail…

Activity6_Task3.2

This example shows an interactive scatter plot of iris flower measurements, mapping sepal length against petal length with species indicated by different symbol shapes. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to construct the plot and its legend. Data is loaded asynchronously from a remote CSV file using `csvParse` and fetched via the Fetch API, with numeric fields coerced to numbers. The chart displays three shapes from `symbolsFill`, with axes labeled and a custom shape legend positioned within the SVG.

AAreeba Hassan
88% 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
87% match
Loading thumbnail…

Activity 6 Task-3.2

A scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with each species distinguished by a different symbol shape from the `symbolsFill` scale. The example uses D3 v7 modules including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, plus custom local ES6 modules for axes and a shape legend. Data loads asynchronously from a remote CSV file via `fetch` and `csvParse`, with numeric fields coerced for plotting.

Kkesava
86% match
Loading thumbnail…

Activity6_Task3.1

This example displays a scatter plot of the Iris dataset, using distinct symbol shapes for each species to show petal length against sepal length. It loads D3 v7 via UNPKG and demonstrates modular ES6 imports for local modules like `scatterPlot.js` and `axes.js`. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.symbol` to render shapes, while a custom legend with `d3.axisLeft` and `d3.axisBottom` shows the species mapping. Data is fetched as CSV and parsed with `d3.csvParse`.

Ssaibharath7thota@gmail.com
86% match
Loading thumbnail…

Fork of Activity_6_Task3_Tutorial3.2

This example creates a scatter plot comparing sepal length to petal length for iris flowers, with species distinguished by symbol shape. It loads data from a remote CSV file using D3's `csvParse` and renders the chart with D3 v7. The visualization uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shapes, and a custom legend. Axes are built with `axisLeft` and `axisBottom`, while the shape legend is generated using D3's `symbol` generator, all composed through modular ES6 imports.

Pparvathi829790@gmail.com
86% 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
86% match