fresh block

100%

✓ Published0🌍 Public

Last edited Nov 27, 2017

Created on Nov 27, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

loading multiple stock data from dataset (marche)

This example displays monthly stock price trends for multiple companies as a multi-line chart. The visualization loads CSV data containing symbols, dates, and prices, then nests the records by symbol to draw each stock’s price trajectory over time. The code uses d3.nest, d3.line, and d3.curveBasis to render smooth lines, with d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom/Left for ticks. A legend maps symbols to colors via d3.scaleOrdinal and d3.schemeCategory10, all rendered as SVG elements in D3 v4.

SSebDelSab

84% match

Loading thumbnail…

fresh block

This visualization shows the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010 as multi-series line charts. The chart uses a filled area beneath each line to emphasize price trends over time, with the data nested by company symbol. Built with D3 v4, it employs `d3.nest()`, `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` with a basis curve, rendering to SVG. The data is loaded from a local CSV file via `d3.dsvFormat`.

NNpfn

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

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

81% match

Loading thumbnail…

loading multiple stock data from dataset

This example displays multiple stock price time series as a set of overlaid line charts. It loads a CSV dataset containing monthly price data for Microsoft, Amazon, and IBM, then nests the data by stock symbol using `d3.nest()` to group the records. The visualization uses a D3 v4 SVG renderer with `d3.scaleTime()` and `d3.scaleLinear()` for the axes, and applies the `d3.curveBasis` interpolation to smooth the lines. The code attempts to color each line with `d3.schemeCategory10` and add a legend, though the active portion only renders the uncolored paths.

SSebDelSab

81% match

Loading thumbnail…

loading multiple stock data from dataset

This example displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, using a multi-line chart where each company’s price history is drawn as a colored line. The data is loaded from a CSV file containing symbol, date, and price columns, then grouped by symbol using `d3.nest()`. The visualization uses `d3.line()` with a basis curve, `d3.scaleTime()` for the x-axis, and `d3.scaleLinear()` for the y-axis, with an ordinal color scale for the three series. The chart is rendered as an SVG, with axes and a legend prepared via `d3.axisBottom` and `d3.axisLeft`.

NNpfn

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

80% match

Loading thumbnail…

fresh block

This example shows a simple time-series line chart of numeric values plotted against monthly dates. The visualization uses an SVG-rendered line and includes text labels for each date along the x-axis and the final value displayed prominently to the right. The code relies on D3 v4’s `d3.line` for the path generation, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.timeParse` to convert date strings. Data is loaded from an external `dataset.json` file, with the y-domain fixed from zero to the maximum value.

BBkilian971

80% match