Skip to main content
SimilarExport ZIP
100%

Activity6_task3.2

✓ Published0🌍 Public
Mmohanalaharic@gmail.com
Last edited Nov 1, 2025
Created on Nov 1, 2025
Forked from Hello VizHub

This example renders a scatter plot of the Iris dataset, mapping sepal length and petal length along the axes while encoding species with distinct symbol shapes. The visualization loads data from a remote CSV file and uses D3 v7’s low-level modules—`scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol`—to construct the plot, axes, and a custom shape legend with translated tick marks. The code composes reusable modules for axes, legend, and scatter plot rendering, demonstrating a modular approach to building interactive SVG graphics.

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.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, encoding sepal length on the x-axis, petal length on the y-axis, and species using different D3 symbol shapes, with a legend for the shapes. The visualization loads data from a remote CSV file via `fetch` and `csvParse`, then uses `scaleLinear`, `scaleOrdinal`, and `symbol` to map data to positions and shapes. It builds the chart using `svg.call` with reusable modules for axes and legend, and updates dynamically through a state-based render loop.

Ssrilekhasridasyam@my.unt.edu
95% match
Loading thumbnail…

Activity6_Task3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length against petal length and encoding species with different point shapes. It uses D3 v7 to load data via CSV, construct linear scales, and render symbols from `symbolsFill`. The visualization includes axes and a custom legend built with reusable ES6 modules, demonstrating data fetching and modular code organization.

Ssaiteja.cse.rymec@gmail.com
94% match
Loading thumbnail…

Activity 6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with the three flower species distinguished by different symbol shapes (circles, crosses, and diamonds) via a shape legend. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to position and style the marks. It fetches the CSV data from a GitHub repository and renders it in an SVG sized to the window. A modular structure separates the axes, legend, and plot logic into reusable functions.

SSiva Kishore Reddy
94% match
Loading thumbnail…

Activity6_Task 3.2

This example demonstrates a scatter plot that visualizes the Iris dataset, mapping sepal length and petal length on the axes while using distinct symbol shapes to represent the three iris species. The visualization includes labeled axes and a custom shape legend. Built with D3 v7, the code uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shapes, and `d3.csvParse` to load the data. A modular ES6 structure separates the chart, axes, and legend into local modules.

Vvankayalapatimounika2000@gmail.com
94% match
Loading thumbnail…

Activity6_Task3.1

This example shows an interactive scatter plot of 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 shape. The visualization uses D3.js v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbolGenerator` to render the marks, while a custom shape legend displays the species categories. Data is loaded asynchronously from a GitHub-hosted CSV file using `fetch` and parsed with `csvParse`, with numerical fields coerced to numbers before plotting. The chart includes labeled axes and a legend, all rendered within an SVG canvas sized to the full viewport.

Bbudalavijay2001@gmail.com
94% match
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length and encoding species with distinct symbols. It uses D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to draw marks and axes. The visualization is built with modular ES6 imports for chart, axes, and legend components. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then rendered in an SVG that fills the window.

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

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot showing sepal length versus petal length, with species encoded by point shape and a legend. It demonstrates modular D3 code organization: a scatterPlot module manages scaling and marks, while axes and shapeLegend modules add labeled axes and a symbol legend. Data loads from a remote CSV file using d3.csvParse. The code separates visualization logic into reusable ES6 modules and uses d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom.

Vvemulasai306@gmail.com
94% match