Sound of the Stock Market

100%

Sound of the Stock Market

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 21, 2017

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.

AI-generated description

This is a tool for tracking cost basis of stocks. Brushing the range chart at the bottom recalculates the cost basis for having purchased $1 of each of the displayed stocks. It is also good for comparing the performance of different stocks over a specified period of time.

The data is pulled from Yahoo finance through a herokuapp I forked from <a href="https://github.com/Rob--W">Rob Wu</a>'s <a href="https://github.com/Rob--W/cors-anywhere">cors-anywhere</a>. I also added sound by attaching oscillators to each of the stocks when they are drawn, that fluctuate along with the stock when you mouseover the chart or click the play button.

You can manually enter a stock that isn't in the select menu, but not while viewing it through the Bl.ocks.org interface, you have to go <a href="http://bl.ocks.org/alexmacy/raw/d2f9486aa62411e7844a47544856e2a6/">here</a> or <a href="https://alexmacy.github.io/sound-of-the-market/live.html">here</a>.

mit Licensed

Similar vizzes

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

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

74% match

Loading thumbnail…

etape5

This interactive visualization animates the monthly stock prices of multiple companies, letting users toggle between three display modes—multiples, stacked, and stream—via radio buttons. Using D3 v3 with SVG, the chart renders price-over-time series for each symbol as colored areas. In the initial "multiples" view, each group is shown in its own small-multiple band with a shared ordinal time axis. Clicking "stacked" vertically offsets the series using a stack layout, and selecting "stream" centers them around a baseline for a streamgraph effect. The transitions between modes are animated, smoothly updating the y-positions of the areas and their group labels.

Aanojoual

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

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

72% match

Loading thumbnail…

Untitled

This interactive scatterplot displays stock data with price on the x-axis and true value on the y-axis, using colored circles to represent stock types. Users filter the visualization through a dropdown menu for sector selection and jQuery UI sliders that adjust volume and delta ranges. The D3.js code loads data from a CSV file, applies keyed enter/update/exit selections, and includes hover tooltips that highlight individual stocks. The SVG renderer uses d3.axisBottom and d3.axisLeft for axes, with d3.scaleOrdinal for categorical coloring.

Mmkolowrat

71% match

Loading thumbnail…

Dynamic historical stock data with d3.js and YQL

This interactive line chart displays daily stock prices for a user-selected ticker symbol over a specified date range. HTML input fields and an Update button control the query, which fetches historical data from Yahoo Finance’s YQL API. The visualization, built with d3.js (version 3.5.17), renders an SVG area with axes, a steelblue line for daily high prices, and a dynamically updated title. The code uses `d3.json` for the AJAX call, `d3.time.scale` and `d3.scale.linear` for plotting, and `d3.svg.line` for the path, with no input sanitization.

Dd3noob

71% match

Loading thumbnail…

etape1

This visualization displays Apple stock prices over time from January 2000 through December 2008. The chart combines a steelblue line for the price trend with a lightsteelblue filled area beneath it, making the overall trajectory easy to read. The data is loaded from a CSV file and parsed with d3.timeParse to convert month-year strings into dates, while a time scale maps dates to the x-axis and a linear scale maps prices to the y-axis. D3 v4's area and line generators are used to draw the SVG paths, with axes rendered via d3.axisBottom and d3.axisLeft. The y-axis starts at zero, so the area fill emphasizes both the magnitude and the relative changes in the stock price over the period from January 2000 to December 2008.

Aanojoual

71% match