Skip to main content
100%

Stock Watch Feedback

✓ Published0🌍 Public
Aarcox80
Last edited Dec 13, 2017
Created on Dec 13, 2017

This visualization pairs live stock quotes with related news headlines in a force-directed network. Each node represents a company’s current price, while adjacent nodes display relevant headlines fetched alongside the quote. The code uses `d3.forceSimulation` to position elements, with `d3.select` and `transition.attrTween` to animate price changes. Data comes from the Alpha Vantage API via a gist, and the interface includes clear symbol labels to avoid lookup confusion. Slow API responses are handled with asynchronous updates, and headings clarify whether a value is a price, change, or percentage.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 33580f9f359cea2b2586

This visualization uses a force-directed network layout to display a portfolio of major stocks, with each node representing a company and links suggesting relationships. The code relies on the D3.js library’s force simulation and animation capabilities to position and update the nodes. Data is pulled live from Yahoo Finance’s CSV quote API, which supplies the ticker symbols and their associated metrics, though only the symbols are rendered as labels in the graph. The visualization appears to be a proof-of-concept for showing financial instruments as an interactive, physics-based cluster.

LLayne Smith
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
71% match
Loading thumbnail…

Stocks transition_1

This visualization attempts to display stock prices over time using D3 v4, with data from a CSV file containing monthly price records for Microsoft (MSFT). The code sets up scales for years and stock symbols, and prepares nested data structures to compute mean prices by year and by symbol. Although the visualization is incomplete—the main rendering logic is commented out—the intended design appears to be a grouped bar chart comparing average stock prices across years and symbols. The visualization uses an ordinal color scale with a palette of purple, blue, orange, and related hues, and an SVG canvas of 960 by 500 pixels. The title "Stocks transition_1" suggests it may have been an early experiment in transitioning between different data views. The code includes commented-out sections for stacked bar layouts, indicating the author was exploring multiple chart types. The current version loads stock price data from a CSV file, parses dates into years, and prepares nested data structures for both year-then-symbol and symbol-then-year groupings, though the final rendering logic is incomplete.

Aadurivault
71% 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
71% match
Loading thumbnail…

Stocks transition

This visualization compares monthly stock price data for several companies across multiple years. It initially renders as a stacked bar chart where each bar represents a company and is subdivided by year, using D3 v4’s stack layout and ordinal color scale. Clicking anywhere on the page triggers a smooth transition: the grouped bars slide into separate columns and reshape into individual bars showing each company’s average yearly price, animated over 800 milliseconds. The SVG-based transition highlights how the data can be viewed either as cumulative contributions or as independent annual values.

Aadurivault
70% match
Loading thumbnail…

X DataClips + D3.js Force-Directed

This example visualizes stock exchange venue activity using a force-directed graph in D3.js v3. It pulls live market data from the IEX Trading API via a JSONP callback, then renders nodes sized by a selectable metric—volume, market percent, or tape type—with proportional radii and categorical colors. A dropdown menu lets viewers switch the driving attribute, triggering an SVG rebuild. The layout uses `d3.layout.force` with fixed gravity and drag behavior, while labels display venue names and formatted values. Data is wrapped in a custom `d3.jsonp` helper to handle cross-origin requests.

663anp3ca
69% 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
69% match
Loading thumbnail…

Sound of the Stock Market

This visualization tracks the cost basis of stocks by brushing a range chart to recalculate hypothetical $1 purchases over a selected time period, with multiple stock price lines overlaid on a main chart. Hovering or playing animates the lines while attached audio oscillators fluctuate with the stock data, and users can add custom tickers and adjust sound waveforms and colors. The code uses D3 v4 scales, axes, and `d3.brushX`, fetching historical price data from Yahoo Finance via a CORS proxy, and renders SVG paths with an animated playback and mouse-sensor interaction.

Aalexmacy
69% match