Skip to main content
SimilarExport ZIP
100%

Reusable Scatterplot

✓ Published0🌍 Public
UUVarshaReddy
Last edited Jul 20, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

A reusable scatterplot function visualizes calorie intake against body weight for five individuals, encoding each person as a violet circle with a text label. The chart constructs an SVG renderer using D3 v6, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for gridlines. The data is hardcoded as an array of objects with person, weight, and calories fields, and the function accepts both the dataset and a container selector, demonstrating a modular approach to D3 chart creation.

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…

Fitness Data Reusable Scatter Plot

This reusable scatter plot visualizes fitness tracking data, plotting relationships between calorie intake, protein intake, and mental wellbeing scores from a CSV dataset. The chart uses D3 v7 to render SVG circles with configurable axes, margins, and data accessor functions. The code demonstrates a modular chart factory pattern with setters for width, height, and value fields, allowing users to easily swap which metrics appear on each axis. Axis labels update dynamically based on the selected fields, while steelblue semi-transparent points highlight distribution patterns without animation.

Ssanthoshdachepally333@gmail.com
80% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot visualizes cereal data, mapping sugar and calorie values to x- and y-axes with animated transitions that cycle through nutritional columns. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while `setInterval` triggers periodic updates of the x-value accessor to animate between attributes. The chart is constructed via a configurable `scatterPlot()` factory function, with SVG circles and axes rendered from the Iris Dataset.

Ssreeramyamini@gmail.com
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery item presents a fork of a reusable D3 scatter plot that visualizes nutritional data from a Food dataset, plotting variables like Protein and Calories as points. The chart cycles through different x-axis dimensions—Calories, Carbohydrates, Fat, and Protein—every two seconds using `setInterval`, updating the visualization with animation. Built with D3 v6, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined and updated dynamically. The implementation follows a reusable chart pattern, using closures and setter functions to configure the plot’s properties.

Mmounishnaidu96@gmail.com
79% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the diabetes dataset, mapping glucose, BMI, age, and blood pressure attributes to axes. The visualization cycles through different x-axis metrics every two seconds using `setInterval`, while keeping BMI fixed on the y-axis. Built with d3.v6, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with `selection.join` to bind circles to data points. The D3 module pattern via `scatterPlot()` enables configurable width, height, margins, and radius, rendering as animated SVG with steelblue circles on a light gray background.

Vvedasrivarma13@gmail.com
78% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Ssrivalliwuyyuru
78% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot displays the relationship between calorie content and price for inventory items, with each circle positioned along the x- and y-axes according to those numeric values. Built with D3 v6, the visualization loads a CSV file and maps its fields to linear scales, using `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels. The SVG output renders circles with a fixed radius and steel-blue fill, while axis titles clarify the measured variables.

Rr79162810@gmail.com
77% match
Loading thumbnail…

Santhosh Dachepally

A reusable scatter plot displays the relationship between calorie intake and protein intake from a fitness progress dataset, with animated points transitioning from the center and color-coded by a continuous scale. Built with D3 v7, the visualization uses a modular `scatterPlot` function that constructs linear scales, axes, and a color legend. The SVG rendering includes styled circles with hover effects, while CSS handles transitions, and data is loaded via `d3.csv` from a GitHub-hosted source.

Ssanthoshdachepally333@gmail.com
77% match
Loading thumbnail…

Reusable Scatter plot Presentation

This example demonstrates a reusable scatter plot visualization that animates through different cereal data attributes on the x-axis, including cups, sugars, sodium, and fat. The visualization loads data from a CSV file using D3's `csv` function and employs a custom ES6 module (`scatterPlot.js`) that uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The scatter plot displays circles colored by rating values (red, orange, green) to indicate low, average, and good ratings, with an animated `setInterval` updating the x-axis attribute every few seconds. The SVG rendering includes custom legends, axis labels, and a title styled with Google Fonts.

Ppjdhungana@gmail.com
77% match