erohinaelena/index.html

## index.html
<html>
<head>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="main.js"></script>
</body>
</html>

## main.css
.axis path,
.axis line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

## main.js
var margin = {top: 50, right: 20, bottom: 50, left: 40},
    width = 960 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom

var pointsNumber = 45
var Δ = 0.1

var x = d3.scale.linear()
    .domain([0, pointsNumber])
    .range([0, width])

var y = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0])

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

var area = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

area.append("g")
    .attr("class", "axis")
    .call(yAxis)

var areaGroup = area.append('g')
var sdtGroup = area.append('g')

var ε = 1e-6

function filterData(d, Δ){
    d = d.slice()
    var start = 0,
        result =[],
        trendBoundaries = [Infinity, -Infinity],
        currentPointBoundaries = [],
        prevTrendBoundaries = [],
        newY = d[0],
        lower = 0,
        upper = 1,
        pushPoint = function () { result.push({ x: start, y: newY }) }
    pushPoint()
    for (var i = 0; i < d.length; i++) {
        currentPointBoundaries = [
                (d[i] - d[start] + Δ) / (i - start),
                (d[i] - d[start] - Δ) / (i - start)
        ]
        prevTrendBoundaries = trendBoundaries.slice()
        if (trendBoundaries[upper] < currentPointBoundaries[upper] + ε) {
            trendBoundaries[upper] = currentPointBoundaries[upper]
        }
        if (currentPointBoundaries[lower] < trendBoundaries[lower] + ε) {
            trendBoundaries[lower] = currentPointBoundaries[lower]
        }
        if (trendBoundaries[lower] < trendBoundaries[upper] + ε) {
            trendBoundaries = [Infinity, -Infinity]
            i--
            newY = d3.sum(prevTrendBoundaries) * (i - start) / 2 + d[start]

            start = i
            d[start] = newY

            pushPoint()
        }
    }
    i--
    if (d.length > 1) newY = d3.sum(trendBoundaries) * (i - start) / 2 + d[start]
    start = i
    pushPoint()

    return result
}

var i = 0
var currentValue = Math.random()
var values = []
var limit = d3.scale.linear().clamp(true)

setInterval(function(){
    if (i < pointsNumber){
        currentValue = limit(currentValue + .3 * Math.random() - .15 + .01 * Math.cos(i * 5))
        values.push(currentValue)

        var circles = areaGroup.selectAll('circle')
            .data(values)
        circles.exit().remove()

        circles
            .enter().append('circle')
            .attr('cx', function(d, i) {return x(i) })
            .attr('cy', function(d) { return y(d) })
            .attr('r', 0)
            .attr('fill', '#aaa')
            .transition()
            .attr('r', 1.5)

        var data = filterData(values, Δ)

        var filteredDots = sdtGroup.selectAll('circle')
            .data(data, function (d) { return d.x + " " + d.y })
        filteredDots.exit().remove()
        filteredDots
            .enter().append('circle')
            .attr('cx', function(d) { return x(d.x) })
            .attr('cy', function(d) { return y(d.y) })
            .attr('fill', '#000')
            .attr('r', 0)
            .transition()
            .attr('r', 1.5)

        var boundaries = []
        function offsetLine (line, offset) {
            return [{x: line[0].x, y: line[0].y + offset}, {x: line[1].x, y: line[1].y + offset}]
        }
        d3.pairs(data).forEach(function(d){
            boundaries.push(d)
            boundaries.push(offsetLine(d, Δ))
            boundaries.push(offsetLine(d, -Δ))
        })

        var lines = areaGroup.selectAll('line')
            .data(boundaries, function (d) { return d[0].x + " " + d[0].y + " " + d[1].x + " " + d[1].y })
        lines.exit().remove()

        lines.enter().append('line')
            .attr('stroke', '#ccc')
            .attr('x1', function(d) { return x(d[0].x) })
            .attr('y1', function(d) { return y(d[0].y) })
            .attr('x2', function(d) { return x(d[1].x) })
            .attr('y2', function(d) { return y(d[1].y) })
        i++
    }
}, 100)

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<meta charset="utf-8">
	<link href="main.css" rel="stylesheet">
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	.axis path,
	.axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}
	var margin = {top: 50, right: 20, bottom: 50, left: 40},
	width = 960 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom

	var pointsNumber = 45
	var Δ = 0.1

	var x = d3.scale.linear()
	.domain([0, pointsNumber])
	.range([0, width])

	var y = d3.scale.linear()
	.domain([0, 1])
	.range([height, 0])

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)

	var area = svg
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	area.append("g")
	.attr("class", "axis")
	.call(yAxis)

	var areaGroup = area.append('g')
	var sdtGroup = area.append('g')

	var ε = 1e-6

	function filterData(d, Δ){
	d = d.slice()
	var start = 0,
	result =[],
	trendBoundaries = [Infinity, -Infinity],
	currentPointBoundaries = [],
	prevTrendBoundaries = [],
	newY = d[0],
	lower = 0,
	upper = 1,
	pushPoint = function () { result.push({ x: start, y: newY }) }
	pushPoint()
	for (var i = 0; i < d.length; i++) {
	currentPointBoundaries = [
	(d[i] - d[start] + Δ) / (i - start),
	(d[i] - d[start] - Δ) / (i - start)
	]
	prevTrendBoundaries = trendBoundaries.slice()
	if (trendBoundaries[upper] < currentPointBoundaries[upper] + ε) {
	trendBoundaries[upper] = currentPointBoundaries[upper]
	}
	if (currentPointBoundaries[lower] < trendBoundaries[lower] + ε) {
	trendBoundaries[lower] = currentPointBoundaries[lower]
	}
	if (trendBoundaries[lower] < trendBoundaries[upper] + ε) {
	trendBoundaries = [Infinity, -Infinity]
	i--
	newY = d3.sum(prevTrendBoundaries) * (i - start) / 2 + d[start]

	start = i
	d[start] = newY

	pushPoint()
	}
	}
	i--
	if (d.length > 1) newY = d3.sum(trendBoundaries) * (i - start) / 2 + d[start]
	start = i
	pushPoint()

	return result
	}

	var i = 0
	var currentValue = Math.random()
	var values = []
	var limit = d3.scale.linear().clamp(true)

	setInterval(function(){
	if (i < pointsNumber){
	currentValue = limit(currentValue + .3 * Math.random() - .15 + .01 * Math.cos(i * 5))
	values.push(currentValue)

	var circles = areaGroup.selectAll('circle')
	.data(values)
	circles.exit().remove()

	circles
	.enter().append('circle')
	.attr('cx', function(d, i) {return x(i) })
	.attr('cy', function(d) { return y(d) })
	.attr('r', 0)
	.attr('fill', '#aaa')
	.transition()
	.attr('r', 1.5)

	var data = filterData(values, Δ)

	var filteredDots = sdtGroup.selectAll('circle')
	.data(data, function (d) { return d.x + " " + d.y })
	filteredDots.exit().remove()
	filteredDots
	.enter().append('circle')
	.attr('cx', function(d) { return x(d.x) })
	.attr('cy', function(d) { return y(d.y) })
	.attr('fill', '#000')
	.attr('r', 0)
	.transition()
	.attr('r', 1.5)

	var boundaries = []
	function offsetLine (line, offset) {
	return [{x: line[0].x, y: line[0].y + offset}, {x: line[1].x, y: line[1].y + offset}]
	}
	d3.pairs(data).forEach(function(d){
	boundaries.push(d)
	boundaries.push(offsetLine(d, Δ))
	boundaries.push(offsetLine(d, -Δ))
	})

	var lines = areaGroup.selectAll('line')
	.data(boundaries, function (d) { return d[0].x + " " + d[0].y + " " + d[1].x + " " + d[1].y })
	lines.exit().remove()

	lines.enter().append('line')
	.attr('stroke', '#ccc')
	.attr('x1', function(d) { return x(d[0].x) })
	.attr('y1', function(d) { return y(d[0].y) })
	.attr('x2', function(d) { return x(d[1].x) })
	.attr('y2', function(d) { return y(d[1].y) })
	i++
	}
	}, 100)