Skip to main content
SimilarExport ZIP
100%

Tutorial_3.2_Sivani

✓ Published1🌍 Public
Kkommineniamarasadasivani2002@gmail.com
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Hello VizHub

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each point shaped according to species. It uses a customized D3 module system, importing the `axisLeft`, `axisBottom`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill` APIs to render axes, scales, and categorical shapes. The chart employs a shape legend to map species to symbols, and it loads data from a remote CSV file, parsing and converting the numeric columns before plotting. The visualization is built using D3 v7 within the VizHub framework, with a modular structure separating scatter plot, axes, and legend logic.

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…

Fork of Tutorial_3_sivani

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers, with points colored by species (setosa, versicolor, and virginica). The plot uses a linear scale for both axes and positions each circle using the `scaleLinear` and `extent` functions from D3. Axis labels are added via `axisLeft` and `axisBottom`, while the visualization is rendered as an SVG. Data is loaded from a remote CSV file, and the chart updates its size based on the browser window dimensions.

Kkommineniamarasadasivani2002@gmail.com
91% match
Loading thumbnail…

Tutorial_Sivani

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling the x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` module, rendering as SVG with a `setInterval` driving the axis rotation. Data comes from a GitHub-hosted Iris dataset.

Kkommineniamarasadasivani2002@gmail.com
90% match
Loading thumbnail…

tutorial3.2

This scatter plot visualizes the Iris dataset, displaying sepal length against petal length, with species differentiated by filled symbols from a shape legend. The visualization uses D3 version 7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisLeft`/`axisBottom` for axes, while fetching the CSV data from GitHub. The code demonstrates the VizHub V3 runtime with a `main` entry point, interactive widgets for real-time updates, and the `state`/`setState` pattern for immutable state management.

Ssathvikavancha@my.unt.edu
90% match
Loading thumbnail…

Tutorial 3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal length for three species. The d3.js code uses `scaleLinear` for the x- and y-axes, and `scaleOrdinal` with `symbolsFill` to distinguish species by shape (circles, squares, and other symbols). A custom legend component displays the symbol-to-species mapping, while the `axes` module renders labeled axes using `axisBottom` and `axisLeft`. Data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Ppnamitha46@gmail.com
89% match
Loading thumbnail…

Tutorial-3

This scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions with color-coded species. It loads the data via D3’s `csv` function from a GitHub gist and uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to build the axes. Circles are drawn in SVG with the `join` pattern, each colored by species (setosa, versicolor, or virginica). Axis labels are added as SVG text, with the visualization sized to the full window.

Ssathvikavancha@my.unt.edu
89% match
Loading thumbnail…

Activity6_Tutorial3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three iris species. Each data point is rendered as a distinct shape (circle, square, or triangle) using the d3.symbol API, with a legend mapping shapes to species. The visualization is built with d3.scaleLinear for axes, d3.scaleOrdinal for the shape encoding, and d3.axisLeft/axisBottom for labeled axes. Data is loaded asynchronously from a remote CSV file using d3.csvParse. The chart updates dynamically via the d3.select and join operations.

Ddandudivya98@gmail.com
88% match
Loading thumbnail…

Task3.1

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each of the three species colored distinctly (setosa, versicolor, virginica). The visualization uses D3 v6 APIs, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, and D3's axis generators (`axisLeft`, `axisBottom`) to render an SVG chart. Data is loaded from a remote CSV URL, with each point represented as a circle whose color is determined by species. The plot includes custom axis labels, with the chart sized to fill the browser window.

Ssivachandraramanaidu.vnof52@gmail.com
88% match
Loading thumbnail…

tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, comparing sepal length against petal length, with each of the three species distinguished by a unique symbol shape via a custom legend. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.symbolsFill` to map species to symbols, and `d3.csvParse` to load and parse the remote CSV data. Custom modules handle axis rendering and legend construction, with the chart filling the entire viewport.

VVrushikaKanaparthy@my.unt.edu
88% match