Skip to main content
SimilarExport ZIP
100%

T3.1-jaynicanunna

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

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

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…

T3.1-jaynicanunna

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

Nnunnajaynica@gmail.com
100% match
Loading thumbnail…

T3.2-Jaynica nunna

This example shows a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape and a custom legend. The code loads data from a remote CSV file using `d3.csvParse` and renders the chart with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for positioning and shape encoding. Axes are composed via `d3.axisLeft` and `d3.axisBottom`, while the visualization is orchestrated through local ES6 modules, demonstrating modular data-binding patterns with joins and `setState` for async data loading.

Nnunnajaynica@gmail.com
89% match
Loading thumbnail…

Scatter Plot Data

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, petal width on the y-axis, and coloring each point by species (green, purple, or red). The code uses D3 v6 with `d3.csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles based on data from a GitHub-hosted CSV file. It also sets custom font sizes for tick text and includes axis labels for both dimensions.

Jjayanthamol99
87% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (red, green, or blue). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale scales, and render axes. Circles are drawn using SVG selections with `join('circle')`, positioned via `cx` and `cy` attributes, and colored through a custom switch statement. The chart fills the browser window, with axis labels added as SVG text elements.

Jjayanthamol99
87% match
Loading thumbnail…

t-3

This scatter plot visualizes the Iris dataset, showing petal length versus petal width for individual flowers, with each species—setosa, versicolor, and virginica—colored distinctly. The code loads data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG marks. It also attaches a second, unused pair of sepal measurements to each point’s `rx` and `ry` attributes. Axis labels and ticks are generated using `d3.axisLeft` and `d3.axisBottom`.

AArunVurukonda@my.unt.edu
86% match
Loading thumbnail…

ICE-6_Scatter_Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three species, colored blue, yellow, and red. It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and map the data, rendering SVG circles with fixed radius. The code also parses sepal measurements but only uses them for axis labels, with a rotated y-axis label and a horizontal x-axis label. The visualization fills the browser window using `window.innerWidth` and `innerHeight`.

Jjayavamsi
85% match
Loading thumbnail…

Untitled

This interactive D3.js (v6) scatter plot visualizes the classic Iris dataset, mapping petal length and width to the x and y axes. Points are color-coded by species, with setosa, versicolor, and virginica rendered in blue, red, and black respectively. The SVG rendering uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for tick marks. The code loads data via d3.csv from a GitHub gist, parsing numeric fields, and draws circles with a fixed radius, while also storing sepal dimensions as unused properties on each mark.

Eeravellisaimeghana
85% match
Loading thumbnail…

T8 Q3 tutorial

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) using skyblue, lightgreen, or orange. The plot is rendered as SVG circles using D3 v6, with data loaded via `d3.csv` from a remote GitHub URL and scaled using `scaleLinear`. Axes are drawn with `axisLeft` and `axisBottom`, and the chart fills the browser window with fixed margins and a red title.

Jjyothikaraj3@gmail.com
85% match