Skip to main content
SimilarExport ZIP
100%

T3.2-Jaynica nunna

✓ Published0🌍 Public
Nnunnajaynica@gmail.com
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from T3.2-Jaynica nunna

This example shows a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape and a custom legend. The code loads data from a remote CSV file using `d3.csvParse` and renders the chart with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for positioning and shape encoding. Axes are composed via `d3.axisLeft` and `d3.axisBottom`, while the visualization is orchestrated through local ES6 modules, demonstrating modular data-binding patterns with joins and `setState` for async data loading.

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…

T3.1-jaynicanunna

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

Nnunnajaynica@gmail.com
89% match
Loading thumbnail…

T3.1-jaynicanunna

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

Nnunnajaynica@gmail.com
89% match
Loading thumbnail…

Activity6_Task3.2

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`.

JJayanth Reddy Sripathi
85% match
Loading thumbnail…

t3.2

This example uses a D3.js scatter plot to visualize the Iris dataset, plotting sepal length against petal length while encoding species through distinct point shapes. The visualization includes labeled axes, a custom shape legend, and a responsive SVG canvas that fills the browser window. The code leverages D3’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs, along with helper modules for axes and legend rendering, and fetches the CSV data from a remote GitHub repository.

Aamshureddy13@gmail.com
84% match
Loading thumbnail…

t-3.2

This example demonstrates a scatter plot visualizing the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species as different point shapes. It loads data from a GitHub-hosted CSV file using the Fetch API and `d3.csvParse`. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft`/`d3.axisBottom` for axes, rendered within an SVG sized to the browser window. A custom legend module displays the shape-to-species mapping.

AArunVurukonda@my.unt.edu
84% 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
83% match
Loading thumbnail…

Tutorial 3.1

This interactive scatter plot displays sepal length against petal length for the Iris dataset, with species differentiated by symbol shape and a corresponding legend. It loads data from a remote CSV and uses D3 v7 methods including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`. The visualization is built with ES6 modules, including custom axis and legend components, and dynamically fetches and parses the dataset using `csvParse` before rendering.

Eeedaraajay02@gmail.com
83% 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
83% match