Last active
August 29, 2015 14:00
-
-
Save timelyportfolio/11232439 to your computer and use it in GitHub Desktop.
US and Global Factors | rCharts + dimple.js Correlation Plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#full factor set for 1956-2012 from Andrea Frazzini Data | |
#http://www.econ.yale.edu/~af227/data_library.htm | |
#direct link to Excel File | |
#http://www.econ.yale.edu/~af227/data/QMJ%20factors%20-%20Asness,%20Frazzini%20and%20Pedersen.xlsx | |
#ssrn citation to the paper | |
#Asness, Clifford S. and Frazzini, Andrea and Pedersen, Lasse Heje | |
#Quality Minus Junk (October 9, 2013) | |
#Available at SSRN: http://ssrn.com/abstract=2312432 | |
require(gdata) | |
require(PerformanceAnalytics) | |
require(factorAnalytics) | |
require(quantmod) | |
require(reshape2) | |
require(rCharts) | |
#read spreadsheet | |
qmjFactors <- read.xls( | |
"http://www.econ.yale.edu/~af227/data/QMJ%20factors%20-%20Asness,%20Frazzini%20and%20Pedersen.xlsx" | |
,pattern = "Caldt" | |
,blank.lines.skip = T | |
,stringsAsFactors = F | |
) | |
#convert spreadsheet data to R xts | |
#remove % with gsub, make numeric, and divide by 100 | |
qmjFactors.xts <- as.xts( | |
do.call(cbind, | |
lapply( | |
qmjFactors[,-(c(1,7))] | |
,function(x){ | |
df<-data.frame(as.numeric( | |
gsub( | |
x=x | |
,pattern="%" | |
,replacement="" | |
) | |
)/100) | |
colnames(df) <- colnames(x) | |
return(df) | |
} | |
) | |
) #date is first column; will use in order.by | |
,order.by = as.Date(paste0(qmjFactors[,1],"-01"),format="%Y%m%d") | |
) | |
colnames(qmjFactors.xts) <- gsub( | |
x = colnames(qmjFactors.xts), | |
,pattern = "\\.1" | |
,replacement = "\\.Glbl" | |
) | |
cumul <- melt( | |
data.frame( | |
date = format(index( na.omit( qmjFactors.xts ))) | |
, cumprod( 1 + na.omit( qmjFactors.xts ) ) | |
) | |
, id.vars = 1 | |
, value.name = "cumul" | |
, variable.name = "factor" | |
) | |
d1 <- dPlot( | |
cumul ~ date | |
, groups = "factor" | |
, data = cumul | |
, type = "line" | |
, height = 400 | |
, width = 700 | |
, bounds = list(x = 80, y = 70, width = 600 , height = 250) | |
) | |
d1$xAxis( | |
type = "addTimeAxis" | |
, inputFormat = "%Y-%m-%d" | |
, outputFormat = "%b %Y" | |
) | |
d1$setTemplate( | |
afterScript = | |
' | |
<script> | |
//get fewer ticks on x axis | |
//this is a dimple issue that might or might not get fixed | |
myChart.svg.select(".axis").selectAll(".tick")[0].forEach(function(d,i){ | |
if (!(+d3.time.format("%y")(new Date(+d3.select(d).datum())) % 5 == 0)) { | |
d.remove() | |
} else { | |
var dtext = d3.select(d).selectAll("text"); | |
dtext | |
.text(d3.time.format("%Y")(new Date(dtext.text()))) | |
.attr("transform","none") | |
.attr("y",12) | |
.style("text-anchor","middle"); | |
} | |
}); | |
//remove x axis label | |
myChart.axes[0].titleShape.remove() | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 18) | |
.text("US and Global Factors") | |
.style("text-anchor","beginning") | |
.style("font-size","16px") | |
.style("font-family","sans-serif") | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 34) | |
.text("source: Asness, Frazzini, Pedersen | Quality Minus Junk (2013)") | |
.style("text-anchor","beginning") | |
.style("font-size","14px") | |
.style("font-family","sans-serif") | |
</script> | |
' | |
) | |
d1 | |
#### now use the correlation plot | |
#### from rCharts issue #381 | |
corrmatrix<-cor(na.omit(qmjFactors.xts)) #store corr matrix | |
# The following steps are generic and can all be placed in a function with some tweaks to customize output | |
corrdata=as.data.frame(corrmatrix) | |
corrdata$Factor1=names(corrdata) | |
corrdatamelt=melt(corrdata,id="Factor1") | |
names(corrdatamelt)=c("Factor1","Factor2","CorrelationCoefficient") | |
corrmatplot = dPlot( | |
Factor2 ~ Factor1 | |
,z = "CorrelationCoefficient" | |
,data = corrdatamelt | |
,type = 'bubble' | |
,height = 350 | |
,width = 500 | |
,bounds = list( x = 150, y = 50, width = 330, height = 200) | |
) | |
corrmatplot$yAxis ( type= "addCategoryAxis" ) | |
corrmatplot$zAxis ( | |
type= "addMeasureAxis" | |
, outputFormat = "0.5f" | |
, overrideMin = -2 | |
, overrideMax = 2 | |
) | |
corrmatplot$colorAxis( | |
type = "addColorAxis" | |
,colorSeries = 'CorrelationCoefficient' | |
,palette = c('red','white','blue') | |
,outputFormat = "0.2f" | |
) | |
#corrmatplot | |
#now do the bar | |
corrmatplot$set(type = "bar") | |
#corrmatplot | |
#with the bar let's play with tooltips | |
#first tooltip will just be the number in the center of the bar | |
corrmatplot$templates$script = | |
"http://timelyportfolio.github.io/rCharts_dimple/chart_tooltip_flexible.html" | |
#this template is designed to let us define onHover and onLeave | |
#with thought afterScript but does not work since separate <script> block | |
#so use chartDiv instead | |
corrmatplot$setTemplate( | |
chartDiv = | |
' | |
<div id = "{{chartId}}"></div> | |
<script> | |
function onHover(e){ | |
//ugly but it works; if tooltip exists then select otherwise append | |
//whole d3 enter, update, exit makes things difficult here | |
var custTool = ( | |
d3.select(e.selectedShape[0][0].parentNode).select("#chartTooltip")[0][0] ? | |
d3.select(e.selectedShape[0][0].parentNode).select("#chartTooltip") : | |
d3.select(e.selectedShape[0][0].parentNode).append("text").attr("id","chartTooltip") | |
) | |
custTool | |
//reads outputFormat and assumes it exists | |
.text(d3.format(opts.colorAxis.outputFormat)(e.selectedShape.data()[0].cValue)) | |
//turn dispay on with css since none from leave | |
.style("display",null) | |
.style("pointer-events","none") | |
.style("font-size",10) | |
//use x and y from selected rectangle to position with transform for center | |
.attr("x",e.selectedShape.attr("x")) | |
.attr("y",e.selectedShape.attr("y")) | |
//move to center | |
.attr("transform", | |
"translate(" + e.selectedShape.attr("width") / 2 + "," + e.selectedShape.attr("height")/2 + ")" | |
) | |
.attr("dy",4) | |
.style("text-anchor","middle") | |
} | |
function onLeave(e){ | |
myChart.svg.select("#chartTooltip") | |
.style("display","none"); | |
} | |
</script> | |
' | |
, | |
afterScript = ' | |
<script> | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 18) | |
.text("US and Global Factors Correlations") | |
.style("text-anchor","beginning") | |
.style("font-size","16px") | |
.style("font-family","sans-serif") | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 34) | |
.text("source: Asness, Frazzini, Pedersen | Quality Minus Junk (2013)") | |
.style("text-anchor","beginning") | |
.style("font-size","14px") | |
.style("font-family","sans-serif") | |
</script>' | |
) | |
corrmatplot | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype HTML> | |
<meta charset = 'utf-8'> | |
<html> | |
<head> | |
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
<script src='http://dimplejs.org/dist/dimple.v1.1.5.min.js' type='text/javascript'></script> | |
<style> | |
.rChart { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
width: 500px; | |
height: 350px; | |
} | |
</style> | |
</head> | |
<body > | |
<div id = "chart227483a7ecb"></div> | |
<script> | |
function onHover(e){ | |
//ugly but it works; if tooltip exists then select otherwise append | |
//whole d3 enter, update, exit makes things difficult here | |
var custTool = ( | |
d3.select(e.selectedShape[0][0].parentNode).select("#chartTooltip")[0][0] ? | |
d3.select(e.selectedShape[0][0].parentNode).select("#chartTooltip") : | |
d3.select(e.selectedShape[0][0].parentNode).append("text").attr("id","chartTooltip") | |
) | |
custTool | |
//reads outputFormat and assumes it exists | |
.text(d3.format(opts.colorAxis.outputFormat)(e.selectedShape.data()[0].cValue)) | |
//turn dispay on with css since none from leave | |
.style("display",null) | |
.style("pointer-events","none") | |
.style("font-size",10) | |
//use x and y from selected rectangle to position with transform for center | |
.attr("x",e.selectedShape.attr("x")) | |
.attr("y",e.selectedShape.attr("y")) | |
//move to center | |
.attr("transform", | |
"translate(" + e.selectedShape.attr("width") / 2 + "," + e.selectedShape.attr("height")/2 + ")" | |
) | |
.attr("dy",4) | |
.style("text-anchor","middle") | |
} | |
function onLeave(e){ | |
myChart.svg.select("#chartTooltip") | |
.style("display","none"); | |
} | |
</script> | |
<script type="text/javascript"> | |
var opts = { | |
"dom": "chart227483a7ecb", | |
"width": 500, | |
"height": 350, | |
"xAxis": { | |
"type": "addCategoryAxis", | |
"showPercent": false | |
}, | |
"yAxis": { | |
"type": "addCategoryAxis", | |
"showPercent": false | |
}, | |
"zAxis": { | |
"type": "addMeasureAxis", | |
"outputFormat": "0.5f", | |
"overrideMin": -2, | |
"overrideMax": 2 | |
}, | |
"colorAxis": { | |
"type": "addColorAxis", | |
"colorSeries": "CorrelationCoefficient", | |
"palette": [ "red", "white", "blue" ], | |
"outputFormat": "0.2f" | |
}, | |
"defaultColors": [], | |
"layers": [], | |
"legend": [], | |
"x": "Factor1", | |
"y": "Factor2", | |
"z": "CorrelationCoefficient", | |
"type": "bar", | |
"bounds": { | |
"x": 150, | |
"y": 50, | |
"width": 330, | |
"height": 200 | |
}, | |
"id": "chart227483a7ecb" | |
}, | |
data = [{"Factor1":"MKT","Factor2":"MKT","CorrelationCoefficient":1},{"Factor1":"SMB","Factor2":"MKT","CorrelationCoefficient":0.200456096933883},{"Factor1":"HML","Factor2":"MKT","CorrelationCoefficient":0.0124127313658237},{"Factor1":"UMD","Factor2":"MKT","CorrelationCoefficient":-0.2049459800431},{"Factor1":"QMJ","Factor2":"MKT","CorrelationCoefficient":-0.602494367474873},{"Factor1":"MKT.Glbl","Factor2":"MKT","CorrelationCoefficient":0.867275406854617},{"Factor1":"SMB.Glbl","Factor2":"MKT","CorrelationCoefficient":0.0624277379524938},{"Factor1":"HML.Glbl","Factor2":"MKT","CorrelationCoefficient":0.0243857546642979},{"Factor1":"UMD.Glbl","Factor2":"MKT","CorrelationCoefficient":-0.263265748740087},{"Factor1":"QMJ.Glbl","Factor2":"MKT","CorrelationCoefficient":-0.615086109994511},{"Factor1":"MKT","Factor2":"SMB","CorrelationCoefficient":0.200456096933883},{"Factor1":"SMB","Factor2":"SMB","CorrelationCoefficient":1},{"Factor1":"HML","Factor2":"SMB","CorrelationCoefficient":-0.0429686192988851},{"Factor1":"UMD","Factor2":"SMB","CorrelationCoefficient":-3.14211648466386e-005},{"Factor1":"QMJ","Factor2":"SMB","CorrelationCoefficient":-0.56518920825219},{"Factor1":"MKT.Glbl","Factor2":"SMB","CorrelationCoefficient":0.186587635125907},{"Factor1":"SMB.Glbl","Factor2":"SMB","CorrelationCoefficient":0.802436265714723},{"Factor1":"HML.Glbl","Factor2":"SMB","CorrelationCoefficient":-0.0661692653665177},{"Factor1":"UMD.Glbl","Factor2":"SMB","CorrelationCoefficient":0.0266919082783937},{"Factor1":"QMJ.Glbl","Factor2":"SMB","CorrelationCoefficient":-0.429164008408081},{"Factor1":"MKT","Factor2":"HML","CorrelationCoefficient":0.0124127313658237},{"Factor1":"SMB","Factor2":"HML","CorrelationCoefficient":-0.0429686192988851},{"Factor1":"HML","Factor2":"HML","CorrelationCoefficient":1},{"Factor1":"UMD","Factor2":"HML","CorrelationCoefficient":-0.694306846426837},{"Factor1":"QMJ","Factor2":"HML","CorrelationCoefficient":-0.160678256883582},{"Factor1":"MKT.Glbl","Factor2":"HML","CorrelationCoefficient":0.0389441274778166},{"Factor1":"SMB.Glbl","Factor2":"HML","CorrelationCoefficient":-0.0185832666501022},{"Factor1":"HML.Glbl","Factor2":"HML","CorrelationCoefficient":0.918471462483014},{"Factor1":"UMD.Glbl","Factor2":"HML","CorrelationCoefficient":-0.635581358136359},{"Factor1":"QMJ.Glbl","Factor2":"HML","CorrelationCoefficient":-0.221405724776633},{"Factor1":"MKT","Factor2":"UMD","CorrelationCoefficient":-0.2049459800431},{"Factor1":"SMB","Factor2":"UMD","CorrelationCoefficient":-3.14211648466386e-005},{"Factor1":"HML","Factor2":"UMD","CorrelationCoefficient":-0.694306846426837},{"Factor1":"UMD","Factor2":"UMD","CorrelationCoefficient":1},{"Factor1":"QMJ","Factor2":"UMD","CorrelationCoefficient":0.290249491031037},{"Factor1":"MKT.Glbl","Factor2":"UMD","CorrelationCoefficient":-0.197088828215587},{"Factor1":"SMB.Glbl","Factor2":"UMD","CorrelationCoefficient":0.0140007604747755},{"Factor1":"HML.Glbl","Factor2":"UMD","CorrelationCoefficient":-0.670907039642455},{"Factor1":"UMD.Glbl","Factor2":"UMD","CorrelationCoefficient":0.917350356790049},{"Factor1":"QMJ.Glbl","Factor2":"UMD","CorrelationCoefficient":0.369324327366696},{"Factor1":"MKT","Factor2":"QMJ","CorrelationCoefficient":-0.602494367474873},{"Factor1":"SMB","Factor2":"QMJ","CorrelationCoefficient":-0.56518920825219},{"Factor1":"HML","Factor2":"QMJ","CorrelationCoefficient":-0.160678256883582},{"Factor1":"UMD","Factor2":"QMJ","CorrelationCoefficient":0.290249491031037},{"Factor1":"QMJ","Factor2":"QMJ","CorrelationCoefficient":1},{"Factor1":"MKT.Glbl","Factor2":"QMJ","CorrelationCoefficient":-0.585164755865734},{"Factor1":"SMB.Glbl","Factor2":"QMJ","CorrelationCoefficient":-0.453498558349998},{"Factor1":"HML.Glbl","Factor2":"QMJ","CorrelationCoefficient":-0.101598782591378},{"Factor1":"UMD.Glbl","Factor2":"QMJ","CorrelationCoefficient":0.292579417975988},{"Factor1":"QMJ.Glbl","Factor2":"QMJ","CorrelationCoefficient":0.888421576866123},{"Factor1":"MKT","Factor2":"MKT.Glbl","CorrelationCoefficient":0.867275406854617},{"Factor1":"SMB","Factor2":"MKT.Glbl","CorrelationCoefficient":0.186587635125907},{"Factor1":"HML","Factor2":"MKT.Glbl","CorrelationCoefficient":0.0389441274778166},{"Factor1":"UMD","Factor2":"MKT.Glbl","CorrelationCoefficient":-0.197088828215587},{"Factor1":"QMJ","Factor2":"MKT.Glbl","CorrelationCoefficient":-0.585164755865734},{"Factor1":"MKT.Glbl","Factor2":"MKT.Glbl","CorrelationCoefficient":1},{"Factor1":"SMB.Glbl","Factor2":"MKT.Glbl","CorrelationCoefficient":0.114312313648855},{"Factor1":"HML.Glbl","Factor2":"MKT.Glbl","CorrelationCoefficient":0.0527835662748547},{"Factor1":"UMD.Glbl","Factor2":"MKT.Glbl","CorrelationCoefficient":-0.271771364714555},{"Factor1":"QMJ.Glbl","Factor2":"MKT.Glbl","CorrelationCoefficient":-0.651821647339809},{"Factor1":"MKT","Factor2":"SMB.Glbl","CorrelationCoefficient":0.0624277379524938},{"Factor1":"SMB","Factor2":"SMB.Glbl","CorrelationCoefficient":0.802436265714723},{"Factor1":"HML","Factor2":"SMB.Glbl","CorrelationCoefficient":-0.0185832666501022},{"Factor1":"UMD","Factor2":"SMB.Glbl","CorrelationCoefficient":0.0140007604747755},{"Factor1":"QMJ","Factor2":"SMB.Glbl","CorrelationCoefficient":-0.453498558349998},{"Factor1":"MKT.Glbl","Factor2":"SMB.Glbl","CorrelationCoefficient":0.114312313648855},{"Factor1":"SMB.Glbl","Factor2":"SMB.Glbl","CorrelationCoefficient":1},{"Factor1":"HML.Glbl","Factor2":"SMB.Glbl","CorrelationCoefficient":-0.0303365805179786},{"Factor1":"UMD.Glbl","Factor2":"SMB.Glbl","CorrelationCoefficient":0.00627511143296203},{"Factor1":"QMJ.Glbl","Factor2":"SMB.Glbl","CorrelationCoefficient":-0.394344952151365},{"Factor1":"MKT","Factor2":"HML.Glbl","CorrelationCoefficient":0.0243857546642979},{"Factor1":"SMB","Factor2":"HML.Glbl","CorrelationCoefficient":-0.0661692653665177},{"Factor1":"HML","Factor2":"HML.Glbl","CorrelationCoefficient":0.918471462483014},{"Factor1":"UMD","Factor2":"HML.Glbl","CorrelationCoefficient":-0.670907039642455},{"Factor1":"QMJ","Factor2":"HML.Glbl","CorrelationCoefficient":-0.101598782591378},{"Factor1":"MKT.Glbl","Factor2":"HML.Glbl","CorrelationCoefficient":0.0527835662748547},{"Factor1":"SMB.Glbl","Factor2":"HML.Glbl","CorrelationCoefficient":-0.0303365805179786},{"Factor1":"HML.Glbl","Factor2":"HML.Glbl","CorrelationCoefficient":1},{"Factor1":"UMD.Glbl","Factor2":"HML.Glbl","CorrelationCoefficient":-0.672862473670752},{"Factor1":"QMJ.Glbl","Factor2":"HML.Glbl","CorrelationCoefficient":-0.220321553036851},{"Factor1":"MKT","Factor2":"UMD.Glbl","CorrelationCoefficient":-0.263265748740087},{"Factor1":"SMB","Factor2":"UMD.Glbl","CorrelationCoefficient":0.0266919082783937},{"Factor1":"HML","Factor2":"UMD.Glbl","CorrelationCoefficient":-0.635581358136359},{"Factor1":"UMD","Factor2":"UMD.Glbl","CorrelationCoefficient":0.917350356790049},{"Factor1":"QMJ","Factor2":"UMD.Glbl","CorrelationCoefficient":0.292579417975988},{"Factor1":"MKT.Glbl","Factor2":"UMD.Glbl","CorrelationCoefficient":-0.271771364714555},{"Factor1":"SMB.Glbl","Factor2":"UMD.Glbl","CorrelationCoefficient":0.00627511143296203},{"Factor1":"HML.Glbl","Factor2":"UMD.Glbl","CorrelationCoefficient":-0.672862473670752},{"Factor1":"UMD.Glbl","Factor2":"UMD.Glbl","CorrelationCoefficient":1},{"Factor1":"QMJ.Glbl","Factor2":"UMD.Glbl","CorrelationCoefficient":0.432016490778744},{"Factor1":"MKT","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.615086109994511},{"Factor1":"SMB","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.429164008408081},{"Factor1":"HML","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.221405724776633},{"Factor1":"UMD","Factor2":"QMJ.Glbl","CorrelationCoefficient":0.369324327366696},{"Factor1":"QMJ","Factor2":"QMJ.Glbl","CorrelationCoefficient":0.888421576866123},{"Factor1":"MKT.Glbl","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.651821647339809},{"Factor1":"SMB.Glbl","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.394344952151365},{"Factor1":"HML.Glbl","Factor2":"QMJ.Glbl","CorrelationCoefficient":-0.220321553036851},{"Factor1":"UMD.Glbl","Factor2":"QMJ.Glbl","CorrelationCoefficient":0.432016490778744},{"Factor1":"QMJ.Glbl","Factor2":"QMJ.Glbl","CorrelationCoefficient":1}]; | |
var svg = dimple.newSvg("#" + opts.id, opts.width, opts.height); | |
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"]) | |
var myChart = new dimple.chart(svg, data); | |
if (opts.bounds) { | |
myChart.setBounds(opts.bounds.x, opts.bounds.y, opts.bounds.width, opts.bounds.height);//myChart.setBounds(80, 30, 480, 330); | |
} | |
//dimple allows use of custom CSS with noFormats | |
if(opts.noFormats) { myChart.noFormats = opts.noFormats; }; | |
//for markimekko and addAxis also have third parameter measure | |
//so need to evaluate if measure provided | |
//function to build axes | |
function buildAxis(position,layer){ | |
var axis; | |
var axisopts = opts[position+"Axis"]; | |
if(axisopts.measure) { | |
axis = myChart[axisopts.type](position,layer[position],axisopts.measure); | |
} else { | |
axis = myChart[axisopts.type](position, layer[position]); | |
}; | |
if(!(axisopts.type === "addPctAxis")) axis.showPercent = axisopts.showPercent; | |
if (axisopts.orderRule) axis.addOrderRule(axisopts.orderRule); | |
if (axisopts.grouporderRule) axis.addGroupOrderRule(axisopts.grouporderRule); | |
if (axisopts.overrideMin) axis.overrideMin = axisopts.overrideMin; | |
if (axisopts.overrideMax) axis.overrideMax = axisopts.overrideMax; | |
if (axisopts.overrideMax) axis.overrideMax = axisopts.overrideMax; | |
if (axisopts.inputFormat) axis.dateParseFormat = axisopts.inputFormat; | |
if (axisopts.outputFormat) axis.tickFormat = axisopts.outputFormat; | |
return axis; | |
}; | |
var c = null; | |
if(d3.keys(opts.colorAxis).length > 0) { | |
c = myChart[opts.colorAxis.type](opts.colorAxis.colorSeries,opts.colorAxis.palette) ; | |
if(opts.colorAxis.outputFormat){ | |
c.tickFormat = opts.colorAxis.outputFormat; | |
} | |
} | |
//allow manipulation of default colors to use with dimple | |
if(opts.defaultColors.length) { | |
//opts.defaultColors = opts.defaultColors[0]; | |
if (typeof(opts.defaultColors) == "function") { | |
//assume this is a d3 scale | |
//for now loop through first 20 but need a better way to handle | |
defaultColorsArray = []; | |
for (var n=0;n<20;n++) { | |
defaultColorsArray.push(opts.defaultColors(n)); | |
}; | |
opts.defaultColors = defaultColorsArray; | |
} | |
opts.defaultColors.forEach(function(d,i) { | |
opts.defaultColors[i] = new dimple.color(d); | |
}) | |
myChart.defaultColors = opts.defaultColors; | |
} | |
//do series | |
//set up a function since same for each | |
//as of now we have x,y,groups,data,type in opts for primary layer | |
//and other layers reside in opts.layers | |
function buildSeries(layer, hidden){ | |
//inherit from primary layer if not intentionally changed or xAxis, yAxis, zAxis null | |
if (!layer.xAxis) layer.xAxis = opts.xAxis; | |
if (!layer.yAxis) layer.yAxis = opts.yAxis; | |
if (!layer.zAxis) layer.zAxis = opts.zAxis; | |
var x = buildAxis("x", layer); | |
x.hidden = hidden; | |
var y = buildAxis("y", layer); | |
y.hidden = hidden; | |
//z for bubbles | |
var z = null; | |
if (!(typeof(layer.zAxis) === 'undefined') && layer.zAxis.type){ | |
z = buildAxis("z", layer); | |
}; | |
//here think I need to evaluate group and if missing do null | |
//as the group argument | |
//if provided need to use groups from layer | |
var s = new dimple.series(myChart, null, x, y, z, c, dimple.plot[layer.type], dimple.aggregateMethod.avg, dimple.plot[layer.type].stacked); | |
//as of v1.1.4 dimple can use different dataset for each series | |
if(layer.data){ | |
//convert to an array of objects | |
var tempdata; | |
//avoid lodash for now | |
datakeys = d3.keys(layer.data) | |
tempdata = layer.data[datakeys[1]].map(function(d,i){ | |
var tempobj = {} | |
datakeys.forEach(function(key){ | |
tempobj[key] = layer.data[key][i] | |
}) | |
return tempobj | |
}) | |
s.data = tempdata; | |
} | |
if(layer.hasOwnProperty("groups")) { | |
s.categoryFields = (typeof layer.groups === "object") ? layer.groups : [layer.groups]; | |
//series offers an aggregate method that we will also need to check if available | |
//options available are avg, count, max, min, sum | |
} | |
if (!(typeof(layer.aggregate) === 'undefined')) { | |
s.aggregate = eval(layer.aggregate); | |
} | |
if (!(typeof(layer.lineWeight) === 'undefined')) { | |
s.lineWeight = eval(layer.lineWeight); | |
} | |
if (!(typeof(layer.barGap) === 'undefined')) { | |
s.barGap = eval(layer.barGap); | |
} | |
/* if (!(typeof(layer.eventHandler) === 'undefined')) { | |
layer.eventHandler = (layer.eventHandler.length === "undefined") ? layer.eventHandler : [layer.eventHandler]; | |
layer.eventHandler.forEach(function(evt){ | |
s.addEventHandler(evt.event, eval(evt.handler)) | |
}) | |
}*/ | |
myChart.series.push(s); | |
/*placeholder fix domain of primary scale for new series data | |
//not working right now but something like this | |
//for now just use overrideMin and overrideMax from rCharts | |
for( var i = 0; i<2; i++) { | |
if (!myChart.axes[i].overrideMin) { | |
myChart.series[0]._axisBounds(i==0?"x":"y").min = myChart.series[0]._axisBounds(i==0?"x":"y").min < s._axisBounds(i==0?"x":"y").min ? myChart.series[0]._axisBounds(i==0?"x":"y").min : s._axisBounds(i==0?"x":"y").min; | |
} | |
if (!myChart.axes[i].overrideMax) { | |
myChart.series[0]._axisBounds(i==0?"x":"y")._max = myChart.series[0]._axisBounds(i==0?"x":"y").max > s._axisBounds(i==0?"x":"y").max ? myChart.series[0]._axisBounds(i==0?"x":"y").max : s._axisBounds(i==0?"x":"y").max; | |
} | |
myChart.axes[i]._update(); | |
} | |
*/ | |
// Handle the hover event - overriding the default behaviour | |
s.addEventHandler("mouseover", onHover); | |
// Handle the leave event - overriding the default behaviour | |
s.addEventHandler("mouseleave", onLeave); | |
return s; | |
}; | |
buildSeries(opts, false); | |
if (opts.layers.length > 0) { | |
opts.layers.forEach(function(layer){ | |
buildSeries(layer, true); | |
}) | |
} | |
//unsure if this is best but if legend is provided (not empty) then evaluate | |
if(d3.keys(opts.legend).length > 0) { | |
var l =myChart.addLegend(); | |
d3.keys(opts.legend).forEach(function(d){ | |
l[d] = opts.legend[d]; | |
}); | |
} | |
//quick way to get this going but need to make this cleaner | |
if(opts.storyboard) { | |
myChart.setStoryboard(opts.storyboard); | |
}; | |
myChart.draw(); | |
</script> | |
<script> | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 18) | |
.text("US and Global Factors Correlations") | |
.style("text-anchor","beginning") | |
.style("font-size","16px") | |
.style("font-family","sans-serif") | |
myChart.svg.append("text") | |
.attr("id","charttitle") | |
.attr("x", 0) | |
.attr("y", 34) | |
.text("source: Asness, Frazzini, Pedersen | Quality Minus Junk (2013)") | |
.style("text-anchor","beginning") | |
.style("font-size","14px") | |
.style("font-family","sans-serif") | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment