Price

100%

✓ Published0🌍 Public

Last edited May 4, 2022

Created on May 4, 2022

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.

AI-generated description

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

Similar vizzes

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

75% match

Loading thumbnail…

Amazon_stock_price

This visualization displays the average annual stock price of Amazon in US dollars over time, using a smooth line chart generated with D3.js v5 within a React framework. The SVG renders a line path with a basis curve, while axes are labeled "Year" and "Avg_Stock_Price_USD" via `axisLeft` and `axisBottom`. The data is loaded as CSV from a GitHub gist, with numeric parsing applied to both year and price fields, and the chart employs `scaleLinear` and `extent` to map domains.

Jjayavamsi

73% match

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

72% match

Loading thumbnail…

Polished Scatterplot with Menus

This scatterplot shows the average closing price of a product over time, with a smooth curve connecting data points. The visualization uses React to render SVG elements, with D3 scales and axes handling the temporal x-axis and linear y-axis. The chart pulls data from a CSV file via d3.csv, formats dates using timeFormat, and renders a natural curve through the line generator. The interface includes dropdown menus for filtering, though the main view emphasizes the polished, minimalist styling of the axis ticks and labels.

GGayan Priyadarshana

71% match

Loading thumbnail…

legend date

This scatterplot displays daily GrossAmount values over time, with each point colored by its price category through a categorical ordinal scale. The visualization includes an interactive color legend that highlights points matching the hovered value while fading others. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map date, price, and color encodings, rendering circles as SVG marks. Data comes from NOAA, loaded via `d3.csv`, with axes generated by custom `AxisBottom` and `AxisLeft` components.

EEnes Gök

71% match

Loading thumbnail…

Area Chart Data Visualization

This area chart displays Amazon's stock price over time, using a smooth, curved line and a gray shaded region beneath it to emphasize the trend. The visualization is built with D3 v5 within a React framework, rendering as an SVG. It uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `d3.line` and `d3.area` generators with `curveBasis` for smoothing. The data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are drawn using `axisBottom` and `axisLeft`.

AAditya Pujari

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

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

70% match