Apple Stock 2

100%

✓ Published0🌍 Public

Last edited May 11, 2026

Created on May 11, 2026

This interactive scatterplot visualizes simulated Apple stock price data, showing individual data points distributed across a two-dimensional space based on their x and y coordinates. Users can click on any circle to select it, which re-renders the visualization with the selected point highlighted. The React app loads data from a CSV file and uses the D3 `select` API alongside `useContainerDimensions` and `ResizeObserver` to render the SVG responsively. The visualization relies on `renderCircles` to draw and update the circular marks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Apple Stock2

This interactive dashboard displays Apple stock data across four switchable chart panels: a monthly close price line chart, a volume bar chart, a candlestick chart, and a histogram. The React application uses the ECharts library to render each panel from a parsed CSV file containing date, price, volume, and OHLC values. The interface provides a tabbed layout for switching between chart types, with all visuals updating from the same underlying dataset.

Yyinyiwen3589@gmail.com

85% match

Loading thumbnail…

Stock price display

This interactive line chart displays Apple stock prices over time, with a color gradient from red to green indicating value changes. Users hover over the chart to see a tooltip showing the exact price at any point. The visualization uses D3.js v4 within a React framework, reading CSV data and rendering with SVG. It employs `d3.scaleTime`, `d3.line`, and a bisector for mouse interaction, with a transparent overlay rect capturing hover events to control the focus circle and text label.

AAdvait Maduskar

81% match

Loading thumbnail…

Stock price display - Apple

This example shows the historical stock price of Apple as a line chart, with a vertical gradient stroke transitioning from red (low values) to green (high values). It includes interactive hover functionality: moving the mouse over the chart reveals a black circle marker and a text label displaying the exact price at the nearest data point. The visualization is built using D3.js v4, leverages SVG for rendering, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded from a CSV file containing date and price columns, and the chart uses a bisector for efficient nearest-point lookup during mouse movement.

TToly

80% match

Loading thumbnail…

Reusable

This example displays a reusable scatter plot of Apple stock close prices over time, using a subset of the first 100 data points from the plotly finance-charts-apple CSV. The visualization shows a blue dot for each sample, mapped with index on the x-axis and price on the y-axis, along with labeled axes. The code defines a `scatterPlot` function that accepts SVG and layout properties, using `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and appends circles to the SVG with D3 v7.

Hharshithamiriyam@gmail.com

78% match

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

78% match

Loading thumbnail…

Apple stock price display

A line chart displays Apple stock prices over time, using a red-to-green gradient to encode the value range from low to high. The chart includes axes for dates and price, plus an interactive tooltip that appears on mouseover, showing the precise price at the cursor position via a circle marker and text label. The visualization is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.bisector` for hover detection. Data comes from a CSV file loaded with `d3.csv`, and the SVG rendering includes a linear gradient defined with `linearGradient`.

AAdvait Maduskar

77% match

Loading thumbnail…

Fork of Fork of Stock price display

This interactive line chart displays Apple stock prices over time, spanning from 1977 through 1982. The visualization uses a green-to-red vertical gradient to encode price levels, with higher values appearing greener and lower values redder. Users can hover over the chart to see a tooltip with the exact price at any date, indicated by a black circular marker that tracks the cursor along the line. The chart is built with D3.js v4 and React, reading data from a remote CSV file, and renders as an SVG with a bisector-based search to find the closest data point to the mouse position.

Ssitaramchallapalli

76% match

Loading thumbnail…

Capacity Constrained Point Distribution on Data (line chart)

A line chart of Apple stock prices (closing values from May 2012 to March 2011) is overlaid with colored circular sites that reposition via an iterative capacity-constrained point distribution algorithm. The algorithm, based on Michael Balzer’s work, swaps data points between site clusters to balance spatial occupancy. The visualization uses d3.v4 with d3.line, d3.axisBottom, d3.axisLeft, and d3.voronoi, rendering SVG circles and polygons with animated transitions via d3.interval.

PPhilippe Rivière

75% match