Skip to main content
SimilarExport ZIP
100%

Activity-8_Task-3.1

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

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

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

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-8_task-3.1

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.

SSree Yuktha Sunkara
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…

Activity6_Task3

This example displays a scatter plot of the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using light blue, light green, and orange. The visualization uses D3 v6, loading data via `d3.csv` from a GitHub Gist, and renders SVG circles with `d3.scaleLinear` for axes and `d3.axisLeft` and `d3.axisBottom` for labeled axes. The code also applies non-standard `rx` and `ry` attributes to circles, though they do not affect the round markers.

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

Activity 6_task 3

This example displays the Iris dataset as a scatter plot in an SVG rendered with D3.js. It plots petal length on the x-axis and petal width on the y-axis, while encoding species types—setosa, versicolor, and virginica—through distinct fill colors (skyblue, lightgreen, and orange). The code uses `d3.csv` to load the remote dataset, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. Circle positions are computed via `scaleLinear` ranges derived from the data extent, and the circles are appended dynamically using `.join('circle')`. No interactive behavior is shown.

HHarshita Vairagade
93% match
Loading thumbnail…

Activity6_Task3

This example uses a scatter plot to visualize the Iris dataset, displaying petal length and petal width on the axes while coloring each point by species (setosa, versicolor, virginica). The D3 v6 code loads CSV data via the `csv` function, maps sepal and petal measurements using `scaleLinear` and `extent`, and renders the plot with SVG circles. It creates axes using `axisLeft` and `axisBottom` and adds data-driven colors, providing a clear comparison of species clusters in the flower measurements.

Vvenkataravitarunelisetty@my.unt.edu
93% 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
93% match
Loading thumbnail…

Activity6_Task3

This example renders a scatter plot of the Iris dataset, showing petal length against petal width with color-coded markers for each species (setosa, versicolor, and virginica). It loads CSV data via `d3.csv` and uses `d3.scaleLinear`, `d3.extent`, and axis generators `d3.axisLeft` and `d3.axisBottom` to build the SVG visualization. Circle positions are mapped from the numeric fields, with radial dimensions also set from sepal measurements, though the plot only displays fixed-radius points. The code demonstrates dynamic data parsing and SVG rendering directly in the browser.

YYeruva Snehith Reddy
93% match