fresh block

100%

✓ Published0🌍 Public

Last edited Jan 9, 2017

Created on Jan 2, 2017

This visualization shows a time series of stock prices for multiple entities (Angers, Monaco) over a year, with each actual price point accompanied by a cascade of up to 38 forecasted values (pred1 through pred38) drawn as separate steel-blue lines. The D3.js v3 code defines multiple `d3.svg.line` objects, one per prediction horizon, all sharing a time-scaled x-axis and linear y-axis. The SVG paths are animated, and the data is loaded from a CSV file, with axes formatted using `d3.svg.axis` and dates parsed via `d3.time.format`. The chart emphasizes how forecasts progressively converge or diverge from the observed price series over time.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows monthly stock price trends for multiple companies from 2000 to 2010, with each symbol rendered as a separate colored line on a time-series chart. The visualization uses D3 v4’s `d3.line` with a basis curve, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by stock symbol. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders static SVG paths with axes. The legend code is commented out, and no animation is implemented.

SSebDelSab

79% match

Loading thumbnail…

fresh block

The visualization shows a time-series area chart of stock prices, with the area colored red for values above 150 and blue for values below 150, highlighting threshold crossings. It uses D3.js (v3) with `d3.svg.area()`, `d3.time.scale()`, and `d3.svg.axis()` to render the SVG. Data is loaded from an external TSV file and parsed with `d3.time.format`. The code splits the dataset into contiguous segments based on the price threshold, then draws each segment as a separate colored area path. Axes are added for time and price, with the y-axis labeled “Price ($)”.

AAaronWitter

77% match

Loading thumbnail…

fresh block

This example visualizes multiple time-series lines from a weather dataset, with each line representing a different category (`symbol`) and showing how a price-like value changes over time. The visualization uses D3 v3 to load CSV data, parse date strings with `d3.time.format`, and render the lines using `d3.svg.line`. A categorical color scale (`d3.scale.category10`) assigns distinct colors to each line dynamically, and the lines are drawn on an SVG canvas with a time-based x-axis and linear y-axis. The code nests the data by symbol using `d3.nest`, then appends a separate path for each group, highlighting the trend patterns across categories.

DDarienLiang

77% match

Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu

76% match

Loading thumbnail…

fresh block

A small multiple line chart shows monthly values for a single series across twelve months, with grey circles marking each data point. Hovering over a circle highlights it in red, brings it to the front, draws a dashed vertical guide line to the baseline, and animates a large value label near the point. Built with D3 v3, the visualization uses an ordinal x-scale for month names, a linear y-scale for values, and SVG paths, circles, and text elements. The data comes from a local JSON file with name, value, and date fields, parsed via `d3.time.format`.

BBrunoDumas

75% match

Loading thumbnail…

fresh block

The visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It presents four distinct area-chart modes—transparent, stacked, separated, and centered—each animated to show the same data under different spatial arrangements. Built with D3.js v4, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to render smooth SVG paths. A legend identifies each company by color. The animation transitions between chart types, highlighting how each layout affects the perception of price trends and comparative performance.

HHakkahi

75% match

Loading thumbnail…

fresh block

A single blue line traces Amazon's daily closing stock price from July to February, showing a gradual rise with notable dips and peaks. The SVG chart includes labeled axes for date and price in dollars. Built with D3.js v3, it loads data from a CSV file, uses `d3.time.scale` and `d3.svg.line` to map the temporal and linear values, and renders the line and axes via SVG paths within a viewBox.

KKacieW

75% match

Loading thumbnail…

fresh block

This example shows a multi-line chart where three series track how their values change over roughly five weeks in spring 2012. The lines are distinguished by color and key, with each data point marked by a small circle on the SVG canvas. The x-axis uses a time scale for the dates, while the y-axis maps the numeric value. A legend identifies each line, and the chart includes axes and grid lines to aid in reading the values. The visualization demonstrates how D3.js v4 can render time-series data with multiple series using an SVG-based approach.

GGerardoFurtado

74% match