added scatterplot with exponential, logarithmic and polynomial trendl…

…ines
shubhamkmr47 · Jul 26, 2016 · f09b7cf · f09b7cf
1 parent b5b4abc
commit f09b7cf
Show file tree

Hide file tree

Showing 14 changed files with 444 additions and 71 deletions.
diff --git a/NAMESPACE b/NAMESPACE
@@ -12,3 +12,4 @@ export(timeSeries)
 export(comatrix)
 export(groupBar)
 export(simpleBar)
+export(scatterplot)
diff --git a/R/scatterplot.R b/R/scatterplot.R
@@ -0,0 +1,56 @@
+scatterplot <- function(data, var_x, var_y){
+  library(jsonlite)
+
+  data <- fromJSON(data)
+  data <- na.omit(data)
+
+  data <- data[c(var_x, var_y)]
+  colnames(data) <- c("X", "Y")
+  rownames(data) <- 1:nrow(data)
+
+  scatterdata <- toJSON(data)
+
+  x <- data$X
+  y <- data$Y
+
+  # basic straight line of fit
+  fit <- glm(y~x)
+  co <- coef(fit)
+  intercept <- as.vector(fit$coefficients[1])
+  slope <- as.vector(fit$coefficients[2])
+
+  # exponential
+  f <- function(x,a,b) {a * exp(b * x)}
+  expdata <- tryCatch(nls(y ~ f(x,a,b), start = c(a=1, b=1)), error=function(e) "Singular Gradient")
+  if(expdata != "Singular Gradient"){
+    fit <- nls(y ~ f(x,a,b), start = c(a=1, b=1))
+    co <- coef(fit)
+    expdata <- curve(f(x, a=co[1], b=co[2]))
+    expdata <- sapply(expdata, as.character)
+    expdata <- as.data.frame(expdata)
+    colnames(expdata) <- c("X", "Y")
+    expdata <- toJSON(expdata)
+  }
+
+  # logarithmic
+  f <- function(x,a,b) {a * log(x) + b}
+  fit <- nls(y ~ f(x,a,b), start = c(a=1, b=1))
+  co <- coef(fit)
+  logdata <- curve(f(x, a=co[1], b=co[2]))
+  logdata <- sapply(logdata, as.character)
+  logdata <- as.data.frame(logdata)
+  colnames(logdata) <- c("X", "Y")
+  logdata <- toJSON(logdata)
+
+  # polynomial
+  f <- function(x,a,b,d) {(a*x^2) + (b*x) + d}
+  fit <- nls(y ~ f(x,a,b,d), start = c(a=1, b=1, d=1))
+  co <- coef(fit)
+  poldata <- curve(f(x, a=co[1], b=co[2], d=co[3]))
+  poldata <- sapply(poldata, as.character)
+  poldata <- as.data.frame(poldata)
+  colnames(poldata) <- c("X", "Y")
+  poldata <- toJSON(poldata)
+
+  list(scatterdata = paste(scatterdata), intercept = (intercept), slope = paste(slope), expdata = paste(expdata), logdata = paste(logdata), poldata = paste(poldata))
+}
diff --git a/inst/www/components.html b/inst/www/components.html
@@ -86,6 +86,9 @@
 		<script src="./js/colormap.js"></script>
 		<link rel="stylesheet" href="./css/colormap.css" />
 
+		<!-- Resources related to scatter plot -->
+		<script src="js/components/ScatterPlotModal.js" type="text/jsx"></script>
+
 		<script src="js/components/HeatmapModal.js" type="text/jsx"></script>
 		<script src="js/components/NewChartModal.js" type="text/jsx"></script>
 

diff --git a/inst/www/data/barchart.csv b/inst/www/data/barchart.csv
@@ -1,5 +1,5 @@
 Group,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
-CA,270,449,215,385,106,881,411
+CA,200,449,215,385,106,881,411
 TX,202,327,142,245,701,565,247
 NY,120,214,105,199,535,512,260
 FL,114,193,925,160,478,474,318

diff --git a/inst/www/js/barplot.js b/inst/www/js/barplot.js
@@ -1,4 +1,7 @@
-function plotSimpleBar(data){
+function plotSimpleBar(plotData){
+
+  var ylabel = plotData.value;
+  var data = plotData.data;
 
   d3.selectAll("svg > *").remove();
 
@@ -25,14 +28,13 @@ function plotSimpleBar(data){
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
     .append("g")
-      .attr("transform",
-            "translate(" + margin.left + "," + margin.top + ")");
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
   data.forEach(function(d) {
       d.value = +d.value;
   });
 
-  x.domain(data.map(function(d) { return d.date; }));
+  x.domain(data.map(function(d) { return d.Group; }));
   y.domain([0, d3.max(data, function(d) { return d.value; })]);
 
   svg.append("g")
@@ -51,15 +53,16 @@ function plotSimpleBar(data){
     .append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", 6)
+      .attr("x", 10)
       .attr("dy", ".71em")
       .style("text-anchor", "end")
-      .text("y-coordinate");
+      .text(ylabel);
 
   svg.selectAll("bar")
       .data(data)
     .enter().append("rect")
       .style("fill", "steelblue")
-      .attr("x", function(d) { return x(d.date); })
+      .attr("x", function(d) { return x(d.Group); })
       .attr("width", x.rangeBand())
       .attr("y", function(d) { return y(d.value); })
       .attr("height", function(d) { return height - y(d.value); });
@@ -117,13 +120,15 @@ function plotGroupBar(data){
 
   svg.append("g")
       .attr("class", "y axis")
-      .call(yAxis)
-    .append("text")
+      .call(yAxis);
+
+    svg.append("text")
+      .attr("class", "ylabel")
       .attr("transform", "rotate(-90)")
       .attr("y", 6)
       .attr("dy", ".71em")
       .style("text-anchor", "end")
-      .text("Population");
+      .text("y-coordinate");
 
   var state = svg.selectAll(".state")
       .data(data)
@@ -173,8 +178,8 @@ function plotStackBar(data){
     rowNames.forEach(function(c) { d[c] = +d[c]; });
   });
 
-  var margin = {top: 20, right: 50, bottom: 30, left: 40},
-      width = $(document).width() - margin.left - margin.right,
+  var margin = {top: 20, right: 150, bottom: 30, left: 40},
+      width = $(document).width()*0.9 - margin.left - margin.right,
       height = 500 - margin.top - margin.bottom;
 
   var x = d3.scale.ordinal()
@@ -208,6 +213,25 @@ function plotStackBar(data){
     x.domain(layers[0].map(function(d) { return d.x; }));
     y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();
 
+    var legend = svg.selectAll(".legend")
+        .data(rowNames.slice())
+      .enter().append("g")
+        .attr("class", "legend")
+        .attr("transform", function(d, i) { return "translate(120," + i * 20 + ")"; });
+
+    legend.append("rect")
+        .attr("x", width )
+        .attr("width", 10)
+        .attr("height", 18)
+        .style("fill", function(d, i) { return z(i); });
+
+    legend.append("text")
+        .attr("x", width - 24)
+        .attr("y", 9)
+        .attr("dy", ".35em")
+        .style("text-anchor", "end")
+        .text(function(d) { return d; });
+
     var layer = svg.selectAll(".layer")
         .data(layers)
       .enter().append("g")

diff --git a/inst/www/js/components/BivariateModal.js b/inst/www/js/components/BivariateModal.js
@@ -4,16 +4,18 @@ var BivariateModal = React.createClass({
 		var options_list = [];
 
 		this.props.variables.forEach(function (variable) {
-			options_list.push(<option value={variable}>{variable}</option>);				
+			options_list.push(<option value={variable}>{variable}</option>);
 		});
 
+		var label_x = 'Variable - X (' + options_list.length + ')', label_y = 'Variable - Y (' + options_list.length + ')';
+
 		return (
 			<Modal {...this.props} title="Choose data">
 				<div className='modal-body'>
-					<Input type='select' label='Variable - X' ref='first'>
+					<Input type='select' label={label_x} ref='first'>
 						{options_list}
 					</Input>
-					<Input type='select' label='Variable - Y' ref='second'>
+					<Input type='select' label={label_y} ref='second'>
 						{options_list}
 					</Input>
 					<Input type='select' label='Functions' ref='fn' multiple>
@@ -33,4 +35,4 @@ var BivariateModal = React.createClass({
 		this.props.onClick(this, this.refs.first.getValue(), this.refs.second.getValue(), this.refs.fn.getValue());
 	}
 
-});
+});
diff --git a/inst/www/js/components/ChoiceModal.js b/inst/www/js/components/ChoiceModal.js
@@ -4,13 +4,15 @@ var ChoiceModal = React.createClass({
 		var options_list = [];
 
 		this.props.variables.forEach(function (variable) {
-			options_list.push(<option value={variable}>{variable}</option>);				
+			options_list.push(<option value={variable}>{variable}</option>);
 		});
 
+		var label = 'Variables (' + options_list.length + ')';
+
 		return (
 			<Modal {...this.props} title="Choose data">
 				<div className='modal-body'>
-					<Input type='select' label='Variables' ref='first' multiple>
+					<Input type='select' label={label} ref='first' multiple>
 						{options_list}
 					</Input>
 					<Input type='select' label='Functions' ref='second' multiple>
@@ -20,7 +22,7 @@ var ChoiceModal = React.createClass({
 						<option value='variance'>Variance</option>
 						<option value='skewness'>Skewness</option>
 						<option value='kurtosis'>Kurtosis</option>
-					</Input>	
+					</Input>
 				</div>
 		        <div className='modal-footer'>
     			    <Button onClick={this.handleClick}>Submit</Button>
@@ -31,6 +33,6 @@ var ChoiceModal = React.createClass({
 
 	handleClick: function() {
 		this.props.onRequestHide();
-		this.props.onClick(this, this.refs.first.getValue(), this.refs.second.getValue());		
+		this.props.onClick(this, this.refs.first.getValue(), this.refs.second.getValue());
 	}
-});
+});
diff --git a/inst/www/js/components/DashboardModal.js b/inst/www/js/components/DashboardModal.js
@@ -2,11 +2,15 @@ var DashboardModal = React.createClass({
 
 	render: function() {
 
-		var options_list = [];
+		var button_list = [];
 
 		var plotId = getDashboardOptionIds(), plotType = getDashboardOptionType(), plotTime = getDashboardOptionTime();
 		var count = plotId.length;
 
+		var button_style = {
+			"width": "100%"
+		};
+
 		if (count == 0) {
 			return (
 				<Modal {...this.props} title="Dashboard">
@@ -23,32 +27,26 @@ var DashboardModal = React.createClass({
 		}
 
 		for(var i = 1; i <= count; i = i + 1){
-			options_list.push(<option value={plotId[i-1]}>{plotType[i-1] + ' ' + plotTime[i-1]}</option>);
+			button_list.push(<Button style = {button_style} onClick={this.handleClick.bind(this, plotId[i-1])} value={plotId[i-1]}>{plotType[i-1] + ' ' + plotTime[i-1]}</Button>);
 		}
 
 		return (
 			<Modal {...this.props} title="Dashboard">
 				<div className='modal-body'>
-
-					<Input type='select' label='Plot' ref='dashboardId'>
-						{options_list}
-					</Input>
+					{button_list}
 
 				</div>
-        <div className='modal-footer'>
-			    <Button onClick={this.handleClick}>Submit</Button>
-    		</div>
 			</Modal>
 		);
 	},
 
-  handleClick: function() {
+  handleClick: function(id) {
 
     this.props.onRequestHide();
 		if (this.refs.dashboardId == null){
 				this.props.onClick(this);
 		}
 		else
-			this.props.onClick(this, this.refs.dashboardId.getValue());
+			this.props.onClick(this, id);
   }
 });
diff --git a/inst/www/js/components/MyBar.js b/inst/www/js/components/MyBar.js
@@ -33,7 +33,9 @@ var MyBar = React.createClass(
 	},
 
 	plotClick: function(plotType, child, var_x, var_y, var_g, x_name, y_name) {
+		this.props.onClick("show-table");
 		this.props.onClick("plot", plotType, var_x, var_y, var_g, x_name, y_name);
+		this.props.onClick("show-table");
 	},
 
 	plotD3Chart: function(plotType, child) {
@@ -54,12 +56,22 @@ var MyBar = React.createClass(
 		this.props.onClick("show-table");
 	},
 
+	plotScatterChart: function(plotType, child, var_x, var_y, straight_bool, exponential_bool, polynomial_bool, logarithmic_bool){
+		this.props.onClick("show-table");
+		this.props.onClick("scatterPlot", plotType, var_x, var_y, straight_bool, exponential_bool, polynomial_bool, logarithmic_bool);
+		this.props.onClick("show-table");
+	},
+
 	uniClick: function(child, variables, functions) {
+		this.props.onClick("show-table");
 		this.props.onClick("stats", variables, functions);
+		this.props.onClick("show-table");
 	},
 
 	biClick: function(child, var_x, var_y, functions) {
+		this.props.onClick("show-table");
 		this.props.onClick("bivariate", var_x, var_y, functions);
+		this.props.onClick("show-table");
 	},
 
 	testClick: function(child, var_x, var_y, functions) {
@@ -134,10 +146,6 @@ var MyBar = React.createClass(
 							<MenuItem>Bar</MenuItem>
 						</ModalTrigger>
 
-						<ModalTrigger modal={<BoxPlotModal onClick={this.plotClick.bind(this, "boxChart")} variables={this.props.variables}  />}>
-							<MenuItem>Box</MenuItem>
-						</ModalTrigger>
-
 						<ModalTrigger modal={<BoxPlotModal onClick={this.plotClick.bind(this, "quadreg")} variables={this.props.variables}  />}>
 							<MenuItem>Quadratic</MenuItem>
 						</ModalTrigger>
@@ -185,6 +193,14 @@ var MyBar = React.createClass(
 							<MenuItem>Bar Plot</MenuItem>
 						</ModalTrigger>
 
+						<ModalTrigger modal={<BoxPlotModal onClick={this.plotClick.bind(this, "boxChart")} variables={this.props.variables}  />}>
+							<MenuItem>Box Plot</MenuItem>
+						</ModalTrigger>
+
+						<ModalTrigger modal={<ScatterPlotModal onClick={this.plotScatterChart.bind(this, "plotScatterPlot")} variables={this.props.variables}  />}>
+							<MenuItem>Scatter Plot</MenuItem>
+						</ModalTrigger>
+
 					</DropdownButton>