Skip to main content
SimilarExport ZIP
100%

Tutorial 8 task 3.2

✓ Published0🌍 Public
Jjaswanthichowdarykalapala@my.unt.edu
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

This example presents a scatter plot of the Iris flower dataset, visualizing sepal length against petal length while grouping data points by species through distinct marker shapes. Implemented using D3.js v7, the visualization employs d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to position points and assign shape encodings. The code demonstrates modular architecture with reusable axis and legend components, alongside asynchronous data loading via the Fetch API and CSV parsing through d3.csvParse. An interactive shape legend displays categorical values, all rendered within a responsive full-window SVG.

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…

Tutorial 8 task 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample. The visualization encodes species through distinct colors, with sepal length and width values represented by the circle radii. The example loads data from a remote CSV file and uses D3 version 6’s scaleLinear, extent, and axis functions to create the chart. It renders the plot as an SVG, applying a short syntax for data-driven circle creation.

Jjaswanthichowdarykalapala@my.unt.edu
93% match
Loading thumbnail…

task-8(tutorial-3.2)

This example visualizes the Iris dataset as a scatter plot with distinct shapes for species, mapping sepal length to the x-axis and petal length to the y-axis. It uses d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to assign shape marks to each species, while a custom shape legend displays the mapping. The visualization loads data via fetch from a GitHub repository, parses it with d3.csvParse, and renders axes using d3.axisLeft and d3.axisBottom. ES6 modules demonstrate code organization across files.

DDivyaKota2@my.unt.edu
93% match
Loading thumbnail…

Task 8 Tutorial 3_2

This visualization displays the Iris dataset as a scatter plot of sepal length against petal length, with three iris species distinguished by different point shapes and a shape legend. The plot uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `symbol`, and `axisLeft`/`axisBottom` to render axes and markers. Data is loaded asynchronously from a CSV file using `csvParse` and fetched from a GitHub repository. The visualization adapts to the full browser window size.

YYeshwanth963@gmail.com
92% match
Loading thumbnail…

Task8_Tutorial3.2

This visualization displays an interactive scatter plot of the Iris dataset, mapping sepal length against petal length. Each of the three iris species is represented by a distinct symbol shape, with a custom legend identifying the species categories. The implementation uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to generate the marks, while `axisLeft` and `axisBottom` render the labeled axes. Data is loaded asynchronously from a CSV file via `csvParse` and rendered within a full-window SVG canvas.

KKeerthi
92% match
Loading thumbnail…

Task8_Tutorial3.2

This scatter plot displays the Iris dataset, plotting sepal length against petal length and using different point shapes to distinguish between the three iris species. The visualization uses D3 v7 to create the plot, with a categorical shape scale assigning distinct symbols (from `symbolsFill`) to each species. Axes are rendered using D3's `axisLeft` and `axisBottom` functions, while a custom legend wizard communicates the shape-to-species mapping. Data is fetched asynchronously from a remote CSV file and parsed with `csvParse` before being passed to the chart.

Jjyothirmaijyothi2017@gmail.com
92% match
Loading thumbnail…

Task 8 tutorial 3.2

This scatter plot displays the relationship between sepal length and petal length for iris flowers, with species encoded through different symbol shapes. It uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data to positions and shapes. The visualization fetches the iris dataset from a GitHub-hosted CSV file, parses it with `csvParse`, and renders axes via `axisLeft` and `axisBottom`, alongside a custom legend built with `symbol()`.

Vvchittimadha@gmail.com
91% match
Loading thumbnail…

Task-8(Tutorial-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 categorical shapes from `d3.symbolsFill`. It loads D3 via UNPKG and uses ES6 modules to separate concerns, including `d3.scaleLinear` for axes, `d3.scaleOrdinal` for shape mapping, and custom functions for rendering axes and a shape legend. Data is fetched as CSV and parsed with `d3.csvParse`.

Ttallurisaiteja96@gmail.com
91% match
Loading thumbnail…

Task 8-Tutorial3.2

This visualization displays the Iris dataset as a scatter plot comparing sepal length against petal length, with each of the three flower species distinguished by a unique symbol shape. The plot includes labeled axes and a shape legend to identify species. The code uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, `d3.symbolsFill`, and `d3.axisLeft`/`d3.axisBottom`. Data is loaded asynchronously from a CSV file and parsed with `d3.csvParse`, with numeric columns explicitly coerced.

SSushmaNamidi@my.unt.edu
91% match