|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
.line { |
|
fill: none; |
|
stroke: #8e0912; |
|
stroke-width: 1.5px; |
|
} |
|
</style> |
|
<svg width="960" height="500"></svg> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
var n = 1000; |
|
//initial values |
|
var v0 = -60; // membrane potential |
|
var u0 = 0; // recovery variable |
|
|
|
// create data array |
|
var data = []; |
|
data.push({ |
|
"v": v0, |
|
"u": u0, |
|
"x": 0 |
|
}); |
|
|
|
// generate some data |
|
for (var i = 1; i < n; i++) { |
|
var newData = createData(data[data.length - 1].u, data[data.length - 1].v); |
|
newData.x = i; |
|
data.push(newData); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
// create var svg (svg already exist) |
|
// set padding/margins for svg |
|
// set width/height using the margins |
|
// append "g" (group container) |
|
// transform and translate (same as would be done |
|
// when setting up the axis) |
|
var svg = d3.select("svg"), |
|
margin = { |
|
top: 20, |
|
right: 20, |
|
bottom: 20, |
|
left: 40 |
|
}, |
|
width = +svg.attr("width") - margin.left - margin.right, |
|
height = +svg.attr("height") - margin.top - margin.bottom, |
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
|
|
// create scales |
|
var x = d3.scaleLinear() |
|
.domain([ |
|
d3.min(data, function(d) { |
|
return d.x; |
|
}), |
|
d3.max(data, function(d) { |
|
return d.x; |
|
}) |
|
]) |
|
.range([0, width]); |
|
|
|
var y = d3.scaleLinear() |
|
.domain([-70, 40]) |
|
.range([height, 0]); |
|
|
|
var line = d3.line() |
|
.curve(d3.curveBasis) |
|
.x(function(d, i) { |
|
return x(i); |
|
}) |
|
.y(function(d, i) { |
|
return y(d.v); |
|
}); |
|
|
|
|
|
// create clipPath |
|
// prevents the new data values |
|
// appended to the right side of the |
|
// plot from showing up until |
|
// the transition takes place |
|
g.append("defs").append("clipPath") |
|
.attr("id", "clip") |
|
.append("rect") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
// set up y axis |
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y)); |
|
|
|
// create path |
|
g.append("g") |
|
.attr("clip-path", "url(#clip)") |
|
.append("path") |
|
.datum(data) |
|
.attr("class", "line") |
|
.transition() |
|
.duration(100) |
|
.ease(d3.easeLinear) |
|
.on("start", tick); |
|
|
|
|
|
function tick() { |
|
// create new data |
|
n = n + 1; |
|
newData = createData(data[data.length - 1].u, data[data.length - 1].v); |
|
newData.x = n; |
|
|
|
// append new data |
|
data.push(newData); |
|
|
|
// draw new path |
|
d3.select(this) |
|
.attr("d", line) |
|
.attr("transform", null); |
|
|
|
// Slide it to the left. |
|
d3.active(this) |
|
.attr("transform", "translate(" + x(0) + ",0)") |
|
.transition() |
|
.on("start", tick); |
|
|
|
// Pop the old data point off the front. |
|
data.shift(); |
|
|
|
} |
|
|
|
|
|
function createData(u0, v0) { |
|
// Description: |
|
// Model created to mimic the behavior of a |
|
// thalamocortical cell of a cat dorsal |
|
// lateral geniculate nucleus as specifically defined |
|
// by Eugene Izhikevich ( p305 - Figure 8.31) |
|
// Izhikevich, E. M. (2007). |
|
// Dynamical Systems in Neuroscience: The Geometry of Excitability and Bursting. |
|
// (T. M. I. T. Press, Ed.), Dynamical Systems (Vol. First). MIT Press. |
|
// http://www.izhikevich.org/publications/dsn.pdf |
|
// Capacity |
|
var C = 200; |
|
// |
|
var vr = -60; |
|
// |
|
var vt = -50; |
|
// parameters used for RS |
|
var k = 1.6; |
|
var a = 0.01; |
|
var b = 0; |
|
var c = -50; |
|
var tau = 0.01; //single timestep (ms) |
|
var d = 10; // neocortical pyramidal neurons |
|
var vpeak = 35; // spike cutoff |
|
var count = 0; // # of firings |
|
// time span and step (ms) |
|
// var n=Math.round(period/tau); // number of simulation steps |
|
var v = v0; |
|
var vNew = 0; |
|
var u = u0; |
|
var uNew = 0; |
|
// sampling frequency |
|
// (only return every 100th sample) |
|
// with tau of 0.01 this is a sample |
|
// every 1ms |
|
var nIters = 100; |
|
// Input current |
|
var I = 100; |
|
// forward Euler method |
|
|
|
for (var i = 0; i < nIters; i++) { |
|
vNew = v + tau * (k * (v - vr) * (v - vt) - u + I) / C |
|
uNew = u + tau * a * (b * (v + 65) - u); |
|
if (vNew >= (vpeak + 0.1 * uNew)) { // a spike is fired! |
|
vNew = -60 - 0.1 * uNew; // membrane voltage reset |
|
uNew = uNew + d; // recovery variable update |
|
} |
|
if (vNew > -65) { |
|
b = 0 |
|
} else { |
|
b = 15 |
|
} |
|
v = vNew; |
|
u = uNew; |
|
} |
|
|
|
var data = { |
|
"v": vNew, |
|
"u": uNew, |
|
}; |
|
return (data); |
|
} |
|
</script> |
