Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot with d3.js

✓ Published0🌍 Public
Aakshayvenishetty1437
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

This example demonstrates a reusable scatter plot function built with D3 v6, rendered as SVG. It maps quantitative x and y values to positions using `d3.scaleLinear` and draws circles as data points, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code uses the D3 selection and enter-append pattern to bind sample data, and includes labels for both axes. The plot is encapsulated within a `createScatterPlot` function, allowing it to be called with custom data and dimensions. Loading D3 via UNPKG, the example also shows an ES6 module import in `myMessage.js`.

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…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Ssaipaidipalli
85% match
Loading thumbnail…

Scatter Plot with d3.js

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

Aakshayvenishetty1437
84% match
Loading thumbnail…

Reusability_Scatter_Plot

This example demonstrates a reusable scatter plot built with D3.js, showing how the same chart structure can be applied to different datasets through a configurable function. The visualization renders circles positioned along x and y axes based on numeric values, with gridlines and a clean white background. It uses D3’s selection and scale APIs, including `d3.scaleLinear` for mapping data to pixel coordinates and `d3.axisBottom`/`d3.axisLeft` for ticks, while CSS transitions smooth hover effects on the rectangles. The code is structured as a reusable module, making the scatter plot adaptable for various input data.

Sshabanasyed2266@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a row of twenty circles evenly spaced across the screen, all centered vertically. The visualization uses D3.js version 6.7.0 to bind an array of data points to SVG circle elements, setting each circle’s x-coordinate, y-coordinate, and radius based on the data. The code pulls data from a simple generated array via `d3.range`, and positions the circles using the `select`, `selectAll`, and `join` methods. The page is styled with a hidden overflow and a custom Google font, though the dataset referenced in the README is not actually loaded in the running code.

Kkhalil-ryu
82% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3 and React, visualizing the classic Iris dataset. It demonstrates how a modular chart component can be configured with data, axis titles, and margins. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data to SVG coordinates, and renders circles with a fixed radius. The chart is driven by an asynchronous fetch of a CSV file, parsed into numeric columns, and displayed using the SVG rendering approach.

KKaustav Sen
82% match
Loading thumbnail…

Resuable D3 Scatter Plot

This reusable scatter plot component renders a static 2D chart, plotting a set of points against numerical x and y axes using D3.js scales and SVG. The code defines a single point dataset and draws circles with a default radius and fill color, while displaying axis labels and tick marks via d3.axisBottom and d3.axisLeft. The chart is built as a configurable function, allowing users to pass custom data, margins, and dimensions for reuse. The accompanying HTML file is minimal, showing only a placeholder message, and does not include any interactive or animated behaviors.

UUzoemeka Okechukwu Innocent
81% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot using D3 v6, rendering the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.symbols` to encode species as distinct symbol shapes, and `d3.axisLeft`/`d3.axisBottom` for axes. The plot is built as a modular factory function that accepts configurable accessors for dimensions, margins, and symbol size, then renders SVG paths via `d3.select` and `join`. Data is loaded asynchronously from a GitHub gist CSV.

SSubhendu Karmakar
81% match