Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/code.R

Last active August 29, 2015 13:58
Show Gist options
  • Save timelyportfolio/10421261 to your computer and use it in GitHub Desktop.
Save timelyportfolio/10421261 to your computer and use it in GitHub Desktop.
Download ZIP
example in response to rCharts issue #381 ; correlation plot with dimplejs
Raw
code.R
#forked from https://gist.github.com/patilv/7073094
library(rCharts)
library(reshape2)
findata=read.csv("https://raw.github.com/patilv/rChartsTutorials/master/findata.csv")
# These are data regarding NCAA athletic department expenses at public universities. Please see the blog post where these charts were originally used
# regarding more details on the origins of these data.: http://analyticsandvisualization.blogspot.com/2013/10/subsidies-revenues-and-expenses-of-ncaa.html
findata=findata[,-c(1:3)] # removing first dummy column - the csv quirk - second column on Rank, and third column on School. Retaining only numeric vars here
corrmatrix<-cor(findata) #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$Variable1=names(corrdata)
corrdatamelt=melt(corrdata,id="Variable1")
names(corrdatamelt)=c("Variable1","Variable2","CorrelationCoefficient")
corrmatplot = dPlot(
Variable2 ~ Variable1
,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 = -1
, overrideMax = 1
)
corrmatplot$colorAxis(
type = "addColorAxis"
,colorSeries = 'CorrelationCoefficient'
,palette = c('red','white','blue')
,outputFormat = "0.5f"
)
corrmatplot
#now do the bar
#corrmatplot$set(type = "bar")
#corrmatplot
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="http://aozora.github.io/bootplus/assets/css/docs.css">
<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: auto auto;
width: 100%;
height: 400px;
}
/*
body {
margin-top: 60px;
}
*/
.tooltip{opacity:1;}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span8'>
<div class="bs-docs-example">
<div id='chart1eec43e29dd' class='rChart dimple'>
</div>
<br/>
<pre><code class='r'>#forked from https://gist.github.com/patilv/7073094
library(rCharts)
library(reshape2)
findata=read.csv(&quot;https://raw.github.com/patilv/rChartsTutorials/master/findata.csv&quot;)
# These are data regarding NCAA athletic department expenses at public universities. Please see the blog post where these charts were originally used
# regarding more details on the origins of these data.: http://analyticsandvisualization.blogspot.com/2013/10/subsidies-revenues-and-expenses-of-ncaa.html
findata=findata[,-c(1:3)] # removing first dummy column - the csv quirk - second column on Rank, and third column on School. Retaining only numeric vars here
corrmatrix&lt;-cor(findata) #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$Variable1=names(corrdata)
corrdatamelt=melt(corrdata,id=&quot;Variable1&quot;)
names(corrdatamelt)=c(&quot;Variable1&quot;,&quot;Variable2&quot;,&quot;CorrelationCoefficient&quot;)
corrmatplot = dPlot(
Variable2 ~ Variable1
,z = &quot;CorrelationCoefficient&quot;
,data = corrdatamelt
,type = 'bubble'
,height = 350
,width = 500
,bounds = list( x = 150, y = 50, width = 330, height = 200)
)
corrmatplot$yAxis ( type= &quot;addCategoryAxis&quot; )
corrmatplot$zAxis (
type= &quot;addMeasureAxis&quot;
, outputFormat = &quot;0.5f&quot;
, overrideMin = -1
, overrideMax = 1
)
corrmatplot$colorAxis(
type = &quot;addColorAxis&quot;
,colorSeries = 'CorrelationCoefficient'
,palette = c('red','white','blue')
,outputFormat = &quot;0.5f&quot;
)
corrmatplot
#now do the bar
#corrmatplot$set(type = &quot;bar&quot;)
#corrmatplot
</code></pre>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var opts = {
"dom": "chart1eec43e29dd",
"width": 700,
"height": 350,
"xAxis": {
"type": "addCategoryAxis",
"showPercent": false
},
"yAxis": {
"type": "addCategoryAxis",
"showPercent": false
},
"zAxis": {
"type": "addMeasureAxis",
"outputFormat": "0.5f",
"overrideMin": -1,
"overrideMax": 1
},
"colorAxis": {
"type": "addColorAxis",
"colorSeries": "CorrelationCoefficient",
"palette": [ "red", "white", "blue" ],
"outputFormat": "0.5f"
},
"defaultColors": [],
"layers": [],
"legend": [],
"x": "Variable1",
"y": "Variable2",
"z": "CorrelationCoefficient",
"type": "bubble",
"bounds": {
"x": 150,
"y": 50,
"width": 330,
"height": 200
},
"id": "chart1eec43e29dd"
},
data = [{"Variable1":"Total.Revenue","Variable2":"Total.Revenue","CorrelationCoefficient":1},{"Variable1":"Total.Expenses","Variable2":"Total.Revenue","CorrelationCoefficient":0.990538233994005},{"Variable1":"Total.Subsidy","Variable2":"Total.Revenue","CorrelationCoefficient":-0.234931071034671},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Revenue","CorrelationCoefficient":0.567118793713813},{"Variable1":"Total.Revenue","Variable2":"Total.Expenses","CorrelationCoefficient":0.990538233994005},{"Variable1":"Total.Expenses","Variable2":"Total.Expenses","CorrelationCoefficient":1},{"Variable1":"Total.Subsidy","Variable2":"Total.Expenses","CorrelationCoefficient":-0.219836244366632},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Expenses","CorrelationCoefficient":0.448719475057225},{"Variable1":"Total.Revenue","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.234931071034671},{"Variable1":"Total.Expenses","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.219836244366632},{"Variable1":"Total.Subsidy","Variable2":"Total.Subsidy","CorrelationCoefficient":1},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.210485654989721},{"Variable1":"Total.Revenue","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":0.567118793713813},{"Variable1":"Total.Expenses","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":0.448719475057225},{"Variable1":"Total.Subsidy","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":-0.210485654989721},{"Variable1":"Revenue.Less.Expenses","Variable2":"Revenue.Less.Expenses","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();
}
*/
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>
</body>
<!-- Google Prettify -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<script
src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
</script>
<script>
var pres = document.getElementsByTagName("pre");
for (var i=0; i < pres.length; ++i) {
pres[i].className = "prettyprint linenums";
}
prettyPrint();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment