Skip to main content
SimilarExport ZIP
100%

Activity6_Task3.2

✓ Published0🌍 Public
JJayanth Reddy Sripathi
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example presents a scatter plot of the Iris dataset, visualizing sepal length against petal length with points colored and shaped by species. The visualization is built using D3 v7, leveraging modules like `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.symbol` to map data values to positions and shapes. It also demonstrates custom reusable functions, including `axes` for drawing axes with labels and `shapeLegend` for a categorical legend. Data is fetched asynchronously from a remote CSV file and parsed with `d3.csvParse`. The chart dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

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

This example displays a scatter plot of the Iris dataset, mapping petal length and width as the primary axes while encoding sepal length and width into the size and shape of the circular markers. Each of the three iris species is distinguished by a unique fill color: sky blue, light green, and orange. The visualization uses D3 version 6, loaded via a CDN, and leverages the `d3.csv` loader to fetch the data from a GitHub repository. It builds the plot using `d3.select` to create an SVG, with scales from `d3.scaleLinear`, axes from `d3.axisLeft` and `d3.axisBottom`, and computes data extents via `d3.extent`. The code sets the circle radii, along with `rx` and `ry` attributes, to reflect the additional sepal dimensions, while axis labels are added as text elements.

JJayanth Reddy Sripathi
95% 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 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
94% 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
94% 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
94% match
Loading thumbnail…

Activity8_Task3_2

This example presents a scatter plot of the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with points shaped according to species. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `symbolsFill` for categorical shapes, and `d3.symbol` to generate the point glyphs. A custom legend uses `d3.symbol` similarly. The data is loaded asynchronously via `fetch` and parsed with `d3.csvParse`, then rendered into an SVG using declarative joins.

LLakshmi Keerthi
94% 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
93% match
Loading thumbnail…

Activity6_Task3.2

This example displays a scatter plot of the Iris dataset, showing sepal length against petal length with points colored and shaped by species. It loads the CSV from a GitHub repository using `d3.csvParse`. The visualization uses D3 v7 scales including `scaleLinear` and `scaleOrdinal` with `symbolsFill` to differentiate species, while a custom legend built with `symbolGenerator` lists the categories. Axes are generated via `axisLeft` and `axisBottom` with explicit labels for each measurement.

Bbudalavijay2001@gmail.com
93% match