Skip to main content
SimilarExport ZIP
100%

Line Chart with label

✓ Published1🌍 Public
RRajat Dangat
Last edited Mar 31, 2021
Created on Mar 31, 2021

A step-shaped line chart displays Google stock closing prices (GOOGL) from March 2016 to March 2021, with a hover tooltip showing the exact price and date. The visualization uses React with SVG rendering, relying on d3.scaleTime and d3.scaleLinear for axes, d3.line with curveStep for the path, and d3.bisector for nearest-point lookup. Interactive tooltips are implemented through React state and mouse events, while the multiFormat time axis adapts its tick labels based on date granularity. Data loads asynchronously via d3.csv from a remote gist.

AI-generated description

A scatter plot of Data Canvas Sense Yout City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Axis Tooltips

This example shows a line chart of Google stock data, tracking daily closing prices over time. It uses a React-based SVG visualization with D3 scales for mapping data to coordinates. The chart features interactive axis tooltips that appear on mouse movement, displaying detailed date and price information. The code implements custom tooltip paths for both axes, uses d3.bisector for data lookup, and includes a multi-format time formatter for adaptive tick labels. The data source is a CSV file containing five years of historical stock data for GOOGL.

RRajat Dangat
89% match
Loading thumbnail…

Line Chart with label V2

This line chart displays Google stock prices (open, high, low, close, and volume) over time from March 2016 to March 2021, using data loaded from a CSV via `d3.csv`. Built with React and d3.v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and a `line` generator with `curveStep` to render the closing price trajectory. A crosshair cursor with `bisector` and `xScale.invert` enables interactive tooltips showing detailed values for each date.

RRajat Dangat
86% match
Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart tracking the daily closing price of Google stock over time. The visualization uses a smooth natural curve to connect price points, with circular markers at each data value and interactive tooltips that display the date when hovered. Built with React and D3 v5, the chart renders as SVG and uses `scaleTime` and `scaleLinear` for axes, while `d3.line` with `curveNatural` generates the path. Data is loaded from a CSV file via `d3.csv` and styled with a teal color scheme and Poppins font.

Nnghosh319
80% match
Loading thumbnail…

ICE 7 line chart Likith

This visualization displays Google’s stock price over the last 10 years using a line chart. The x-axis encodes time by year, while the y-axis shows stock value, with grid lines and axis labels styled via CSS. Built with D3 v5 in a React framework, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded from a CSV file hosted on GitHub and parsed into JavaScript `Date` objects before drawing.

Llikith1266
77% match
Loading thumbnail…

Line chart w. gradient

A line chart shows Google's stock price over time, with the line colored by a red-to-blue gradient that switches sharply at the midpoint of the vertical axis. The visualization uses Vega-Lite, a high-level grammar of charts, to parse the specification and render the data from the stocks.csv source. The gradient is defined directly in the mark's color property as a linear gradient with offset stops at 0, 0.5, and 1, transitioning from red to blue. The temporal axis plots dates on the x-channel while price is mapped to the quantitative y-channel.

PPatrick Wojda
76% match
Loading thumbnail…

Line chart w. gradient

A line chart shows Google's stock price over time, with the line colored by a red-to-blue gradient that switches sharply at the midpoint of the vertical axis. The visualization uses Vega-Lite, a high-level grammar of charts, to parse the specification and render the data from the stocks.csv source. The gradient is defined directly in the mark's color property as a linear gradient with offset stops at 0, 0.5, and 1, transitioning from red to blue. The temporal axis plots dates on the x-channel while price is mapped to the quantitative y-channel.

PPatrick Wojda
76% match
Loading thumbnail…

Line graph

A line graph displays daily high stock prices for CS Bank over time, with a red-to-green vertical gradient applied to the stroke. The chart includes labeled axes, a title, and a hover interaction that reveals the exact price at any point via a movable circle and text label. Built with React and D3.js v4, it loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the line using `d3.line` with a `linearGradient` fill. Interactive tooltips rely on `d3.bisector` for nearest-date lookup.

SSheela2930
75% match
Loading thumbnail…

Area Chart

This area chart visualizes Google's monthly closing stock prices. The D3.js v7 code loads data from a CSV file via UNPKG and uses the `csv()` function to parse it. The visualization employs `scaleTime` and `scaleLinear` for the axes, and the `area()` generator with a `curveBasis` curve to create the smooth, filled area path. The SVG rendering includes styled tick marks, axis labels, and a title, all formatted with `timeFormat` and CSS.

SSanchay
75% match