Fork of Fork of vamshi scatter

100%

Fork of Fork of vamshi scatter

✓ Published0🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of vamshi

This bar chart visualizes the weight of various fruits from an extended sample dataset. The chart uses steelblue bars on a Cartesian plane, with the fruit names on the x-axis and their corresponding weights on the y-axis. Hovering over a bar changes its color to a lighter royal blue. The visualization is built with D3 v7, using `d3.csv` to load the data, and `d3.scaleBand` and `d3.scaleLinear` to map the categorical and continuous dimensions. Axis labels are added manually, and bar height represents the weight value.

Kkotlavamsireddy@gmail.com

86% match

Loading thumbnail…

Fork of vamshi

Kkotlavamsireddy@gmail.com

86% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example shows a static bar chart of a fruits dataset, displaying categorical values along the x-axis and numeric magnitudes on the y-axis. It loads a remote CSV file using `d3.csv` and renders the visualization as an SVG on the page. The code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the value axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The chart explicitly constructs bars with SVG `rect` elements, while the data originates from a GitHub-hosted CSV file.

Kkotlavamsireddy@gmail.com

82% match

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

80% match

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

79% 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

78% match

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Mmadipadiga.raviteja@gmail.com

76% 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

76% match