Stock price display

100%

Stock price display

✓ Published2🌍 Public

Last edited Apr 25, 2022

Created on Apr 24, 2022

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.

AI-generated description

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

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Line chart saranya

This line chart displays Apple stock prices over time, sourced from a CSV file. It uses D3.js v4 to render an SVG visualization with a blue-to-yellow gradient line. The chart includes interactive mouseover and mousemove events that reveal a data point’s exact price via a tooltip circle and text, leveraging D3’s `scaleTime`, `scaleLinear`, `line`, and `bisector` APIs.

MMalempatiSaranya

86% match

Loading thumbnail…

Fork of Apple stock price display

This fork of the Apple stock price display visualizes historical stock values over time using an SVG line chart. A green-to-red linear gradient colors the line based on price range, and a hover interaction reveals a labeled circle showing the exact price at the cursor position. The visualization uses d3.v4 with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.bisector for mouse tracking. Data is loaded from a CSV file hosted on GitHub, and the chart updates dynamically via d3’s event handlers.

AAndrej38995

84% match

Loading thumbnail…

Line chart saranya

This chart uses a line graphic to track the daily price of Apple stock over time. The graph is built with D3.js v4, using a time-scaled x-axis and a y-axis that starts at zero. The line is drawn with a linear gradient fill, shifting from blue to yellow. Hovering over the chart reveals a tooltip that shows the exact price at the cursor’s location, using a bisector to find the nearest data point. The data is loaded from a remote CSV file, and the visualization is rendered as an SVG.

MMalempatiSaranya

83% match

Loading thumbnail…

Stock Price

This interactive visualization shows stock prices for various companies over time, using horizontal bar charts grouped by company symbol. Each panel displays the price distribution for a specific stock, with bars representing individual price points and a prominent zero line for reference. The chart is built with React and D3 v6, using D3's `scaleBand` for the categorical date axis and `scaleLinear` for the price axis. Data is loaded from a remote CSV file, and bar heights and positions are computed dynamically using these scales.

Ttrucntx007

79% match

Loading thumbnail…

MouseOverPrice

A line chart shows Apple's daily closing stock price over roughly a year, with an orange circle and a dollar-value label that follow the mouse cursor. The visualization uses D3 v3 with an SVG renderer, parsing tab-separated date and price data from a TSV file. A bisector finds the nearest data point to the mouse position, and a transparent overlay rectangle captures mouse events to update the focused position and text label.

BBAvlino

79% match