index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="//getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="//aozora.github.io/bootplus/assets/css/docs.css">
<link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='//benjh33.github.io/rchart_plugins/scatter_matrix/css/scatter_matrix.css'>
<link rel='stylesheet' href='//benjh33.github.io/rchart_plugins/scatter_matrix/css/bootstrap-select/bootstrap-select.min.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.js' type='text/javascript'></script>
<script src='//benjh33.github.io/rchart_plugins/scatter_matrix/js/box.js' type='text/javascript'></script>
<script src='//benjh33.github.io/rchart_plugins/scatter_matrix/js/scatter_matrix.js' type='text/javascript'></script>
<style>
.rChart {
display: block
margin: auto auto;
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span8'>
<div class="bs-docs-example">
<div id='chart98b9fb1b56' class='rChart scatter_matrix'>
</div>
<br/>
<pre><code class='r'># Get Data
library(RCurl)
f <- getURL("https://raw.github.com/benjh33/benjh33.github.io/cd768434d02b39b01615d03f04a68b0fe33eb76e/_data/data_files/electric.dat")
d <- read.table(text = f, header = T)
d <- d[, -grep("Supplement", names(d))]
# Create Chart
chart <- rCharts$new()
chart$setLib("//benjh33.github.io/rchart_plugins/scatter_matrix")
chart$set(
group = "City",
data = d,
filter = "Grade",
height = 700,
width = 700,
opacity = 0.4,
point_size = 4,
margin = 10
)
chart
</code></pre>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
function draw(){
var params = {
"dom": "chart98b9fb1b56",
"width": 700,
"height": 700,
"group": "City",
"data": {
"City": [ "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "F", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y", "Y" ],
"Grade": [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ],
"treated.Pretest": [ 13.8, 16.5, 18.5, 8.8, 15.3, 15, 19.4, 15, 11.8, 16.4, 16.2, 55.1, 73.1, 51.4, 62.3, 69.7, 70.9, 82.5, 83.9, 69.8, 69.2, 75.1, 68.2, 83.5, 71.7, 77.6, 96.5, 64.2, 88.3, 88.6, 102.4, 105, 101.4, 102.6, 76.4, 105.9, 100.8, 91.7, 97.5, 106.5, 107.4, 111.4, 110, 106.9, 106.7, 104.1, 12, 12.3, 17.2, 14.6, 18.9, 15.3, 16.6, 16, 20.1, 16.4, 80.3, 76.6, 70.1, 60.9, 72.3, 78.6, 77.4, 71.8, 93, 97.7, 65.7, 80.4, 75.6, 68.4, 83.3, 93.7, 87.3, 95.2, 80.4, 85.4, 98, 83.3, 100.8, 103.8, 100.7, 97, 97.3, 94.5, 97.7, 93.9, 109.7, 110.6, 115.2, 101.9, 119.8, 108.8, 104.6, 111.1, 115.5, 107.2 ],
"treated.Posttest": [ 48.9, 70.5, 89.7, 44.2, 77.5, 84.7, 78.9, 86.8, 60.8, 75.7, 95.1, 81.6, 101.2, 66.4, 96.2, 101.3, 108.9, 114.6, 111.7, 97.3, 96.5, 94.9, 104.8, 104.5, 108.3, 92.8, 104.9, 88.9, 109.9, 98.9, 113.1, 114.1, 114, 114, 92.4, 116.2, 116.9, 106.9, 104.6, 114.2, 113.6, 116.6, 114.8, 114.9, 111, 113.9, 60.6, 55.5, 84.8, 84.9, 101.9, 70.6, 78.4, 84.2, 108.6, 76.6, 101.9, 100.1, 91.7, 92.5, 94.4, 101.3, 102.2, 100.6, 113.8, 114.3, 87.9, 105.6, 102.5, 93.6, 109.2, 111.2, 106.4, 110.6, 112.1, 113.3, 111.1, 98.9, 112.2, 114.5, 110.3, 103.7, 110.8, 108.9, 109.6, 107.2, 115.6, 116.2, 119.6, 109.6, 122, 109.7, 112.4, 115.5, 119.7, 111.5 ],
"control.Pretest": [ 12.3, 14.4, 17.7, 11.5, 16.4, 16.8, 18.7, 18.2, 15.4, 18.7, 17.1, 50.3, 63.3, 50.6, 66.4, 73.7, 46, 88.6, 78.4, 61.1, 68.9, 66.6, 67.5, 87.3, 40.8, 103.7, 95.4, 68.6, 91.1, 97.8, 100.6, 99.6, 98.7, 104, 78, 81.2, 102.5, 78.4, 91.9, 110.3, 104.9, 89.7, 106.2, 106.2, 111.9, 109.4, 11.9, 15.1, 16.8, 15.8, 15.8, 13.9, 14.5, 17, 15.8, 14.3, 90, 81.3, 74.9, 72, 52.2, 81.2, 82, 73.8, 81.1, 78.8, 63.2, 77.6, 65.9, 68.9, 78.8, 88.4, 86.5, 89.5, 55.9, 52.6, 95.3, 103.6, 108.1, 109.1, 98.9, 87.4, 92.5, 89, 100.6, 94, 111.8, 112.1, 113.9, 106.3, 110.8, 107.5, 110, 111.6, 109.8, 102.6 ],
"control.Posttest": [ 52.3, 55, 80.4, 47, 69.7, 74.1, 72.7, 97.3, 74.1, 76.3, 84.5, 69.1, 77, 72.9, 94.4, 98, 82.4, 104.9, 102.4, 95.3, 89.5, 80, 96.9, 102.9, 68.9, 110.6, 107.6, 90.5, 105.8, 110.6, 111.3, 107.1, 105.8, 111, 91.7, 95.5, 109.4, 94, 101, 115.3, 110.6, 96, 111.7, 115.9, 113.9, 114.4, 54.6, 56.5, 75.2, 71.1, 75.6, 55.3, 59.3, 87, 73.7, 52.9, 110.3, 98.9, 97.2, 97.2, 67.6, 103.9, 103.8, 93.4, 103.1, 101.2, 83.6, 103, 88.5, 97.8, 103.6, 105.8, 99.6, 104.8, 86, 85.3, 102.9, 110.4, 115.3, 114.7, 110.2, 98.3, 101.9, 100.8, 111.6, 105.4, 116.2, 115.7, 118, 110.9, 113.4, 111.2, 113.3, 115.9, 115.2, 110 ]
},
"filter": "Grade",
"opacity": 0.4,
"point_size": 4,
"margin": 10,
"id": "chart98b9fb1b56"
};
scatter = d3.scatter_matrix()
.width(params.width)
.height(params.height)
.opacity(params.opacity)
.point_size(params.point_size)
.default_filter(params.default_filter)
.filter(params.filter)
.group(params.group)
.margin(params.margin)
.id(params.id)
if(!params.data){
d3.json(params.data_file, function(error, d) {
d3.select("#" + params.id)
.datum(d)
.call(scatter)
});
}else{
d3.select("#" + params.id)
.datum(params.data)
.call(scatter)
}
return scatter;
}
$(document).ready(function(){
draw()
});
</script>
</body>
<script src="//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>