Skip to main content
SimilarExport ZIP
100%

Tutorial3.2

✓ Published0🌍 Public
Vvaishalireddy55555@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Hello VizHub

This example shows an interactive scatter plot of the Iris dataset, encoding species as symbol shapes and displaying a custom shape legend. It demonstrates modular D3 v7 code organization, with separate ES6 modules for axes, scatter plot rendering, and legend construction. The visualization uses D3 scales (scaleLinear, scaleOrdinal), symbol generators, and CSV data loading from a GitHub gist. The code also highlights VizHub’s pattern of state management and re-rendering through a setState function, alongside dynamic SVG resizing to the window.

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.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
91% 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
90% match
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
89% 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
87% match
Loading thumbnail…

Tutorial_3.2

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.

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

Activity 6 tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, plotting sepal length against petal length and distinguishing species by shape using symbols from `d3.symbol` and the `symbolsFill` scale. The visualization loads CSV data from a GitHub repository, parses it with `d3.csvParse`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. A custom legend clarifies the species shapes. The code uses modular ES6 imports from D3 v7, including `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent`, built within a VizHub framework.

AAamani Chamarthi
87% 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
86% match