tomgp/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    #ripples

  
## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ripples</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="style.css">
	<style>

	</style>

</head>
<body>
	<div class="content">
	</div>
</body>
<script>


	function getData(t){
		function normalize(a){
			var total = d3.sum(a);
			return a.map(function(d){
				return d/total;
			});
		}

		return d3.range(20)
			.map(function(d,i){
				var i = i+t;
				return {
					probabilities:normalize([
										(Math.sin(i/10)),
										(Math.sin((i+1)/20)),
										(Math.sin((i+2)/30)),
										(Math.sin((i+3)/40)),
										(Math.sin((i+4)/50)),
										(Math.sin((i+5)/60)),
										(Math.sin((i+6)/10)) ])
				}
			});
	}


	var height = 400, width = 800, margin = { top:30 ,left:30, bottom:30 ,right:30 }

	var svg = d3.select('.content').append('svg')
		.attr({ height:height, width:width })
		.append('g')
		.attr('transform','translate('+margin.left+','+margin.top+')')

	function column(d,i){
		var parent = d3.select(this);

		var yScale = d3.scale.linear()
			.domain([0,6])
			.range([0, height-(margin.top+margin.bottom)]);

		var arc = d3.svg.arc()
			.innerRadius(0)
			.outerRadius(20)
			.startAngle(0)
			.endAngle(function(d,i){
				console.log(d,i);
				return 2 * Math.PI * d;
			});

		parent.selectAll('g')
			.data(d.probabilities)
				.enter()
			.append('g')
				.attr({
					'transform':function(d,i){ return 'translate(0,' + yScale(i) + ')'}
				})
			.append('path');

		parent.selectAll('g').select('path').attr('d',arc);
	}

	var count = 0;
	d3.timer(function(t,i){
		count++;
		var dates = getData(count/4);
		var xScale = d3.scale.linear().domain([0,dates.length]).range([0,width-(margin.left + margin.right)]);

		svg.selectAll('g.column')
			.data(dates)
				.enter()
			.append('g').attr({
				'class':'column',
				'transform':function(d,i){
					return 'translate('+xScale(i)+',0)'
				}
			})

		svg.selectAll('g.column')
			.each(column);

		var dates = getData(t);
		//return true;
	});

	d3.select(self.frameElement).style("height", d3.select('.content').node().getBoundingClientRect().height + "px");
</script>
</html>

## style.css
sup{
  vertical-align: top;
  font-size: 0.8rem;
}

body{
  font-family:sans-serif;
}

.column{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:800px;
}

img{
  width:100%;
  padding-top:1rem;
  padding-bottom:1rem;
}

.note img{
  display:block;
  width:30%;
}

h2{
  font-size:1.3rem;
}

blockquote{
  font-family:serif;
}

.date{
  border-top:1px solid #999;
  color:#999;
  padding-bottom:10px;
  padding-top:10px;
}

.content{
  max-width:600px;
  line-height:1.5rem;
  font-size:1.1rem;
}

.note{
  max-width:600px;
  font-size:0.8rem;
  line-height:1.2rem;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ripples</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="style.css">
	<style>

	</style>

	</head>
	<body>
	<div class="content">
	</div>
	</body>
	<script>


	function getData(t){
	function normalize(a){
	var total = d3.sum(a);
	return a.map(function(d){
	return d/total;
	});
	}

	return d3.range(20)
	.map(function(d,i){
	var i = i+t;
	return {
	probabilities:normalize([
	(Math.sin(i/10)),
	(Math.sin((i+1)/20)),
	(Math.sin((i+2)/30)),
	(Math.sin((i+3)/40)),
	(Math.sin((i+4)/50)),
	(Math.sin((i+5)/60)),
	(Math.sin((i+6)/10)) ])
	}
	});
	}





	var height = 400, width = 800, margin = { top:30 ,left:30, bottom:30 ,right:30 }

	var svg = d3.select('.content').append('svg')
	.attr({ height:height, width:width })
	.append('g')
	.attr('transform','translate('+margin.left+','+margin.top+')')

	function column(d,i){
	var parent = d3.select(this);

	var yScale = d3.scale.linear()
	.domain([0,6])
	.range([0, height-(margin.top+margin.bottom)]);

	var arc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(20)
	.startAngle(0)
	.endAngle(function(d,i){
	console.log(d,i);
	return 2 * Math.PI * d;
	});

	parent.selectAll('g')
	.data(d.probabilities)
	.enter()
	.append('g')
	.attr({
	'transform':function(d,i){ return 'translate(0,' + yScale(i) + ')'}
	})
	.append('path');

	parent.selectAll('g').select('path').attr('d',arc);
	}

	var count = 0;
	d3.timer(function(t,i){
	count++;
	var dates = getData(count/4);
	var xScale = d3.scale.linear().domain([0,dates.length]).range([0,width-(margin.left + margin.right)]);

	svg.selectAll('g.column')
	.data(dates)
	.enter()
	.append('g').attr({
	'class':'column',
	'transform':function(d,i){
	return 'translate('+xScale(i)+',0)'
	}
	})

	svg.selectAll('g.column')
	.each(column);

	var dates = getData(t);
	//return true;
	});

	d3.select(self.frameElement).style("height", d3.select('.content').node().getBoundingClientRect().height + "px");
	</script>
	</html>
	sup{
	vertical-align: top;
	font-size: 0.8rem;
	}

	body{
	font-family:sans-serif;
	}

	.column{
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:800px;
	}

	img{
	width:100%;
	padding-top:1rem;
	padding-bottom:1rem;
	}

	.note img{
	display:block;
	width:30%;
	}

	h2{
	font-size:1.3rem;
	}

	blockquote{
	font-family:serif;
	}

	.date{
	border-top:1px solid #999;
	color:#999;
	padding-bottom:10px;
	padding-top:10px;
	}

	.content{
	max-width:600px;
	line-height:1.5rem;
	font-size:1.1rem;
	}

	.note{
	max-width:600px;
	font-size:0.8rem;
	line-height:1.2rem;
	}