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

100%

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

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Aug 6, 2016

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`.

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:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes
d3.svg.line - display line shape

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>

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

30. 3-stock-return chart inner data

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`.

深深度碎片

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`.

深深度碎片

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

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

75% 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.

深深度碎片

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

73% match

Loading thumbnail…

loading multiple stock data from dataset

A multi-line chart displays the monthly closing prices of three technology stocks (MSFT, AMZN, IBM) from January 2000 through March 2010, sourced from a local CSV file. The visualization distinguishes each stock with a distinct color via `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is rendered as an SVG canvas using D3 v4, with price data nested by symbol via `d3.nest`, dates parsed with `d3.timeParse`, and paths drawn using `d3.line` and `d3.curveBasis`. Axes, including a bottom x-axis and a left y-axis with 20 ticks, are generated using `d3.axisBottom` and `d3.axisLeft`. A legend maps each color to its stock symbol.

LLRobergeon

72% match