Skip to main content
SimilarExport ZIP
100%

Gist 5a00993a5372ab7fb1a3ce99a6d0e46b

✓ Published0🌍 Public
LLuisSevillano
Last edited Feb 3, 2018
Created on Feb 3, 2018

This chart is a line graph of Google's stock price over the summer of 2014, showing daily fluctuations in the closing price. It uses the `d3.js` library for rendering an SVG with a time-series line and a date-scaled x-axis. The data for each trading day is loaded from a CSV file that includes both price and volume. The visualization highlights the stock's downward trend and volatility during that period, with each data point clearly marked on the path.

AI-generated description

Similar vizzes

Loading thumbnail…

Line Chart with label

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.

RRajat Dangat
78% 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
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…

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
76% 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
76% match
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
75% match
Loading thumbnail…

Line Chart 4.0

This line chart visualizes daily closing stock prices from April 2007 to June 2008, with time on the x-axis and price in dollars on the y-axis. The SVG rendering uses D3 v4 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the path, while axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a tab-separated `data.tsv` file containing date and close columns, with the line styled in steelblue.

深深度碎片
74% match