Skip to content

Commit

Permalink
added R script and sample input data
Browse files Browse the repository at this point in the history
  • Loading branch information
shubhamkmr47 committed Aug 17, 2016
1 parent 091531d commit dd317d4
Show file tree
Hide file tree
Showing 10 changed files with 369 additions and 47 deletions.
45 changes: 42 additions & 3 deletions inst/www/js/components/ComatrixModal.js
Expand Up @@ -14,19 +14,37 @@ along with this program. If not, see <http://www.gnu.org/licenses/>
*/
var ComatrixModal = React.createClass({

getInitialState: function() {
return { showResults: false };
},

onClick: function() {
this.setState({ showResults: true });
},

render: function() {

var inst, bold_style = {'fontSize': '15', 'fontWeight': 'bold'};

if (!this.state.showResults) {
inst = <Button onClick={this.onClick}>Description</Button>
}
else {
inst = <p style = {bold_style}>Description:</p>;
}

return (
<Modal {...this.props} title="Correlation and Covariance Plots">

<div className='modal-body'>

Input format: The csv file of data should contain a column of rows.

<Input type='select' label='Choose Analyses' ref='comatrix'>
<option value="cor">Correlation Matrix</option>
<option value="cov">Covariance Matrix</option>
</Input>

{inst}
{ this.state.showResults ? <ComatInstruction /> : null }

</div>

<div className='modal-footer'>
Expand All @@ -42,3 +60,24 @@ var ComatrixModal = React.createClass({
this.props.onClick(this, this.refs.comatrix.getValue());
}
});

var ComatInstruction = React.createClass({
render: function() {
var style = {'fontFamily': 'DROID SANS MONO'};

return (
<div id="results" className="search-results">
<p>{'Input format: The csv file of data should contain a column of rows.'}</p>
<p>{'Input: '} <a href="./data/comatrix.csv">{"Sample Data"}</a></p>
<table style = {style}>
<tr>
<td>{'mat <- cor(data) # cov(data)'}</td>
</tr>
<tr>
<td>{'heatmap(mat)'}</td>
</tr>
</table>
</div>
);
}
});
46 changes: 45 additions & 1 deletion inst/www/js/components/DendogramModal.js
Expand Up @@ -12,15 +12,34 @@ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
details. You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/

var DendogramModal = React.createClass({

getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},

render: function() {

var inst, bold_style = {'fontSize': '15', 'fontWeight': 'bold'};

if (!this.state.showResults) {
inst = <Button onClick={this.onClick}>Description</Button>
}
else {
inst = <p style = {bold_style}>Description:</p>;
}

return (
<Modal {...this.props} title="Dendogram">

<div className='modal-body'>
Input format: The csv file of data should contain a column of rows.

{inst}
{ this.state.showResults ? <DendogramInstruction /> : null }
</div>

<div className='modal-footer'>
Expand All @@ -35,3 +54,28 @@ var DendogramModal = React.createClass({
this.props.onClick(this);
}
});

var DendogramInstruction = React.createClass({
render: function() {
var style = {'fontFamily': 'DROID SANS MONO'};

return (
<div id="results" className="search-results">
<p>{'Input format: The csv file of data should contain a column of rows.'}</p>
<p>{'Input: '} <a href="./data/dendogram.csv" target="_blank">{"Sample Data"}</a></p>
<table style = {style}>

<tr>
<td>{'distance <- dist(data, method = "eucledian")'}</td>
</tr>
<tr>
<td>{'hc <- hclust(distance, method = "complete")'}</td>
</tr>
<tr>
<td>{'plot(hc)'}</td>
</tr>
</table>
</div>
);
}
});
39 changes: 38 additions & 1 deletion inst/www/js/components/HeatmapModal.js
Expand Up @@ -13,14 +13,30 @@ details. You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
var HeatmapModal = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},

render: function() {
var inst, bold_style = {'fontSize': '15', 'fontWeight': 'bold'};

if (!this.state.showResults) {
inst = <Button onClick={this.onClick}>Description</Button>
}
else {
inst = <p style = {bold_style}>Description:</p>;
}

return (
<Modal {...this.props} title="Heatmap">

<div className='modal-body'>
Input format: The csv file of data should contain a column of rows.

{inst}
{ this.state.showResults ? <HeatmapInstruction /> : null }
</div>

<div className='modal-footer'>
Expand All @@ -36,3 +52,24 @@ var HeatmapModal = React.createClass({
this.props.onClick(this);
}
});

var HeatmapInstruction = React.createClass({
render: function() {
var style = {'fontFamily': 'DROID SANS MONO'};

return (
<div id="results" className="search-results">
<p>{'Input format: The csv file of data should contain a column of rows.'}</p>
<p>{'Input: '} <a href="./data/heatmap.csv" target="_blank">{"Sample Data"}</a></p>
<table style = {style}>
<tr>
<td>{'library(stats)'}</td>
</tr>
<tr>
<td>{'heatmap(data)'}</td>
</tr>
</table>
</div>
);
}
});
38 changes: 38 additions & 0 deletions inst/www/js/components/KMeansModal.js
Expand Up @@ -14,9 +14,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>
*/
var KMeansModal = React.createClass({

getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},

render: function() {

var options_list = [];
var inst, bold_style = {'fontSize': '15', 'fontWeight': 'bold'};

if (!this.state.showResults) {
inst = <Button onClick={this.onClick}>Description</Button>
}
else {
inst = <p style = {bold_style}>Description:</p>;
}

this.props.variables.forEach(function (variable) {
options_list.push(<option value={variable}>{variable}</option>);
Expand All @@ -36,6 +51,9 @@ var KMeansModal = React.createClass({
</Input>

<Input type="number" label="Number of clusters (k)" ref="kvalue" pattern="[0-9]*" min = "1" step = "1"/>

{inst}
{ this.state.showResults ? <KMeansInstruction /> : null }
</div>

<div className='modal-footer'>
Expand All @@ -57,3 +75,23 @@ var KMeansModal = React.createClass({
}
}
});

var KMeansInstruction = React.createClass({
render: function() {
var style = {'fontFamily': 'DROID SANS MONO'};

return (
<div id="results" className="search-results">
<p>{'Select two columns and k value i.e. number of clusters.'}</p>
<table style = {style}>
<tr>
<td>{'library(ggplot2)'}</td>
</tr>
<tr>
<td>{'ggplot(data, aes(var_x, var_y, color = Species)) + geom_point()'}</td>
</tr>
</table>
</div>
);
}
});
56 changes: 21 additions & 35 deletions inst/www/js/components/MyBar.js
Expand Up @@ -163,61 +163,49 @@ var MyBar = React.createClass(
<MenuItem onClick={this.exportClick}>Export</MenuItem>
</DropdownButton>

<DropdownButton title="Plot">
<DropdownButton title="Plots">

<ModalTrigger modal={<PlotModal onClick={this.plotClick.bind(this, "lineChart")} variables={this.props.variables} />}>
<MenuItem>Line</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<PlotModal onClick={this.plotClick.bind(this, "regression")} variables={this.props.variables} />}>
<MenuItem>Regression</MenuItem>
<MenuItem>Line Plot</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<HistModal onClick={this.plotClick.bind(this, "histogram")} variables={this.props.variables} />}>
<MenuItem>Histogram</MenuItem>
</ModalTrigger>

</DropdownButton>

<DropdownButton title="Statistics">
<ModalTrigger modal={<DendogramModal onClick={this.plotD3Chart.bind(this, "plotDendogram")} variables={this.props.variables} />}>
<MenuItem>Dendogram</MenuItem>
<ModalTrigger modal={<BarChartModal onClick={this.plotBarChart.bind(this, "plotBarChart")} variables={this.props.variables} />}>
<MenuItem>Bar Plot</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<HeatmapModal onClick={this.plotD3Chart.bind(this, "plotHeatmap")} variables={this.props.variables} />}>
<MenuItem>Heatmap</MenuItem>
<ModalTrigger modal={<ScatterPlotModal onClick={this.plotScatterChart.bind(this, "plotScatterPlot")} variables={this.props.variables} />}>
<MenuItem>Scatter Plot</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<KMeansModal onClick={this.plotKMeansChart.bind(this, "plotKMeans")} variables={this.props.variables} />}>
<MenuItem>K-means clustering</MenuItem>
<ModalTrigger modal={<BoxPlotModal onClick={this.plotClick.bind(this, "boxChart")} variables={this.props.variables} />}>
<MenuItem>Box Plot</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<ScatterMatrixModal onClick={this.plotD3Chart.bind(this, "plotScatterMatrix")} variables={this.props.variables} />}>
<MenuItem>Scatter Matrix</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<QQPlotModal onClick={this.plotQQChart.bind(this, "plotQQ")} variables={this.props.variables} />}>
<MenuItem>QQ plot</MenuItem>
<ModalTrigger modal={<HeatmapModal onClick={this.plotD3Chart.bind(this, "plotHeatmap")} variables={this.props.variables} />}>
<MenuItem>Heatmap</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<TimeSeriesModal onClick={this.plotD3Chart.bind(this, "plotTimeSeries")} variables={this.props.variables} />}>
<MenuItem>Time Series</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<ComatrixModal onClick={this.plotComatrixChart.bind(this, "plotComatrix")} variables={this.props.variables} />}>
<MenuItem>Correlation & Covariance Matrix</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<BarChartModal onClick={this.plotBarChart.bind(this, "plotBarChart")} variables={this.props.variables} />}>
<MenuItem>Bar Plot</MenuItem>
</ModalTrigger>
</DropdownButton>

<ModalTrigger modal={<BoxPlotModal onClick={this.plotClick.bind(this, "boxChart")} variables={this.props.variables} />}>
<MenuItem>Box Plot</MenuItem>
<DropdownButton title="Statistics">
<ModalTrigger modal={<QQPlotModal onClick={this.plotQQChart.bind(this, "plotQQ")} variables={this.props.variables} />}>
<MenuItem>QQ plot</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<ScatterPlotModal onClick={this.plotScatterChart.bind(this, "plotScatterPlot")} variables={this.props.variables} />}>
<MenuItem>Scatter Plot</MenuItem>
<ModalTrigger modal={<ComatrixModal onClick={this.plotComatrixChart.bind(this, "plotComatrix")} variables={this.props.variables} />}>
<MenuItem>Correlation & Covariance Matrix</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<PlotModal onClick={this.plotClick.bind(this, "regression")} variables={this.props.variables} />}>
Expand All @@ -226,8 +214,7 @@ var MyBar = React.createClass(

</DropdownButton>


<DropdownButton title="Analyses">
<DropdownButton title="Analysis">

<ModalTrigger modal={<ChoiceModal onClick={this.uniClick} variables={this.props.variables} />}>
<MenuItem>Univariate</MenuItem>
Expand All @@ -249,12 +236,12 @@ var MyBar = React.createClass(

<DropdownButton title="Clustering">

<ModalTrigger modal={<ClusterModal onClick={this.clusterClick.bind(this, "kmeans")} variables={this.props.variables} />}>
<MenuItem>K-means</MenuItem>
<ModalTrigger modal={<DendogramModal onClick={this.plotD3Chart.bind(this, "plotDendogram")} variables={this.props.variables} />}>
<MenuItem>Heirarichal Clustering</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<ClusterModal onClick={this.clusterClick.bind(this, "hierarchical")} variables={this.props.variables} />}>
<MenuItem>Hierarchical</MenuItem>
<ModalTrigger modal={<KMeansModal onClick={this.plotKMeansChart.bind(this, "plotKMeans")} variables={this.props.variables} />}>
<MenuItem>K-means clustering</MenuItem>
</ModalTrigger>

<ModalTrigger modal={<DensityClusterModal onClick={this.densityClusterClick.bind(this, "density")} variables={this.props.variables} />}>
Expand All @@ -272,7 +259,6 @@ var MyBar = React.createClass(
<ModalTrigger modal={<ClassifyModal ref="svm_modal" onClick={this.SVMClick} variables={this.props.variables} />}>
<MenuItem>SVM</MenuItem>
</ModalTrigger>

</DropdownButton>

<ModalTrigger modal={<DashboardModal onClick={this.dashboardClick.bind(this, "initDashboard")} variables={this.props.variables} />}>
Expand Down

0 comments on commit dd317d4

Please sign in to comment.