Skip to main content
SimilarExport ZIP
100%

Activity6_Task3.2

✓ Published0🌍 Public
Ssasidhharreddy@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Hello VizHub

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.

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

Activity6_task3.2

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.

Mmohanalaharic@gmail.com
95% 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
95% 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
95% 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
95% match