timelyportfolio timelyportfolio

Horizon charts combine position and color to reduce vertical space. Start with a standard area chart, then mirror negative values (in blue) or offset them vertically. Click the + button above to increase the number of bands, turning the area into a horizon.

Implemented with the d3.horizon plugin.

	#borrowed significant and substantial portions of code from http://bigcomputing.com/PerformanceAnalytics.R
	#see youtube http://www.youtube.com/embed/0iR8Fo0jwW8 for the demo

	# R/websockets example
	if(any(is.na(packageDescription('caTools'))))
	stop("This demo requires the caTools package.\nRun install.packages('caTools') to install it.\n\n")
	if(any(is.na(packageDescription('PerformanceAnalytics'))))
	stop("This demo requires the PerformanceAnalytics package.\nRun install.packages('PerformanceAnalytics') to install it.\n\n")
	library('websockets')
	library('caTools')

	<!doctype html>
	<html>
	<head></head>
	<body>
	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
	<script>
	var margin = {top: 20, right: 15, bottom: 60, left: 60};
	var width = 700 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>d3.js Axys Performance Chart</title>
	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
	<style>
	.axis path, .axis line {
	fill: none;
	stroke: #000;

	#analyze asset allocation experience in Spain

	require(lattice)
	require(latticeExtra)
	require(reshape2)
	require(directlabels)
	require(quantmod)
	require(PerformanceAnalytics)
	require(RQuantLib)

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>d3.js Grouped Bar Chart</title>

	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script> <style>
	.axis path, .axis line {
	fill: none;
	stroke: #000;

	require(quantmod)
	require(fAssets)

	#get asian currency data from the FED FRED data series
	getSymbols("DEXKOUS",src="FRED") #load Korea
	getSymbols("DEXMAUS",src="FRED") #load Malaysia
	getSymbols("DEXSIUS",src="FRED") #load Singapore
	getSymbols("DEXTAUS",src="FRED") #load Taiwan
	getSymbols("DEXCHUS",src="FRED") #load China
	getSymbols("DEXJPUS",src="FRED") #load Japan

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>d3.js Axys Chart</title>
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
	Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script> <style>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>d3.js Axys Chart</title>
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
	Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script> <style>