Skip to main content
SimilarExport ZIP
100%

Tutorial_3.2

✓ Published0🌍 Public
HHarshithakodakandla@my.unt.edu
Last edited Oct 23, 2024
Created on Oct 23, 2024
Forked from Hello VizHub

This example demonstrates a D3.js scatter plot of the Iris dataset, showing sepal length against petal length with species encoded by symbol shapes. It uses D3 modules like `csvParse`, `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbol` to render the marks. It also includes custom axes and a shape legend built with `axisLeft`, `axisBottom`, and `symbolGenerator`. Data is fetched from a CSV file via UNPKG and processed into numeric fields before visualization.

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…

tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length, with species encoded by symbol shapes and a corresponding shape legend. The visualization uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded asynchronously as CSV and parsed with `d3.csvParse`. The code is modularized into separate ES6 modules for the scatter plot, axes, and legend, built as a reusable visualization component.

Nnikhithaaitha22@gmail.com
94% match
Loading thumbnail…

Tutorial3.2

This example creates a scatter plot of the Iris dataset, visualizing sepal length against petal length and using different symbols to distinguish species. It demonstrates a modular D3 v7 workflow, loading the library via UNPKG and importing local ES6 modules for axes, the scatter plot, and a custom shape legend. The visualization fetches its data from a GitHub-hosted CSV and parses it with `csvParse`. The code highlights modern D3 APIs like `select`, `join`, `scaleLinear`, `scaleOrdinal`, and the `symbol` generator to build interactive, data-driven graphics.

Cchintamanenithp@gmail.com
93% 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
93% match
Loading thumbnail…

Activity_6_Tutorial 3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length with points shaped according to species. The visualization includes labeled axes and a shape legend for the three species categories. Built with D3 v7, the code creates linear scales, applies an ordinal color shape scale using `symbolsFill`, and renders SVG symbols via `symbolGenerator`. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse` before being passed to the chart.

HHarsha vardhan reddy Yarmareddy
92% match
Loading thumbnail…

tutorial3.1

This example shows an interactive scatter plot of the Iris dataset, plotting sepal length against petal length and encoding flower species with different marker shapes. It loads D3 v7 via UNPKG and uses a modular ES6 structure with local modules for axes, scatter plot, and a custom shape legend. The visualization fetches CSV data, parses it with d3.csvParse, and renders SVG marks using d3.symbol and d3.scaleOrdinal with symbolsFill. Axes are generated with d3.axisLeft and d3.axisBottom.

Vvinaykollapudi@my.unt.edu
92% 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
92% match
Loading thumbnail…

Tutorial 3.2

A D3.js scatter plot displays iris flower measurements, plotting sepal length against petal length. Distinct symbols represent different species, with a legend mapping each species to its corresponding marker shape. The visualization loads CSV data from a GitHub repository, parsing and converting numerical strings to numbers. The code constructs linear scales for both axes and an ordinal scale for shapes, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate the visual encoding. Custom functions manage axes and legend rendering via `d3.select` and SVG path joins.

Jjtulasi05@gmail.com
92% match
Loading thumbnail…

Tutorial 3.2 : Scatter plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and distinguishing iris species by shape using d3.scaleOrdinal and d3.symbolsFill. The code imports modular D3 functions like axisLeft, axisBottom, and csvParse from d3.v7, and builds the chart with a custom scatterPlot module that renders symbols via the symbol generator. A separate shapeLegend module displays the species categories, while axes labels clarify the measurements. Data loads asynchronously via fetch from a GitHub-hosted CSV file.

Aajaykumarseelam@my.unt.edu
92% match