Untitled

100%

✓ Published0🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

This interactive banking dashboard visualizes daily closing prices for multiple bank stocks over time, with a dropdown menu that filters the chart to show a single stock or all groups. The visualization uses React with D3 v4, rendering an SVG line chart with a time-scaled X-axis, linear Y-axis, and a categorical color scale from `d3-scale-chromatic`. Data is loaded from a CSV file, grouped with `d3.nest()`, and each stock’s price trend is drawn as a separate colored line. The interface includes a styled header and descriptive text about banking sector risks.

AI-generated description

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

Similar vizzes

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

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

84% match

Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930

83% match

Loading thumbnail…

Untitled

This interactive line chart visualizes the High and Low values of stock symbols from the National Stock Exchange of India, with an animated transition between the two metrics. A dropdown menu lets users switch between the High and Low series, triggering a smooth data update. The visualization uses d3.csv to load data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.line to draw the path, with circles marking data points. The update function employs d3 transitions over 1000 milliseconds to animate the line and dots, rendered as SVG elements.

SSheela2930

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

82% match

Loading thumbnail…

Untitled

A line chart tracks stock closing prices over a three-week period in April–May 2012, with each data point drawn as a red circle from the CSV data. Interactive tooltips appear on mouseover, displaying the formatted date and closing value. The visualization uses D3.js version 3.5.17 to build an SVG with a time-scaled x-axis, linear y-axis, and animated transitions for the tooltip opacity.

SSrishti2398

81% match

Loading thumbnail…

Untitled

This visualization displays the closing prices and trading volumes of ten stocks over time, using a logarithmic scale to compare relative changes across different price and volume ranges. Each stock is drawn as a colored line, with a dropdown or toggle option to switch between close price and volume metrics. The chart uses D3 v6 with SVG rendering and includes gridlines, axis ticks, and a time-based x-axis. Data is loaded from a CSV file hosted on GitHub, and the color palette assigns a distinct hue to each stock symbol.

Lluxingyu

81% match

Loading thumbnail…

Untitled

This visualization displays multiple stock price trends over time as colored lines on a shared time-series chart. The code loads data from a CSV file, parses dates, and groups entries by symbol using `d3.group`. It renders SVG paths with a steelblue stroke overridden by a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`), and adds axes via `d3.axisBottom` and `d3.axisLeft`.

YYujunliu95

80% match