Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot with D3.js

✓ Published0🌍 Public
HHemanthh81
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This example demonstrates a reusable scatter plot built with D3.js that visualizes the Iris dataset, mapping sepal length and sepal width for each flower specimen. The code loads data from a remote CSV file using `d3.csv`, converts numeric columns, and constructs an SVG chart with `d3.scaleLinear` for the axes. It uses `d3.axisBottom` and `d3.axisLeft` to render the scales, and appends circles with a steelblue fill to represent data points.

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…

Reuseable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js, visualizing the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to render the ticks and labels. Circles are drawn as SVG elements with dimensions that adapt to the full browser viewport, using the `d3.select` and `join` pattern for efficient data binding.

UUzoemeka Okechukwu Innocent
93% match
Loading thumbnail…

Reusable Scatter plot

This example demonstrates an interactive scatter plot of the Iris dataset, cycling through combinations of sepal and petal measurements on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it loads CSV data via `d3.csv`, uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, and animates axis changes with `setInterval`. The SVG also includes a custom color legend for species and styled axis labels.

HHemanthh81
92% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim
92% match
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, plotting sepal length against petal length for each flower variety. The chart uses D3.js v7 with SVG rendering to display circles representing individual data points, with axes scaled linearly from zero to the maximum attribute values. The implementation defines a reusable `scatterplot()` function that accepts a selector, data, and two attribute names, enabling the same visualization logic to be applied to different data fields. The JavaScript code leverages `d3.csv()` for data loading, `d3.scaleLinear()` for coordinate mapping, and D3 axis generators to create the chart.

FFande Workspace
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot visualizing the Iris Dataset, with petal length mapped to the x-axis and sepal length to the y-axis. The implementation uses D3's `scaleLinear` for coordinate scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for labeled axes. The code demonstrates a custom `scatterPlot` function that accepts configurable parameters like dimensions, margins, data, and value accessors, enabling flexible reuse across different datasets. The plot renders as an SVG with circles sized by a configurable radius parameter, and the dataset is loaded via D3's `csv` function from a remote source.

Jjmetzg11alpine
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris Dataset, displaying measurements like petal width and sepal length as colored circles. It cycles through different column pairs every two seconds, animating the axes and points to show relationships between various flower attributes. The chart uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function that follows the reusable chart pattern. Data loads via `csv` from a GitHub Gist, and the SVG rendering updates smoothly as the selected variables change.

AAkrutiKhurana2103
91% match
Loading thumbnail…

Reusable scatter plot

This example demonstrates a reusable scatter plot component built with D3.js, visualizing the Iris dataset. The plot maps petal width to the x-axis and sepal length to the y-axis, with species encoded through distinct SVG symbols. The implementation uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and the `join` operator to create a flexible, configurable chart. The iris data is loaded from a CSV file, and the SVG rendering adapts to the full browser window dimensions.

Yyaswanthsen
91% match
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot built with D3 v6, displaying Iris flower measurements with petal length on the x-axis and sepal length on the y-axis. The visualization loads CSV data from a GitHub repository and uses a custom `scatterPlot()` function that encapsulates scales, axes, and labels through a configurable API with methods like `.width()`, `.data()`, and `.xValue()`. The SVG rendering includes axis labels and animated circle elements, showing how D3's modular functions enable flexible, reusable chart components.

UUVarshaReddy
91% match