Stock Price Change

100%

Stock Price Change

✓ Published0🌍 Public

Last edited May 21, 2022

Created on May 21, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

78% match

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930

77% match

Loading thumbnail…

stock

This visualization animates the high prices of banking stocks over time, first drawing each stock’s line progressively, then transforming the chart into a horizon graph by stacking and compressing multiple area layers with distinct fill colors. It uses D3 v3’s `d3.svg.line`, `d3.svg.area`, and `d3.svg.axis` to render SVG paths, with transitions driven by `d3.timer` and `setTimeout`. Data is loaded from a CSV file via `d3.csv`, nested by symbol, and sorted by maximum price.

SSheela2930

76% match

Loading thumbnail…

DataVizTP3_StackedArea

This stacked area chart visualizes monthly stock prices for multiple companies (MSFT, AMZN, IBM, AAPL) from 2000 to 2010, using a dataset loaded from a CSV file. The chart shows how each company’s price contributes to the total across time, with colored layers and a legend identifying each symbol. Built with D3 v4, it uses `d3.stack()`, `d3.area()`, and `d3.nest()` to structure the data, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` handle scaling and colors. SVG paths render the areas, and axes are added with `d3.axisBottom()` and `d3.axisLeft()`.

KKylaste

75% match

Loading thumbnail…

Bar Graph

This example shows a bar graph of stock prices per year from 2011 to 2016, with bars colored steelblue and labeled axes for year and value. It loads data from a CSV file using `d3.csv`, converts string values to numbers, and renders the chart as SVG. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Bar widths are slightly reduced by 5 pixels, and x-axis labels are rotated 45 degrees for readability.

NNukaShravanKumar

75% match

Loading thumbnail…

Stock of Amazon

This example visualizes Amazon’s average annual stock price as a blue area chart over time, with red titles and axis labels. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render smooth SVG paths. Data is loaded via `d3.csv` from a public GitHub gist, and the chart includes grid lines, tick formatting, and rotated y-axis labels.

Jjayavamsi

74% match

Loading thumbnail…

stock

This visualization presents a comparative analysis of banking stock opening prices over time, with each stock plotted as a separate line chart arranged vertically. The animation begins by progressively drawing each line, then transitions to filled area charts beneath them, using a categorical color palette. Built with D3.js v3, the code employs `d3.svg.line` and `d3.svg.area` for the graphics, `d3.time.scale` for the date axis, and `d3.timer` for the animated draw sequence. Data is loaded from a CSV file containing stock symbols and their daily opening values.

SSheela2930

74% match

Loading thumbnail…

Percentage Change II

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.

Mmbostock

74% match