Percentage Change II

100%

Percentage Change II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 14, 2015

This visualization depicts daily stock price changes as a percentage relative to the initial value, using a logarithmic y-axis to emphasize proportional shifts. A black line traces the full time series, while the area beneath it is filled with two distinct colors—green for periods above the baseline and purple for those below—achieved through clipping rectangles defined in SVG `<defs>`. The chart uses D3 v3’s `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` APIs, with data loaded via `d3.tsv` from a tab-separated file. Tick labels format the change as percentages, and the axis includes a subtle highlight for the zero-change tick.

AI-generated description

A variation of the percentage change example using clipping to apply different colors for positive change (green) and negative change (purple).

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Percentage Change

This visualization tracks the hypothetical performance of an AAPL investment from January 2008, showing the percentage change in stock price over time on a log scale. The chart uses D3 v3 with an SVG line plot, where the y-axis displays relative price changes (e.g., +100%, -50%) via a custom tick formatter. A log scale accurately represents proportional gains and losses, while a secondary linear scale generates uniformly spaced axis ticks. The data comes from a TSV file containing daily closing prices.

Mmbostock

76% match

Loading thumbnail…

Price

This visualization shows the historical percentage net change in price for a single item, plotted over time as a sparkline. The data is fetched from a JSON file hosted on GitHub and rendered as an SVG path using React and D3 v7. The code uses d3.scaleTime and d3.scaleLinear to map dates and percentage values to the chart’s 500-by-200 pixel layout, while d3.line generates the path geometry. The x-axis is time-scaled and the y-axis is linear, with the path styled as a transparent fill and black stroke.

MMark Lam

75% match

Loading thumbnail…

Untitled

This visualization displays the relative performance of multiple stocks over time, with lines for each stock colored according to a categorical palette. The y-axis uses a logarithmic scale to show the ratio of each stock’s current value to its initial value, enabling comparison of percentage changes across different price levels. The chart is built with D3.js v6 within a React framework, using `d3.scaleLog`, `d3.line`, and `d3.axisLeft` with gridlines, and is rendered as an SVG with animation support. Data is fetched from a CSV file containing stock prices and volumes.

Yyinghao11

74% match

Loading thumbnail…

Stock Price Change

This chart displays how multiple stock-related values change over time as a stacked area graph. Using d3.csv to load a wide-format dataset, it maps years on the x-axis and numerical point values on the y-axis. The code employs d3.stack to aggregate six categories, which are rendered as colored SVG paths via d3.area, with a scaleOrdinal providing the palette. Axes are generated with scaleTime, scaleLinear, and d3.axisBottom/axisLeft, while labels for “Year” and “Points” are appended as SVG text elements.

YYashashvi Singh

74% match

Loading thumbnail…

Daily Return Graph

This chart displays the daily return percentage of a stock over time as a blue line plot. It uses D3 v7 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and render axes and the line using `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. The visualization presents the data in an SVG on a dark-themed background, showing how returns fluctuate across the trading period.

SSheela2930

73% match

Loading thumbnail…

Untitled

This visualization combines a line chart with a filled area to display stock prices over time. The chart uses a time-series x-axis and a linear y-axis, with the area under the curve highlighted in green to emphasize the cumulative trend. Data is loaded from a CSV file using `d3.csv`, while scales and axes are constructed with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The line and area paths are generated using `d3.line` and `d3.area` with a basis curve, rendered as SVG within a styled HTML page.

Ssri7harsha

71% match

Loading thumbnail…

fresh block

The visualization shows a time-series area chart of stock prices, with the area colored red for values above 150 and blue for values below 150, highlighting threshold crossings. It uses D3.js (v3) with `d3.svg.area()`, `d3.time.scale()`, and `d3.svg.axis()` to render the SVG. Data is loaded from an external TSV file and parsed with `d3.time.format`. The code splits the dataset into contiguous segments based on the price threshold, then draws each segment as a separate colored area path. Axes are added for time and price, with the y-axis labeled “Price ($)”.

AAaronWitter

71% match

Loading thumbnail…

Fork of Visualizing Percentages

This visualization shows the current day of the year as a percentage using three different progress indicators: a horizontal bar, a donut, and a gauge. The percentage is computed from today’s date using `d3.timeFormat` to compare the day-of-year against the total days in the year. Each indicator is built with React components and SVG paths generated by `d3.arc`, with progress values driving the bar width, donut arc end angle, and gauge sweep. The layout is arranged using SVG groups with transforms, and the background container is toggled via a margin rect.

Cckp8

71% match