Skip to main content
SimilarExport ZIP
100%

Activity6_Task3.1

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

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by species using the Tableau 10 categorical color scheme. It demonstrates D3.js v7’s modular API, importing a reusable `scatterPlot` function from a local ES6 module and using core utilities like `d3.map`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to build the chart. The data is fetched as CSV from a GitHub gist, and the SVG is constructed with `d3.create` and rendered via a `join` operation for circles.

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…

Activity6_Task3.2

This example demonstrates a scatter plot of the classic Iris dataset, showing sepal length against petal length, with each point’s shape indicating its species. It uses D3 v7 with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to create the plot and a custom shape legend. The visualization loads the CSV data via a remote URL, parses it with `csvParse`, and renders the chart using an SVG canvas. The code organizes chart components into local ES6 modules for axes, scatter plot, and legend, imported through `import` statements.

Rrakshithareddy217@gmail.com
93% match
Loading thumbnail…

Activity6_Task3.1

This example shows an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol shape. The visualization uses D3.js v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbolGenerator` to render the marks, while a custom shape legend displays the species categories. Data is loaded asynchronously from a GitHub-hosted CSV file using `fetch` and parsed with `csvParse`, with numerical fields coerced to numbers before plotting. The chart includes labeled axes and a legend, all rendered within an SVG canvas sized to the full viewport.

Bbudalavijay2001@gmail.com
93% match
Loading thumbnail…

Activity6_Task3

This example renders a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica). Data is loaded via `d3.csv` from a GitHub raw URL. Using D3 v6 with SVG, the visualization applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position circles with a fixed radius. Axis labels are added via SVG text elements. The code demonstrates importing D3 functions and local ES6 modules, though the main chart logic lives inline in the HTML.

Ggketan456@gmail.com
92% match
Loading thumbnail…

Activity6_Task3

This example displays the classic Iris dataset as an SVG scatter plot, using D3 version 6 to map petal length and width along the axes while coloring circles by species. It loads data from a remote CSV file and uses `d3.csv` for parsing, `d3.scaleLinear` for scales, and `d3.axisLeft`/`axisBottom` for ticks. Each circle’s fill is determined by a switch function, and sepal measurements are set as `rx` and `ry` attributes, though the radius remains constant. The visualization fills the viewport and applies custom axis labels and styling.

Gganeshseeram5decem@gmail.com
92% match
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length and encoding species with distinct symbols. It uses D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to draw marks and axes. The visualization is built with modular ES6 imports for chart, axes, and legend components. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then rendered in an SVG that fills the window.

LLakshmiDeepikaPagadala@my.unt.edu
92% match
Loading thumbnail…

Activity6_Task3.2

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each data point is rendered as a distinct shape, with the categorical species determining the symbol type, as shown in a legend. The visualization is built with D3 v7 and uses a modular JavaScript approach, importing utilities from the `d3` library. Key APIs include `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and `symbolsFill` to generate the glyphs. The `csvParse` function loads and processes the remote CSV data, which is then drawn using the `path` element.

GGOPI MUPPURI
92% match
Loading thumbnail…

Activity6_Task3.1

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and petal width to the y-axis. It colors each point by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—while also encoding sepal length and width as additional shape properties on each circle. The visualization loads data from a CSV via a GitHub gist, uses D3 v6 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, and renders circles in an SVG. Axis labels are added for petal and sepal length.

KKondreddy Saikiran reddy
92% match
Loading thumbnail…

Activity6_Task3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by distinct symbols and a corresponding legend. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position marks and generate shapes. Data is loaded from a remote CSV via `csvParse` and fetched asynchronously. The visualization also demonstrates modular ES6 imports for reusable axis and legend components.

Kkrishnavisheshkatta@my.unt.edu
92% match