Skip to main content
SimilarExport ZIP
100%

Activity6_Tutorial3.2

✓ Published0🌍 Public
Ssaimanvith22@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 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. It visualizes the three iris species using distinct shapes via a categorical scale and includes a custom shape legend. The visualization loads CSV data from a GitHub repository, uses d3.csvParse to parse it, and builds the chart with d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. Axes and legend are modularized into reusable ES6 modules.

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_tutorial3.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. Each point is rendered as a different shape (circle, square, triangle, etc.) based on the iris species, with a legend explaining the shape-to-species mapping. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position marks and generate custom path shapes. Data is loaded as CSV from a GitHub repository and parsed with `csvParse`, while axis and legend components are built using `axisLeft`, `axisBottom`, and reusable selection patterns.

Vvenkatdinesh5010@gmail.com
96% match
Loading thumbnail…

Tutorial3.1_Activity6

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 species indicated by point shape. The visualization uses a categorical color-free shape legend to identify the three species, with axes labeled by the corresponding measurement variables. Built with D3 v7, the code leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` from the `d3` module, while fetching and parsing the CSV data via `csvParse`. The rendering uses a custom `scatterPlot` function that joins SVG path elements with `symbolsFill` shapes.

Ssanjanadadi19@gmail.com
95% match
Loading thumbnail…

Activity6_Tutorial3.2

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and using distinct symbols to represent the three species. The visualization loads data from a remote CSV file using `fetch` and `csvParse`. D3 v7 scales, including `scaleLinear` and `scaleOrdinal`, position the marks and determine their shapes, while `axisBottom` and `axisLeft` render the axes. A custom legend built with `symbolGenerator` and `symbolsFill` identifies each species. Code is modularized into local ES6 modules for axes, plotting, and legend components.

SShiva Sai Reddy
94% match
Loading thumbnail…

Activity6_Tutorial3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length against petal length and using distinct symbol shapes to encode the species of each flower. A custom legend explains the shape-to-species mapping, with axes labeled accordingly. The visualization is built with D3 v7, using `scaleLinear` for the x and y positions and `scaleOrdinal` with `symbolsFill` for the categorical shapes. Data is loaded remotely as CSV and parsed with `csvParse`, while the chart, axes, and legend are composed from modular functions that manipulate SVG selections.

Vvarmanithish5@gmail.com
94% match
Loading thumbnail…

Activity_6_tutorial3.2

A scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct shape (circle, square, etc.). The plot includes axes with labels and a legend identifying the species categories. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to map data values to positions and shapes, while the `axes` and `shapeLegend` components construct the chart and legend. Data is loaded from a remote CSV file and parsed with `csvParse`.

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

Activity 6_tutorial 3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species indicated by distinct marker shapes. Using D3.js version 7, the visualization employs scales from `scaleLinear` and `scaleOrdinal`, along with the `symbol` API to generate shape-based marks. The plot includes labeled axes from `axisLeft` and `axisBottom`, and a custom shape legend. Data is loaded asynchronously from a CSV file and parsed with `csvParse`, with point positions calculated via the `xScale` and `yScale` functions.

Ssairohithchada@gmail.com
94% match
Loading thumbnail…

Activity6_tutorial3.2

This example shows a scatter plot of iris flower measurements, with sepal length on the x-axis and petal length on the y-axis. Each point uses a distinct symbol shape to encode the species of the flower, and a custom legend explains the shape-to-species mapping. The visualization loads CSV data from a remote GitHub repository, parses it with `d3.csvParse`, and renders the chart using modular D3 v7 functions such as `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, and `axisBottom`. The code organizes its layout through reusable modules for axes, scatter plot, and a shape legend.

Cchandrikachowdary867@gmail.com
94% match
Loading thumbnail…

activity8tutorial3.1

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length and encoding species using different shapes via d3.symbol and a custom shape legend. The visualization loads the CSV data with d3.csvParse, updates the chart asynchronously through a state-based render pattern, and relies on d3.scaleLinear for axes positioning with d3.axisLeft and d3.axisBottom. Axes labels are generated manually, while the legend is built with d3.scaleOrdinal and symbolsFill, all within a scalable SVG that fills the viewport.

BBindumadhavi
94% match