Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot Tarun_b

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

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Tarun Bosupally

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.

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
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3.js scatter plot animates through three pairings of nutritional data from a CSV file of menu items: carbohydrates versus protein, carbohydrates versus total fat, and protein versus total fat. The code uses D3 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles with an SVG. A `setInterval` callback updates the x and y value mappings every two seconds, changing the chart’s title accordingly. The visualization employs a custom `scatterPlot` function and D3’s `selectAll` and `join` for efficient updates.

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

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays tree measurements—leaf width, trunk diameter, leaf length, and height—as colored circles, with species mapped to blue, red, green, or yellow. Built with D3 v6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Every two seconds, the plot cycles the x-axis variable among the four measurement columns, animating the data points’ positions. The data is loaded from a CSV file via `d3.csv` and parses numeric fields before plotting.

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

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes movie data from a CSV file, encoding each film’s runtime on the x-axis and its vote average on the y-axis. The chart uses SVG paths generated by `d3.symbol` to differentiate genres via a `scaleOrdinal` mapping to `d3.symbols`. Built with D3 v7, it loads data via `d3.csv` and dynamically creates scales and axes within a reusable `scatterPlot` function defined in the script.

TTarun Kumar Bosupally
79% match