JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8064971/power.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<body>
    <div id="graph" class="aGraph"></div>
    <div id="slider-range" style="width: 80%px; margin-left:10%; margin-right:10%"></div>
    <div>
        <p>
            <label for="amount">Date range:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold; width:300px;" />
        </p>
        
    </div>
    <div>
        <p>This displays my workouts since I started tracking them using <a href="http://beyondthewhiteboard.com">Beyond the whiteboard</a> </p>
        <p>The x axis is length of workout, i.e. how long it took me to complete it.</p>
        <p>The y Axis is the wattage as calculated by BTW</p>
        <p>The blue line shows the line of best fit between the filtered workouts</p>
        <p>There is still a lot to do in terms of interactivity:</p> 
        <ul><li>A way of showing a number of best fit lines for different time windows to see if there is improvement.</li>
            <li>swap the ends on the date slider so that now is on the right</li>
            <li>show the actual dates</li>
            <li>toggle for the red lables</li>
            <li>implement a better tool tip</li>
            <li>find out how to make the axis labels stay when the marker labels are removed</li>
            </ul>
        <p>I'd like to also try changing it to a curve of best fit eventually.</p>
        <p>The data is scraped from their website, so isn't live (snapshot taken on 2013-06-05).</p>
       ...

CSS

.tt{
    font-family:sans-serif;
    font-size:1em;
    background:white;
}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

/////////  CONTROLS  ////////////
//var older_than = 0;//days
//var newer_than = 50;//days
//to see all, set newer_than to something silly like 5000 and older_than to 0

//Width and height
var w = 700;
var h = 700;
var padding = 30;
/////////////////////////////////

function linearRegression(y,x){
/*Code taken from Trent Richardson's blog - Compute Linear Regressions in Javascript
http://trentrichardson.com/2010/04/06/compute-linear-regressions-in-javascript/
*/
        var lr = {};
        var n = y.length;
        var sum_x = 0;
        var sum_y = 0;
        var sum_xy = 0;
        var sum_xx = 0;
        var sum_yy = 0;
        
        for (var i = 0; i < y.length; i++) {
            sum_x += x[i];
            sum_y += y[i];
            sum_xy += (x[i]*y[i]);
            sum_xx += (x[i]*x[i]);
            sum_yy += (y[i]*y[i]);
        } 
        
        lr['slope'] = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);
        lr['intercept'] = (sum_y - lr.slope * sum_x)/n;
        lr['r2'] = Math.pow((n*sum_xy - sum_x*sum_y)/
                            Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);
        
        return lr;
}

//console.log(powerData);
window.dataset = powerData[0].data.map(function(d){
    var flbs_TO_w = 1.35581795; //to convert the foot pounds/second into watts - a much more civilised unit
    //make a workout object
    workout={};
    workout.duration = d.x;
    workout.watts = d.y * flbs_TO_w;
    workout.name = d.name;
    workout.date = d.date
    workout.age = (new Date() - new Date(d.date) )/ 86400000 ;//ms in a day
    return workout;
    });
//console.log(dataset);


//Create scale functions
var xScale = d3.scale.linear()
           .domain([0, d3.max(dataset, function(d) { return d.duration; })])
           .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
           .domain([0, d3.max(dataset, function(d) { return d.watts; })])
           .range([h - padding, padding]);

var rScale =...