Fork of Reusable D3 Scatter Plot test

100%

Fork of Reusable D3 Scatter Plot test

✓ Published0🌍 Public

Last edited Aug 3, 2024

Created on Aug 2, 2024

This example presents a reusable scatter plot that visualizes data read from a Google Sheets document via the Google Visualization API. The chart maps two selected spreadsheet columns to x and y positions using D3’s `scaleLinear`, rendering circles with an SVG `join` pattern. Axes are drawn with `axisLeft` and `axisBottom`. The implementation follows a reusable chart pattern, allowing configuration of data, margins, radius, and value accessors.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

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 presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

AAmrit Adhikari

81% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width on the x-axis against sepal length on the y-axis, with each flower represented by a circle. It uses a reusable chart pattern where the scatter plot function is configured via chained setter methods for dimensions, margins, and data accessors. The visualization is rendered as SVG, with axes generated using d3-axis and scales created with d3-scale. The code leverages d3.csv for data loading and d3.select to append the SVG to the page.

DDaniel Eduardo Contro

80% match

Loading thumbnail…

Reusable Scatter Plot with d3.js

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`.

Aakshayvenishetty1437

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This responsive D3 scatter plot visualizes the Iris Dataset, mapping sepal measurements to x/y coordinates with a fixed radius. It demonstrates a reusable charting pattern by encapsulating scales, axes, and circles within a configurable `scatterPlot` function. The SVG rendering uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to generate axes, while `d3.csv` loads remote data. The plot is drawn on an `svg` element sized to the browser window, with styling applied via the Share Tech font.

Ssirenajbpearl@gmail.com

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays individual student math scores against science scores from a CSV dataset, with each circle representing one student. The code builds the chart using D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, rendered as SVG within a full-window container. A custom `scatterPlot` generator function uses getter-setter methods to configure width, height, data, margins, and circle radius, while the axes and labels are added inside the chart’s rendering loop.

Bbharathavulapati@gmail.com

79% match