Skip to main content
SimilarExport ZIP
100%

Activity_6_Q3.2

✓ Published0🌍 Public
Ttarun.chintada46@gmail.com
Last edited Oct 23, 2024
Created on Oct 23, 2024
Forked from Hello VizHub

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species represented by distinct symbol shapes. It uses D3 v7, importing APIs like `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbol` via ES6 modules. Data is fetched from a GitHub-hosted CSV and parsed with `csvParse`. The plot includes labeled axes and a custom shape legend, rendered using a combination of joined SVG elements and D3’s data-join pattern.

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 displays a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by shape to represent different species, with a legend for the categorical variable. The visualization uses D3 version 7 libraries including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. It loads CSV data from a GitHub repository and renders the plot using D3's selection and join operations within an SVG container.

TTarshit Vupperla
93% match
Loading thumbnail…

Activity_6_Q3.1

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart. The code loads CSV data directly from a GitHub repository via `d3.csv`, parses numeric fields, and encodes sepal measurements as the circle’s `rx` and `ry` attributes, though these do not affect the visible radius. Axis labels are added manually with rotated SVG text elements.

Ttarun.chintada46@gmail.com
93% 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 demonstrates a scatter plot of the classic Iris dataset, showing sepal length against petal length, with each point’s shape indicating its species. It uses D3 v7 with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to create the plot and a custom shape legend. The visualization loads the CSV data via a remote URL, parses it with `csvParse`, and renders the chart using an SVG canvas. The code organizes chart components into local ES6 modules for axes, scatter plot, and legend, imported through `import` statements.

Rrakshithareddy217@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
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 points colored and shaped by species. A custom shape legend displays the species categories. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to render the marks, with axis and legend components built as reusable functions. The dataset is loaded as a CSV from a GitHub URL, parsed with `csvParse`, and numeric columns are converted before rendering. The plot updates responsively to the window size.

Vvarun.mahankali39@gmail.com
92% 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
92% match
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length and petal length along the x- and y-axes. It uses D3 v7 to load and parse the data via `csvParse`, and renders marks with `scaleLinear` and an ordinal shape scale using the symbols from `symbolsFill`. A custom legend displays the three species categories. The visualization is drawn in an SVG container sized to the window, with axes and labels generated by custom `axes` and `shapeLegend` modules.

Vvarshithainaganti@gmail.com
92% match