Demo

100%

✓ Published0🌍 Public

Last edited Aug 10, 2017

Created on Aug 10, 2017

This demo shows a multi-chart stock visualization comparing sector performance over time with Federal Reserve balance sheet data. The main chart uses stacked streamgraph areas rendered with SVG, while a secondary area and bar chart display balance sheet volume and interest rate changes. The visualization supports interactive filtering through a legend, allowing users to toggle sectors, and includes a tooltip. The code uses d3.v4, d3.stack, d3.area, d3.scaleTime, and d3.scaleLinear with jQuery for DOM interactions.

AI-generated description

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/b590f786126e411dab90f97ea4ca4e04'>Stock Vis</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

74% match

Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis

73% match

Loading thumbnail…

D3 Show Reel

This example animates ten years of monthly stock closing prices for four tech companies, seamlessly transitioning through a series of chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and a donut. It uses D3 v3 with SVG and custom transitions, driven by `d3.svg.line`, `d3.svg.area`, and `d3.timer`. The data comes from a CSV file, and the visualization demonstrates D3’s ability to morph between representations without axes, prioritizing motion over information.

AAjayyy

73% match

Loading thumbnail…

TP3-p3-5-backup

This example visualizes stock price trends for multiple symbols using several area chart variants: a basic filled area, a separated area plot, and stacked and centered area charts. The visualization cycles through these different representations, dynamically re-rendering the SVG with smooth transitions. Built with D3 v4, the code uses `d3.area`, `d3.curveBasis`, `d3.nest`, and time scales to process and plot data from a stocks CSV file. Each series is color-coded, and the animation highlights how different area chart layouts compare.

RRade-Mathis

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

72% match

Loading thumbnail…

first_area

The visualization shows time-series stock data as filled area charts, with each symbol rendered as a separate SVG area plot. It displays price trends over time, using a light gray fill for the area beneath each line. The code loads comma-separated data from a CSV file, parses dates with `d3.timeParse`, and nests the data by symbol using `d3.nest`. It constructs the areas with `d3.area` and applies a basis curve via `d3.curveBasis` for smooth lines. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`. A legend is added using `d3.scaleOrdinal` with the `schemeCategory10` palette.

EEssohanamKouyou

72% match

Loading thumbnail…

Fork of test

This gallery example presents an interactive stacked bar chart that visualizes financial data over time from 2021 to 2044, with bars divided into six categories such as spent income, spent return, and retained capital. The chart uses negative and positive value ranges to show spending versus retained amounts, with mouseover highlighting to emphasize individual bars. Built with D3 v4, the visualization employs `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and SVG rendering with CSS-based highlighting triggered by mouse events. The data originates from a custom `FinancialPlan` class containing hardcoded arrays.

HHarsh Patel

72% match

Loading thumbnail…

Dsnap - Charts

This example presents a horizontal bar chart comparing 12 financial metrics, including total deposits, equity, and various credit categories, with values expressed in millions of euros. The visualization renders as an SVG with animated bars that grow in width over one second, using a quantized color scale to differentiate each category. The grid and axes are built with d3.svg.axis and linear scales, while the bar animation leverages D3’s transition API to smoothly update rectangle widths. Data is hardcoded in the script, and the chart is generated entirely with D3 v3.

MMohamedZaki

72% match