JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="http://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="http://rawgithub.com/tmcw/simple-statistics/master/src/simple_statistics.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://public.opencpu.org/js/archive/opencpu-0.4.js"></script>
<div id="vis"></div>
<input type='submit' value='Add Reg Line' id='click'>
<textarea id="input" style="display:none;">
mod = lm(mpg ~ wt, data = mtcars)
predict(mod, interval = "confidence")
</textarea>
<button id="submitbutton" type="button">Calc mean</button>

CSS

.area {
    fill: lightsteelblue;
    stroke-width: 0;
    opacity: 0.4;
    pointer-events: none;
}

.regline {
    stroke: steelblue;
    stroke-width: 2;
}
.d3-tip{
    font-size: 14px;
    font-family: Consolas;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.regline line {
    fill: none;
    stroke: gray;
    stroke-width: 1.5px;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//because identity is in base
ocpu.seturl("//public.opencpu.org/ocpu/library/base/R")

//actual handler
$("#submitbutton").on("click", function(){

    //arguments
    var mysnippet = new ocpu.Snippet($("#input").val());
    
    //disable button
    $("button").attr("disabled", "disabled");

    //perform the request
    var req = ocpu.call("identity", {
        "x" : mysnippet
    }, function(session){
        session.getObject(function(outtxt){
            console.log(outtxt)
        });
    });
        
    //if R returns an error, alert the error message
    req.fail(function(){
        alert("Server error: " + req.responseText);
    });      
    
    req.always(function(){
        $("button").removeAttr("disabled");    
    });
});    



d3.json("https://cran.ocpu.io/reshape2/data/tips/json?digits=4", function(result){
    
  
    var dataset = result.map(function(d){
       return [d.tip, d.total_bill, d.sex] 
    })



var w = 400,
    h = 400,
    padding = 30

var margin = {top: 30, left: 50, bottom: 40, right: 10},
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom

// define x and y scales

var xScale = d3.scale.linear()
  .range([0, width])
  .domain([0, d3.max(dataset, I(0))])
  .nice()
  
  
var yScale = d3.scale.linear()
  .range([height, 0])
  .domain([0, d3.max(dataset, I(1))])
  .nice()
  

var colorScale = d3.scale.ordinal()
  .range(['red', 'blue'])





// create svg element
var svg = d3.select("#vis")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


// bind data and create circles
var circle = svg.selectAll("circle")
  .data(dataset)
  .enter()
    .append("circle")

// style circles by setting location and radius
circle
  .attr("cx", function(d){return xScale(d[0])})
  .attr("cy", function(d){return yScale(d[1])})
  .attr("r", 3)  
  .attr("fill", function(d){return colorScale(d[2])})
  .on("click",...