Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This scatter plot shows the relationship between farm prices of potatoes and oranges in May 2019, with each point representing a date where both prices are available. The visualization uses D3.js v7 to render an SVG with linear scales for both axes, mapping potato prices on the x-axis and orange prices on the y-axis. The code leverages D3's `csv` loader to fetch the fruit dataset from a Gist, filters for the relevant month and products, then uses the custom `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` APIs to draw the chart and its axes.

AI-generated description

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This D3.js (v5) visualization displays the relationship between vegetable price and weight as a scatter plot, with each point colored by the first letter of the vegetable’s name. It includes axis labels, grid lines, and a tooltip on hover. The chart loads CSV data via `d3.csv` and renders with SVG, featuring interactive legend filtering by group and animated transitions through `d3.transition`. The layout is created using `d3.scaleLinear` for both axes and `d3.schemeCategory10` for color mapping.

NNita

77% match

Loading thumbnail…

Fruit and Veggies Price dataset

This visualization displays the Fruit and Veggies Price dataset, showing a bar chart of prices for a selected date (2019-05-19) and a scatter plot alongside a summary table and data table. The code fetches CSV data from a GitHub gist, then uses D3.js v6 to render the bar chart and scatter plot as SVG elements. The summary section displays file size, column count, and row count, while the HTML table lists all records.

Ffreyatran124@gmail.com

75% match

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between Total Cost and Total Profit from a 100 Sales Records dataset, loaded via `d3.csv` from a GitHub gist. Each circle represents a data point, with an interactive tooltip displaying the country and axis values on hover. The visualization uses D3.js v7 within a React framework, rendering SVG elements with a linear scale for both axes and applying a hover effect that changes point color to orange. The tooltip is implemented by appending an HTML div and manipulating its position and opacity through event handlers.

GGabriel Ing

74% match

Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This example displays stock price data for a vegetable-related dataset, plotting the Open, High, Low, and Close values over time from 2019. It uses a line chart with a brush-and-zoom interaction, allowing the user to select a time range and inspect price fluctuations across all four metrics. The visualization relies on D3.js APIs such as `d3.line`, `d3.brushX`, and `d3.zoom` to render the paths and manage the interactive focus and context panels. The data is loaded from a CSV file and rendered with SVG elements.

Vvaishnavgck@gmail.com

73% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

UUday Kiran

73% match

Loading thumbnail…

ICE-7 for Fruit and Veggies Price dataset

This visualization presents a three-part exploration of fruit and vegetable prices using a pie chart, a line chart, and an area chart. The pie chart shows the farm sell price distribution for products on 2019-05-19, with a legend generated using D3’s `scaleOrdinal` for color mapping. The line chart tracks strawberry farm prices over time, while the area chart displays farm price trends, both created using D3’s time-series and SVG path APIs. The data is loaded asynchronously from a CSV file via `fetch` and parsed manually.

Ffreyatran124@gmail.com

73% match

Loading thumbnail…

Fork of reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data, plotting Quantity on the x-axis and Price on the y-axis. It alternates between two halves of the dataset every five seconds, switching the displayed points and updating the axes and circles accordingly. The code uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` for coloring. The data is loaded from a CSV file, and the visualization renders in an SVG container with margins, axis labels, and animated transitions via `setInterval`.

Ssriram.official9@gmail.com

73% match