D3.js Dynamic Transitioning with Live Data - json

Question

Long time lurker, enthusiastic about learning D3! Anywhoo, I'm working on following Mr. Bostock's paths examples.
Now, I have a fiddle that is working just wonderfully - it is smooth, updates quickly, scales the x-axis and y-axis quite nicely.
This is a time series chart I'm trying to tackle. Basically, I'm taking sensor integers that go into a JSON array. My target is to receive this data in realtime; Sensor sends a temp, and I get a smooth reflection of that data on the chart in near realtime. Here's the rub. As soon as I add in the JSON fetching code, everything goes from smooth as butter to choppy and crazy. Here's what I'm working with... Please be understand that I am very new to D3.
Here is the nicely randomized code which displays the graph in the way I want:
var n = 40,
duration = 750,
now = new Date(Date.now() - duration),
random = d3.random.normal(0, 0.2),
count = 0,
data = d3.range(n).map(random);
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([now - (n - 2) * duration, now - duration])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([height, 0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function (d, i) {
return x(now - (n - 1 - i) * duration);
})
.y(function (d, i) {
return y(d);
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
var yAx = svg.append("g")
.attr("class", "y axis")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line");
var transition = d3.select({}).transition()
.duration(750)
.ease("linear");
tick();
function tick() {
transition = transition.each(function () {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data) + 10]);
// push a new data point onto the back
data.push(20 + Math.random() * 100);
// redraw the line, and slide it to the left
path.attr("d", line)
.attr("transform", null);
// slide the x-axis left, rescale the y-axis
axis.call(x.axis);
yAx.call(y.axis);
// slide the line left
path.transition()
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
// pop the old data point off the front
data.shift();
}).transition().each("start", tick);
}
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: orange;
stroke-width: 1.5px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Now, I realize that my poor understanding of transitions is probably getting me stuck. That being said, I need help! My trouble starts when I add the following:
First, I add var JSONdata = []; as a global, then right after function tick() {
transition = transition.each(function () { I add my JSON code:
d3.json("tempdata.php", function(error, data){
JSONdata = data;
data.forEach(function(d) {
JSONdata.temp = +d.temp;
})
I finish by wrapping up the end of the whole tick block with the final })
So it works... but it's slow and choppy! Methinks there be dragons in my transitions...? I'd like to have as near real time as possible, but even up to 5 seconds as a buffered delay would be acceptable.
Can anyone lend a hand or some enlightenment?
I'd like the graph to display a constant line with the last updated value, so even if the sensor goes offline, I'll see the last value. Granted, eventually I need to work out a round robin database type deal and actually face the issue of better timestamp handling. But, that can be for another day.
My JSFiddle with just the randomized data: http://jsfiddle.net/6z9qe46e/7/