Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Tarun Bosupally

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Mar 27, 2024
Created on Mar 27, 2024

This reusable scatter plot, built with D3.js v7, visualizes the relationship between fruit weight and sweetness. It loads its data from a CSV file and displays each fruit as a steel-blue circle, with the x-axis representing weight and the y-axis representing sweetness. The plot uses linear scales, bottom and left axes, and SVG rendering to display the data points. It is structured as a reusable chart function, inspired by the "Towards Reusable Charts" pattern, which allows it to be easily integrated into other projects.

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 Tarun_b

This interactive scatter plot visualizes fruit data loaded from a CSV file, plotting Weight against Sweetness. The visualization is built using a reusable chart module within the D3 v7 framework. The `scatterPlot.js` module defines a custom function that employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for axis rendering, and SVG elements for the plot. Data is fetched and parsed asynchronously with `d3.csv`, and the chart dimensions are set to fill the browser window. The points are rendered as steelblue circles with a fixed radius, demonstrating a clean, minimal design.

TTarun Kumar Bosupally
92% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot BT

This interactive scatter plot visualizes fruit data loaded from a CSV file, showing relationships between variables like retail price and yield. Points appear as different shapes—circles, triangles, and squares—based on the yield value. The x-axis automatically cycles through numeric columns every two seconds, animating the chart to compare different data dimensions. Built with reusable D3 code, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG paths for point shapes.

TTarun Kumar Bosupally
86% match
Loading thumbnail…

Fork of Fork of vamshi scatter

This scatter plot displays the weight of various fruits, with each fruit category plotted along the x-axis and its corresponding weight in grams on the y-axis. The code uses D3.js v7 to fetch data from a remote CSV file via `d3.csv`, then maps the categorical fruit names to a band scale (`d3.scaleBand`) and the numeric weights to a linear scale (`d3.scaleLinear`). Circles are rendered as SVG elements representing each fruit’s weight. The chart includes rotated x-axis labels through `d3.axisBottom` and labeled axes, with the styling applied via CSS classes.

Kkotlavamsireddy@gmail.com
79% match
Loading thumbnail…

tarun Scatter Plot

This scatter plot visualizes the relationship between calories and ratings across a cereal dataset, with dot size encoding sugar content. It shows how nutritional factors correlate with consumer ratings. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for axes, `axisLeft`/`axisBottom` for ticks, and circle elements for data points. Data is loaded from a remote CSV file, with values converted to numbers and dot radius scaled by sugar content.

TTarun Kumar Bosupally
78% 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
76% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents three separate scatter plots visualizing nutritional information from a menu items dataset, comparing carbohydrates, protein, and total fat across different food items. Using D3.js v7, each plot renders with SVG circles, band scales for the categorical menu items along the x-axis, and linear scales for numeric nutritional values on the y-axis. The code loads the CSV data with `d3.csv`, then calls a reusable `createScatterPlot` function to generate each chart with rotated axis labels, titles, and rotated text ticks.

Mmanthenasirisha06@gmail.com
76% 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
76% match
Loading thumbnail…

Reusable Scatterplot with D3.js

This example demonstrates a reusable scatterplot built with D3.js v6 and React, displaying two sample CSV datasets that users can toggle between via a button. The visualization shows grouped data points as colored circles, with linear scales mapping X and Y values to SVG coordinates, ordinal color encoding for group categories, and axes with titles. Rendering relies on SVG elements and D3’s axis, scale, and CSV parsing APIs, while the legend updates based on the active dataset’s group domain.

Hharsha
75% match