Fork of Fork of Stock price display

100%

Fork of Fork of Stock price display

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

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.

AI-generated description

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

Similar vizzes

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

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

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

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

83% match

Loading thumbnail…

Fork of D3 Line Chart - 11641166

This example visualizes Apple Inc.’s average annual stock price from 2000 to 2023 as a single line chart. It uses d3.line, d3.scaleTime, and d3.scaleLinear to map years and prices, with axes generated via d3.axisBottom and d3.axisLeft. The SVG renders gridlines, labeled axes, and a purple stroke path. Data is loaded from a CSV using d3.csv, and styled with custom CSS classes.

JJasvitha Allamsetty

81% match

Loading thumbnail…

Fork of D3 Area Chart - 11641166

This visualization presents Apple Inc.'s average stock price from 2000 to 2023 using a combined line and area chart. The SVG rendering uses D3 v7 to load CSV data, which is parsed and scaled with `scaleTime` for the X-axis and `scaleLinear` for the Y-axis. Grid lines are generated via `axisBottom` and `axisLeft`, while the data is drawn using `d3.line()` and `d3.area()` generators. The area chart is filled with a light blue color, and the line appears as a thick dark stroke, with axis labels and rotated Y-axis text enhancing readability.

JJasvitha Allamsetty

80% match

Loading thumbnail…

Fork of React + D3 Viz Starter

A line chart tracks IBM’s daily closing stock prices throughout March 2020 using D3.js v6 within a React framework. The visualization loads data from a local CSV, maps dates and closing values to x- and y-axes, and draws a smooth monotone curve. Animated transitions sequentially reveal the line’s stroke, followed by points and text labels that show each day’s price, colored green or red based on daily change. The SVG rendering includes margin containers and axis ticks styled with cornflowerblue, demonstrating a reusable VizContainer component.

MMarcus

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

78% match