Skip to main content
SimilarExport ZIP
100%

Activity6_task3.2

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

This example creates an interactive scatter plot using D3 v7 that visualizes the Iris dataset loaded from a GitHub-hosted CSV file. The chart displays sepal length on the x-axis and petal length on the y-axis, with different symbols representing each iris species. The visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for categorical shapes, and a custom legend built with `d3.symbol`. The code demonstrates modular ES6 imports, reusable chart components, and dynamic data fetching with `d3.csvParse` and `fetch`.

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

3task_activity_6

This example displays an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species distinguished by different point shapes. It loads data asynchronously from a CSV file hosted on GitHub, parsing it with `csvParse` and converting numeric fields. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisLeft`/`axisBottom` to render scales, axes, and a custom shape legend. The code demonstrates modular ES6 imports, separating scatter plot, axis, and legend logic into distinct local modules.

Aazeemrm630@gmail.com
92% 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
92% 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
92% 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
92% 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
91% 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
91% match