Skip to main content
SimilarExport ZIP
100%

Tutorial Activity6_Task3

✓ Published1🌍 Public
Kkrunalpatel@my.unt.edu
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Hello VizHub

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). The chart uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with custom fill colors. Axis labels are added using d3.axisLeft and d3.axisBottom, and the graphic fills the browser window. The code imports specific D3 modules via destructuring and uses scaleLinear, extent, and join for efficient data binding.

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_Task3_Tutorial

This example visualizes the Iris dataset as a scatter plot, mapping petal length and petal width on the axes while coloring each circle by species (setosa, versicolor, or virginica). The code uses D3 v6 via UNPKG, loading CSV data from a GitHub repository and rendering SVG circles with `scaleLinear`, `extent`, and axis functions. It also applies non-standard `rx` and `ry` attributes to the circles, based on sepal measurements, demonstrating flexible D3 data binding and custom styling.

Pparvathi829790@gmail.com
95% match
Loading thumbnail…

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The plot uses D3 v6 to load CSV data, apply linear scales, and render SVG circles. Axes are generated with `axisLeft` and `axisBottom`, and axis labels are added via SVG text elements. The code also demonstrates direct access to the D3 API through destructured imports and includes margins and responsive sizing based on window dimensions.

Kkartheekgrpt@gmail.com
94% match
Loading thumbnail…

Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom to render the axes. Circles are drawn with SVG attributes set via d3 joins, and each point’s fill color is assigned through a switch statement. The visualization reads data from a remote gist URL and renders entirely within an SVG canvas, with axis labels styled in green and a red title displayed above the plot.

HHema Tummapala
94% match
Loading thumbnail…

Activity6_Task3.1

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to x and y positions while coloring each point by species (setosa, versicolor, or virginica) using predefined color markers. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes, with data loaded via `d3.csv` from a GitHub gist. Circles are rendered as SVG elements with their radii fixed and additional sepal dimensions stored as unused attributes, while axis labels are positioned using SVG text elements.

Vvenkatamanikantavaddi@my.unt.edu
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…

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
Loading thumbnail…

Activity 6_Task 3.1_Tutorial

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample. Points are colored by species, with setosa in blue, versicolor in green, and virginica in red. The code loads the CSV data via d3.csv, then uses d3.scaleLinear with d3.extent to establish the x and y scales, and renders circles with d3.selectAll and .join. Axes are generated using d3.axisLeft and d3.axisBottom, with custom labels added as SVG text elements. The visualization fills the browser window using window.innerWidth and window.innerHeight.

Ccharankumarreddyveeramreddy@my.unt.edu
94% match
Loading thumbnail…

Activity6_Tutorial3.1

This example visualizes the Iris dataset with a scatter plot, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). The SVG rendering uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position and label the axes, with circles sized at a fixed radius. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL, and each mark’s fill color is assigned through a custom switch statement. Axis labels are added as SVG text elements with rotated and centered styling.

Vvarmanithish5@gmail.com
94% match