creating the scatter plot using vennilla js

scatter plot

This example presents a scatter plot of the classic Iris dataset, loaded from a GitHub-hosted CSV using D3.js’s `d3.csv`. The visualization is rendered as an SVG element that fills the entire browser window, with dimensions set to the viewport’s height and width via `window.innerHeight` and `window.innerWidth`. The code parses the dataset’s four numeric columns (sepal length, sepal width, petal length, petal width) into integers using the `parseRow` function, though it does not yet map these fields to visual positions or draw any points. Instead, it establishes the SVG canvas and logs the parsed data to the console, leaving the plotting logic incomplete.

Kkhalil-ryu

D3 Partial Scatter Plot (Vanilla JS)

This example displays a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v6. It fetches the CSV from a GitHub Gist, parses the numeric fields, and creates SVG circles with pixel-based coordinates scaled from the data extents. The visualization fills the browser window, using D3’s `scaleLinear`, `extent`, `csv`, and `select` APIs to handle scaling, data loading, and DOM manipulation.

AAndrea Mignone

LLakshmiManjushaReddyYarreddu

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot of petal length against petal width, with each point colored by species. It loads the data from a CSV file using d3.csv and maps values to screen coordinates with d3.scaleLinear and d3.extent. The SVG circles are rendered via d3.select, and axes are generated with d3.axisLeft and d3.axisBottom. The code runs as a React example with D3 v6, using an HTML page that appends an SVG to the body and sets the chart dimensions to the full window size.

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3.js v6 with SVG rendering, loading data via `d3.csv`, scaling with `d3.scaleLinear`, and adding axes with `d3.axisLeft` and `d3.axisBottom`. The code also includes custom axis labels for sepal length and petal length.

SSreejaBellamkonda

BBismark Kofi Owusu Sarfo

Basic Scatter Plot with React & D3

This example shows the classic Iris flower dataset in a basic scatter plot. It plots sepal length on the x-axis against sepal width on the y-axis, with each of the 150 data points rendered as a small black circle. The code uses React for component state and effects, while D3 v7’s `select`, `scaleLinear`, and `extent` functions handle the SVG element selection and linear scale mapping. The data is loaded from a CSV file using D3’s `csv` method and passed to a reusable `viz` function for rendering, following a clean separation between React and D3 logic.

creating a scatter Plot using iris dataset

This scatter plot visualizes the relationship between petal length and sepal length for the classic Iris dataset, using purple circles to represent individual flowers. The React-based visualization uses D3 v5's `scaleLinear`, `extent`, and `csv` functions to load and scale the data, rendering the axes and marks as SVG elements. Axis tick labels are formatted with `format('.2s')`, and hover tooltips display the petal length value via an SVG `<title>` element.

Vvidhyanamini

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and petal width. Each circle represents a flower, colored by its species (blue, grey, or brown) using a custom marker function. The code loads CSV data with D3’s `csv` method, scales values with `scaleLinear` and `extent`, and renders axes via `axisLeft` and `axisBottom`. Circles are appended to an SVG using `select`, `data`, and `join`, with styling applied through `attr` properties.

SsreepavanKothapalli

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Pparag776