Local Variables

100%

Local Variables

✓ Published0🌍 Public

Last edited Apr 7, 2019

Created on Apr 7, 2019

This example shows monthly price trends for several stock market indices, displayed as small multiples of overlapping line charts with shaded areas and right-side axes. Each symbol’s chart is independently scaled, with its own linear y-axis and shared time scale. The code uses d3.local() to store per-element scales, area generators, line generators, and axis components on the SVG group nodes, while d3.nest() groups the tab-separated data by symbol. d3.axisRight renders the ticks, and d3.area and d3.line define the visual marks.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08'>Local Variables</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Local Variables

This example demonstrates how D3 v4’s `d3.local` variables provide a clean way to manage per-element state when rendering small multiples of time-series data. It shows monthly stock price trends for the S&P 500 and MSFT, with each chart sharing a common time scale but having its own linear price scale, area, line, and axis. The code defines `d3.local` variables for the y-scale, area, line, and axis, then sets them within `selection.each`, allowing easy reuse without global mutation or data decoration. The final SVG paths and axes are appended using the stored local values.

GGerardoFurtado

84% match

Loading thumbnail…

Local Variables

This example shows a set of small multiples for stock price time-series data, where each chart (S&P 500, MSFT) has its own y-scale to compare relative trends. It demonstrates `d3.local`, a new feature in D3 v4, which stores DOM-scoped variables like scales and shapes on SVG elements, sharing local state across multiple operations. Using `d3.tsv` and `d3.nest`, the data is grouped by symbol, while `d3.area`, `d3.line`, and `d3.axisRight` define per-chart geometry and axes. The local variables provide a cleaner alternative to global state for managing multiple y-scales.

GGerardoFurtado

83% match

Loading thumbnail…

Local Variables

Small multiples of stock price time series compare the S&P 500 and Microsoft from 2000 to 2010. Using D3 4.0’s `d3.local()` variable, each chart defines its own y-scale and area and line generators, scoped per SVG element. The x-scale is shared globally. Data loads from `stocks.tsv` via `d3.tsv`, and `d3.nest()` groups records by symbol for rendering.

Mmbostock

78% match

Loading thumbnail…

multiple line chart

This example shows multiple time-series lines plotted on the same axes, with each line representing a different stock symbol over several months. The chart displays price trends for various symbols, allowing easy visual comparison of their trajectories. Using D3 v4 with SVG rendering, the code loads external CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and groups the data by symbol using `d3.nest()`. It then applies `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and draws each line with `d3.line`, while adding axis labels and a legend via text elements.

EEssohanamKouyou

78% match

Loading thumbnail…

Small Multiples III

This example displays small multiples of stock price trends for indices like the S&P 500 and MSFT, using a shared time scale across all panels. Each multiple receives its own linear y-scale, computed independently from the maximum price of its data series, allowing direct visual comparison of relative shape without a common price range. The visualization is rendered as SVG using D3 v3, with lines and filled areas generated via `d3.svg.line` and `d3.svg.area`. Data is loaded from a tab-separated file and grouped by stock symbol using `d3.nest`.

Mmbostock

77% match

Loading thumbnail…

Small Multiples

This visualization shows monthly stock prices for multiple symbols as a grid of small multiples, with each chart displaying a time-series line and area fill for a single stock. The x-axis spans the common date range across all symbols, while the y-axis is independently scaled per chart to accommodate local price ranges. Built with D3 v3, the code loads CSV data via `d3.csv`, nests entries by symbol using `d3.nest`, and renders SVG paths using `d3.svg.area` and `d3.svg.line`.

Mmbostock

76% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

76% match

Loading thumbnail…

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

EElisaDnr

76% match