Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Tutorial 3.2 : Scatter plot

✓ Published0🌍 Public
Aajaykumarseelam@my.unt.edu
Last edited Apr 5, 2024
Created on Apr 5, 2024

A scatter plot displays sepal length against petal length for the Iris dataset, with points colored and shaped by species. The visualization loads data from a remote CSV file and uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map data values to positions and shapes. The plot includes labeled axes created with `axisLeft` and `axisBottom`, plus a shape legend generated by a custom module. The entire chart renders as an SVG, sized to the full browser window.

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…

Fork of Tutorial 3.2 : Scatter plot

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length with each point’s shape encoding the species. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and joins to render axes and a shape legend. Data is loaded via `csvParse` from a GitHub-hosted CSV file, with numerical columns parsed and passed to the scatter plot for dynamic rendering.

Aajaykumarseelam@my.unt.edu
97% match
Loading thumbnail…

Fork of tutorial3_extended

This scatter plot displays the relationship between sepal length and petal length for the Iris dataset, with points colored and shaped by species. The plot is built using D3 v7’s modular APIs, including `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape mapping, and a custom `axes` module for labeled axes. A separate legend, created with `symbol` and `tick` elements, clarifies the species symbols. Data is fetched from a remote CSV and parsed with `csvParse`, while the chart’s size adapts to the browser window.

Kkaushikreddy901@gmail.com
93% match
Loading thumbnail…

Tutorial 3.2 : Scatter plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and distinguishing iris species by shape using d3.scaleOrdinal and d3.symbolsFill. The code imports modular D3 functions like axisLeft, axisBottom, and csvParse from d3.v7, and builds the chart with a custom scatterPlot module that renders symbols via the symbol generator. A separate shapeLegend module displays the species categories, while axes labels clarify the measurements. Data loads asynchronously via fetch from a GitHub-hosted CSV file.

Aajaykumarseelam@my.unt.edu
92% match
Loading thumbnail…

Fork oftutorial 3.2, Scatter Plot with Shape

This example visualizes the Iris dataset as a scatter plot of sepal length against petal length, with each of the three species distinguished by a different symbol shape. The chart includes labeled axes and a separate legend mapping species names to their corresponding shapes. The visualization is built with D3 v7, using scaleLinear for axes, scaleOrdinal with symbolsFill for shapes, and d3.symbol to generate the marked points. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

RRakesh Yadav
91% match
Loading thumbnail…

Tutorial 3.1

This interactive scatter plot displays sepal length against petal length for the Iris dataset, with species differentiated by symbol shape and a corresponding legend. It loads data from a remote CSV and uses D3 v7 methods including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`. The visualization is built with ES6 modules, including custom axis and legend components, and dynamically fetches and parses the dataset using `csvParse` before rendering.

Eeedaraajay02@gmail.com
91% match
Loading thumbnail…

Fork of Scatter Plot

This example plots sepal length against petal length for the Iris Dataset, with each flower represented as a circle. The visualization demonstrates a reusable scatter plot module composed with custom axis and labeling functions. It uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins via `selectAll` and `join`. The code loads the CSV data with `fetch` and `csvParse`, then renders the plot across the full browser window, coloring points by species.

Rradhadevarapu
90% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length for three species. Each species is represented by a distinct symbol shape, with a legend showing the mapping between the categorical species variable and the corresponding shape. The visualization uses D3 v7, employing `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and custom modules for axes and legend rendering. Data is loaded from a remote CSV file and parsed using `csvParse`.

Vvenkatdinesh5010@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses SVG symbols from d3.symbol and d3.symbolsFill to differentiate species by shape, with a custom legend showing the shape-to-species mapping. The code imports from d3 modules (d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, d3.extent) to build scales, axes, and marks, while asynchronously loading and parsing the iris dataset from a remote CSV via d3.csvParse.

BBhavanaGIrni
90% match