erohinaelena/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background: #000;">

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>

</body>
</html>

## script.js
var margin = {top:0, right:0, bottom:0, left:0,body:0},
    width = window.innerWidth - margin.left - margin.right - margin.body * 2,
    height = window.innerHeight - margin.top - margin.bottom * 2 - margin.body * 2;


var color = d3.scale.ordinal().range(["#333","#666", "#555", "#444", "#222", "#777"]);

// Переменные для удава
var n = 6;
var m = 20, // number of samples per layer
    stack = d3.layout.stack(),
    data = d3.range(n).map(function() { return bumpLayer(m); });

var layers0 = stack(data);

d3.select("body")
    .style("margin", margin.body + "px");

var x = d3.scale.linear()
    .domain([0, m - 1])
    .range([0, width]);

var maxHeight = d3.max(layers0, function(layer) {
    return d3.max(layer, function(d) {
        return d.y0 + d.y;
    })
});
var y = d3.scale.linear()
    .domain([0, maxHeight])
    .range([height, height * 0.3]);

var area = d3.svg.area()
    .interpolate('basis')
    .x(function(d) { return x(d.x); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

// рисуем удава
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("padding", margin.top+'px '+margin.right+'px '+margin.bottom+'px '+margin.left+'px');

svg.selectAll("path")
    .data(layers0)
    .enter().append("path")
    .attr("d", area)
    .style("fill", function() {
        return color(Math.random());
    });

change_layers();
setInterval('change_layers()',2000);

//---------------------------FUNCTIONS-------------------------
function change_layers(){

// Создать новые данные

    data = data.map(function(layer) {

        layer = layer.map(function(d) {return d.y});
        layer.reverse();
        layer.push(Math.random() * d3.max(layer));
        bump(layer, m+1);
        layer.reverse();
        layer.pop();
        layer = layer.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
        return layer;

    });
    var layers0 = stack(data);

// Уточнить функцию для подгонки высоты
    y.domain([0, d3.max(layers0, function(layer) {

        return d3.max(layer, function(d) {
            return d.y0 + d.y;
        });
    })]);
//Подогнать высоту
    var area = d3.svg.area()
        .interpolate('basis')
        .x(function(d) { return x(d.x); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });


// Обновить данные
    svg.selectAll("path")
        .data(layers0)
        .transition('updatePath')
        .ease('linear')
        .duration(2000)
        .attr("d", area);
}

function bump(a, m) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
        var w = (i / m - y) * z;
        a[i] += x * Math.exp(-w * w);
    }
}

// Генератор данных от Майка Бостока
function bumpLayer(m) {
    var a = [], i;
    for (i = 0; i < m; ++i) a[i] = 0;
    for (i = 0; i < 5; ++i) bump(a, m);
    return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body style="background: #000;">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="script.js"></script>

	</body>
	</html>
	var margin = {top:0, right:0, bottom:0, left:0,body:0},
	width = window.innerWidth - margin.left - margin.right - margin.body * 2,
	height = window.innerHeight - margin.top - margin.bottom * 2 - margin.body * 2;


	var color = d3.scale.ordinal().range(["#333","#666", "#555", "#444", "#222", "#777"]);

	// Переменные для удава
	var n = 6;
	var m = 20, // number of samples per layer
	stack = d3.layout.stack(),
	data = d3.range(n).map(function() { return bumpLayer(m); });

	var layers0 = stack(data);

	d3.select("body")
	.style("margin", margin.body + "px");

	var x = d3.scale.linear()
	.domain([0, m - 1])
	.range([0, width]);

	var maxHeight = d3.max(layers0, function(layer) {
	return d3.max(layer, function(d) {
	return d.y0 + d.y;
	})
	});
	var y = d3.scale.linear()
	.domain([0, maxHeight])
	.range([height, height * 0.3]);

	var area = d3.svg.area()
	.interpolate('basis')
	.x(function(d) { return x(d.x); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	// рисуем удава
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.style("padding", margin.top+'px '+margin.right+'px '+margin.bottom+'px '+margin.left+'px');

	svg.selectAll("path")
	.data(layers0)
	.enter().append("path")
	.attr("d", area)
	.style("fill", function() {
	return color(Math.random());
	});

	change_layers();
	setInterval('change_layers()',2000);

	//---------------------------FUNCTIONS-------------------------
	function change_layers(){

	// Создать новые данные

	data = data.map(function(layer) {

	layer = layer.map(function(d) {return d.y});
	layer.reverse();
	layer.push(Math.random() * d3.max(layer));
	bump(layer, m+1);
	layer.reverse();
	layer.pop();
	layer = layer.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
	return layer;

	});
	var layers0 = stack(data);

	// Уточнить функцию для подгонки высоты
	y.domain([0, d3.max(layers0, function(layer) {

	return d3.max(layer, function(d) {
	return d.y0 + d.y;
	});
	})]);
	//Подогнать высоту
	var area = d3.svg.area()
	.interpolate('basis')
	.x(function(d) { return x(d.x); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });


	// Обновить данные
	svg.selectAll("path")
	.data(layers0)
	.transition('updatePath')
	.ease('linear')
	.duration(2000)
	.attr("d", area);
	}

	function bump(a, m) {
	var x = 1 / (.1 + Math.random()),
	y = 2 * Math.random() - .5,
	z = 10 / (.1 + Math.random());
	for (var i = 0; i < m; i++) {
	var w = (i / m - y) * z;
	a[i] += x * Math.exp(-w * w);
	}
	}

	// Генератор данных от Майка Бостока
	function bumpLayer(m) {
	var a = [], i;
	for (i = 0; i < m; ++i) a[i] = 0;
	for (i = 0; i < 5; ++i) bump(a, m);
	return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
	}