Skip to main content
SimilarExport ZIP
100%

30. 3-stock-return chart inner data

✓ Published0🌍 Public
深深度碎片
Last edited Aug 7, 2016
Created on Aug 6, 2016

A multi-series line chart compares the daily return of three stocks (shls, ssgf, and jqr) over roughly ten months, with values indexed to a baseline of 1. The visualization displays each stock’s relative performance as a separate colored line, with a legend labeling the end of each series. Built with D3 v4, the chart loads data from a CSV file, parses dates with `d3.timeParse`, maps dates to the x-axis using `d3.scaleTime`, and encodes return values on the y-axis with `d3.scaleLinear`. Lines are rendered as SVG paths, with color assigned via `d3.schemeCategory10` and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3884955'>Multi-Series Line Chart</a>

forked from <a href='http://bl.ocks.org/EmbraceLife/'>EmbraceLife</a>'s block: <a href='http://bl.ocks.org/EmbraceLife/ccc9d6ee47f9e13c5bbdbd0ee9503da3'>30. Multi-Series Line Chart</a>

forked from <a href='http://bl.ocks.org/EmbraceLife/'>EmbraceLife</a>'s block: <a href='http://bl.ocks.org/EmbraceLife/aa9155f9d0baaa3429e087b34980c929'>30. stock return chart</a>

forked from <a href='http://bl.ocks.org/EmbraceLife/'>EmbraceLife</a>'s block: <a href='http://bl.ocks.org/EmbraceLife/3c6ddf06851e61f9a915c5bc081c0c8e'>30. 3 stock return chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

30. 3-stock-return-missing-data chart

This chart displays daily stock returns for three stocks—shls, ssgf, and jqr—over time, with only jqr having data while the other two series consist entirely of missing values. The line chart uses D3 v4 with SVG rendering, employing `d3.csv` for data loading, `d3.timeParse` for date parsing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for positioning and color. Lines are drawn with `d3.line` using a basis curve, and missing values are handled explicitly by returning null. Axis labels and series legends are added using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片
93% match
Loading thumbnail…

30. stock return chart

A single red line charts the daily "return" of a stock, indexed to a base value of 1.0, over several months in 2011. The chart maps dates on the x-axis and the return value on the y-axis, using a basis curve for smoothness. It loads and parses the data from a CSV file with `d3.csv`, formats dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis elements created using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片
87% match
Loading thumbnail…

my-workflow-d3

This multi-series line chart visualizes the daily returns of three financial variables—shls, ssgf, and jqr—over a year, with missing data represented as gaps in the lines. It uses d3.csv to load the data, d3.timeParse to parse dates, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10 for x, y, and color encodings. Rendering as SVG, it employs d3.line with curveBasis, d3.axisBottom, and d3.axisLeft. The code filters null values to avoid plotting missing points, displaying series labels near the line endpoints.

深深度碎片
79% match
Loading thumbnail…

Daily Return Graph

This chart displays the daily return percentage of a stock over time as a blue line plot. It uses D3 v7 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and render axes and the line using `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. The visualization presents the data in an SVG on a dark-themed background, showing how returns fluctuate across the trading period.

SSheela2930
78% match
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
77% match
Loading thumbnail…

Line Chart 4.0

This line chart visualizes daily closing stock prices from April 2007 to June 2008, with time on the x-axis and price in dollars on the y-axis. The SVG rendering uses D3 v4 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the path, while axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a tab-separated `data.tsv` file containing date and close columns, with the line styled in steelblue.

深深度碎片
77% match
Loading thumbnail…

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Dd3noob
74% match
Loading thumbnail…

2020-stock-returns

A diverging bar chart compares stock returns for 30 major companies during 2020. Each company is represented by a horizontal bar, colored with `d3.interpolateTurbo` and sized by market capitalization. A brush control lets users scrub through the time series, updating the bars to show returns between any two dates. Built with `d3.brushX` and `d3.select`, the chart loads closing prices from a CSV via `d3.loadData` and renders as a static SVG with animated transitions.

11wheel
74% match