Fork of Scatter Plot

100%

Fork of Scatter Plot

✓ Published1🌍 Public

Last edited Feb 14, 2025

Created on Feb 14, 2025

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes country data by plotting total cost on the x-axis against total profit on the y-axis, with each point representing a sales record. Hovering a circle changes its fill to orange and displays a tooltip with the country, cost, and profit values, implemented using `d3.select` and event handlers. The chart uses `d3.csv` to load remote data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to render scales. Data points are drawn as SVG circles via the `join` operator, with a legend title styled using a CSS class.

Hhquazza@gmail.com

86% match

Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This example demonstrates a clustered bubble chart with interactive tooltips, using sales data from a CSV file. It visualizes two facets of the data side-by-side: one chart sizes bubbles by "Total Profit" and another by "Total Cost", with each bubble labeled by country. The visualization uses D3 v7's `d3.pack()` layout algorithm to create the cluster arrangement, and implements custom tooltips via HTML elements that display country and profit or cost details on mouseover. The code employs D3's `d3.csv()` to import data from a remote gist, and renders resulting SVG circles and text labels within a React framework, with styling applied through CSS.

GGabriel Ing

80% match

Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This visualization presents a clustered bubble chart where each circle represents a sales record, with the circle’s area encoding the total profit and its cluster determined by the country of sale. Built with D3 v7 and React, it loads a CSV dataset from a GitHub gist, then uses `d3.pack()` with a hierarchy and sum operation to arrange the circles into a packed layout. Interactive tooltips appear on hover, displaying the country and profit via the `mouseover` event, updating an HTML `#tooltip` element with absolute positioning. The circles and country labels are rendered as SVG elements, with circle size scaled by profit to reveal regional sales patterns.

GGabriel Ing

80% match

Loading thumbnail…

Fork of Untitled

This example shows a 2D scatter plot of product cost versus selling price, with each product represented as a small purple circle. The x-axis encodes cost price and the y-axis encodes selling price, both using linear scales. The code loads CSV data from a GitHub gist via `d3.csv` and renders the plot as SVG circles using `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes. Despite the title mentioning "3D," the visualization is strictly two-dimensional, with axis labels added via HTML divs.

VVineela Reddy

79% match

Loading thumbnail…

Fork of Fork of Scatter plot

A scatter plot visualizes company financial performance from 2018 to 2030 using CSV data, encoding Revenue, Expenses, and Profit as colored circles whose size reflects employee count. D3 v7 API calls including `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom` render the SVG chart, while mouseover events trigger a positioned tooltip showing metric details. A legend distinguishes the three financial metrics, and a secondary legend maps circle size to employee numbers.

Ssowjanya

79% match

Loading thumbnail…

Fork of Fork of Fork of d3.js project

This scatterplot displays the relationship between Sales and Profit for five products, with each circle representing a product and positioned according to its sales and profit values. The visualization uses D3.js v3, loading data from a CSV file via `d3.csv` and rendering an SVG with `d3.select`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with linear scales (`d3.scaleLinear`) mapping the data ranges to the 500×400 pixel canvas. Steelblue circles mark the data points, while axis labels identify the measured variables.

Ssowjanyateppali4202@gmail.com

79% match

Loading thumbnail…

Fork of Tidied up Bubble Chart

This example shows the total profit from a sales records dataset, grouped by region and visualized as a bubble chart, where each circle’s area encodes profit and its color encodes region. The chart uses D3’s `pack` layout for hierarchical bubble clustering and `scaleOrdinal` for color mapping. Hovering over a circle triggers a tooltip with the country name and profit value, implemented via D3’s selection and event handling. The visualization renders to an SVG canvas within a React framework, using `d3.csv` to load and parse the external data file.

GGabriel Ing

78% match

Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales records by country, with circle size representing total profit and color encoding country. Each bubble displays its country name as a label. The visualization uses D3 v7's `d3.pack` layout and `d3.hierarchy` to calculate circle positions and sizes from the CSV data. Interactive tooltips appear on mouseover using HTML and D3 event handlers. A save button clones the SVG and downloads it as a file, preserving computed styles. Data is loaded via `d3.csv` from a gist URL, and the chart is rendered as an SVG in a React-based HTML page.

GGabriel Ing

78% match