Skip to main content
SimilarExport ZIP
100%

Tutorial 2 D3

✓ Published0🌍 Public
JJboulery
Last edited Jan 26, 2018
Created on Jan 26, 2018

This visualization displays the Iris flower dataset, plotting petal length against petal width. Each of the three species (setosa, versicolor, virginica) is represented by a distinct SVG symbol—circle, cross, or diamond—and colored using a categorical scale. The view includes a linear regression line calculated from the data and displayed with its equation, alongside a legend. Mouseover interactions reveal a tooltip showing the exact coordinates of each point. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.symbol`, `d3.line`, and `d3.csv` to load the external CSV.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Jboulery/'>Jboulery</a>'s block: <a href='http://bl.ocks.org/Jboulery/e330914cc666b504a4a277e1f19dced7'>Iris Species with lin reg and mouseover</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Tutorial 2 D3

This D3.js v4 visualization plots the classic Iris dataset, showing the relationship between petal length and petal width for three iris species. Each species is represented by a distinct symbol and color from the d3.schemeCategory10 palette. The chart uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom/left for tick marks. A linear regression line, calculated from the dataset's means, is drawn using d3.line. Hovering over a point displays its coordinates via a text tooltip, and a legend identifies the species. The SVG is generated using d3.select and d3.append.

JJboulery
94% match
Loading thumbnail…

Tutorial 2 D3

This scatterplot maps the classic Iris flower dataset, plotting petal length against petal width for 150 samples. It uses the D3.js v4 library, rendering as an SVG with axis ticks and labels. The code employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for the chart frame, and `d3.symbol` with `d3.symbolCircle`, `d3.symbolCross`, and `d3.symbolDiamond` to distinguish the three species—setosa, versicolor, and virginica—by both shape and color. Data is loaded from a local `iris.csv` file.

JJboulery
92% match
Loading thumbnail…

Tutorial 3.1

This scatter plot visualizes the Iris dataset, comparing petal length against petal width for individual flowers, with colors distinguishing the three species (setosa, versicolor, and virginica). It uses D3 v6 to load CSV data from a GitHub repository, scale linearly with `d3.scaleLinear`, and render circles in an SVG. The axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while separate labels indicate the plotted variables, although the code also loads sepal dimensions without displaying them in the final chart.

Jjtulasi05@gmail.com
90% match
Loading thumbnail…

Tutorial task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species color-coded as setosa, versicolor, and virginica. Using D3.js v6, the visualization maps each data point to a circle with coordinates scaled by d3.scaleLinear and d3.extent domains. The SVG rendering includes custom axis labels from d3.axisLeft and d3.axisBottom, while circles are drawn with d3.selectAll and the join pattern. Data loads asynchronously from a GitHub-hosted CSV file via d3.csv.

Pperamranji
89% match
Loading thumbnail…

Tutorial_3

This scatter plot visualizes the Iris dataset, mapping petal length along the x-axis and petal width along the y-axis, with each of the three iris species (setosa, versicolor, and virginica) distinguished by a different fill color. Built with D3 version 6, the visualization uses `d3.csv` to load data from a remote GitHub source and `d3.scaleLinear` to create the axes’ scales. The SVG circles are drawn using `d3.select` and a data join, while `d3.axisLeft` and `d3.axisBottom` render the labeled axes, with additional text annotations for the axes.

HHarshithakodakandla@my.unt.edu
88% match
Loading thumbnail…

Tutorial3.1

This example uses D3 v6 to create a scatter plot of the Iris dataset, loaded via CSV from a GitHub repository. It visualizes petal length on the x-axis and petal width on the y-axis, with circles colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The code employs `d3.csv` for parsing, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. The SVG rendering uses `select` and `join` to bind data to circle elements.

Cchintamanenithp@gmail.com
88% match
Loading thumbnail…

tutorial3

This interactive scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers, with colors indicating species. Rendered as SVG, the plot uses D3 v6 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates and draw axes. Data is loaded asynchronously from a CSV file via `d3.csv`, and each point is rendered as a circle with a fixed radius, colored by species. The chart fills the browser window and includes styled axis labels.

Vvinaykollapudi@my.unt.edu
88% match
Loading thumbnail…

Tutorila3 and 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while distinguishing species through color: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization is rendered as an SVG using D3 version 6.7.0, loading remote CSV data via `d3.csv`. Both axes use `d3.scaleLinear` with `d3.extent` for domain scaling, while `d3.axisLeft` and `d3.axisBottom` generate the tick marks and labels. Circle marks are appended with the `.join` operation, and the SVG is sized to the full browser window dimensions.

KKritin Kesav
88% match