Skip to main content
SimilarExport ZIP
100%

Activity-8_task-3.1

✓ Published0🌍 Public
SSree Yuktha Sunkara
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Activity-6

This example shows a scatter plot of the Iris dataset, coloring each point by species (setosa, versicolor, or virginica) and plotting petal length against petal width on the axes. It uses D3 v6 via UNPKG, loading data from a GitHub CSV file with `d3.csv` and parsing numeric fields. The code builds an SVG visualization with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, and draws circles with radii of 5 pixels. Axis labels and rotated text are added, with the chart sized to the full browser 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…

Activity 6 Task-3.1

This example displays 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) using skyblue, lightgreen, and orange. The visualization is rendered as an SVG via D3 v6, loaded from UNPKG, using `d3.csv` to fetch the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for tick marks. The code also includes redundant `rx`/`ry` attributes on the circles, though the radius is fixed at 5 pixels.

Kkesava
94% match
Loading thumbnail…

Activity-8_Task-3.1

This example uses D3 v6 to render a static scatter plot of the Iris dataset. It maps petal length and petal width to the x and y positions of circles, while coloring each point by species (setosa, versicolor, or virginica). The code loads CSV data from a GitHub raw URL, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes. It also includes axis labels rendered as SVG text elements. The visualization is rendered directly to an SVG canvas using data joins with `selectAll` and `join`.

Ttharunramula@gmail.com
94% match
Loading thumbnail…

Activity6_Task3

This example shows the classic Iris dataset as a scatter plot, displaying petal length on the x-axis, petal width on the y-axis, and using color-coded circles to distinguish the three species. The plot is rendered as an SVG using D3 v6, with the data loaded from a GitHub-hosted CSV file. The code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to build the visualization. Circle radii are fixed, while circle attributes for width and height are set from the dataset. Axis labels are manually placed with text elements, and species-specific colors are assigned via a switch statement.

Nnsairitwikreddy@gmail.com
94% match
Loading thumbnail…

Activity8_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with data points colored by species (setosa, versicolor, virginica). It loads CSV data from a GitHub repository using D3 v6’s `csv` function, then employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map coordinates and render axes. The SVG circles are positioned via `cx` and `cy`, with colors assigned through a switch statement. The chart fills the browser window using `window.innerWidth` and `window.innerHeight`, with axis labels displayed in green.

Zzoe.romo@att.net
94% match
Loading thumbnail…

Activity8_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using distinct colors. The D3.js v6 code loads CSV data via `d3.csv`, scales the variables with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. Axis labels are added as rotated text elements, and the chart fills the browser window using `window.innerWidth` and `window.innerHeight`.

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

Activity-6 task-3

This example displays a scatter plot of the Iris dataset, positioning points by petal length on the x-axis and petal width on the y-axis. Circles are colored by species (skyblue for Setosa, lightgreen for Versicolor, orange for Virginica), with a legend below. The visualization uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes. Rendering occurs through SVG elements appended to the body, with the plot sized to the full browser window.

Bbhargavireddy4016@gmail.com
94% match
Loading thumbnail…

Activity6_Task3

This example displays a scatter plot of the Iris dataset, mapping petal length and width on the axes while coloring each point by iris species. The code loads CSV data from a GitHub repository, parses numeric fields, and renders SVG circles using D3 v6 scales and axes. It implements custom color mapping for setosa, versicolor, and virginica species, with axis labels styled separately, demonstrating D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data-join pattern.

Mmythripopuri2001@gmail.com
94% match