jackparmer/gist:9165789

## gistfile1.txt
<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://raw2.github.com/quizlet/mp3.js/master/mp3.js"></script>
    <style type="text/css">

		circle {
		  fill: #000;
		  stroke: #000;
		  stroke-width: 1.5px;
		}

		.bus{
			color: blue;
		}

		.car{
			color: red;
		}

		.truck{
			color: green;
		}

        * {
            box-sizing: border-box;
        }

        html {
        }

        body {
            padding: 0;
            margin: 0;
            font-family: andale mono;
        }

        .questions {
            width: 100%;
            text-align: center;
        }

        .title {
            width: 100%;
        }

        .question {
            margin: 0;
            font-size: 42px;
            display: inline-block;
            padding: 20px;
        }

        .title__text {
            font-size: 42px;
            display: table-cell;
            padding: 20px;
        }

        .question--primary-lang {
            color: #fff;
        }

        .question--second-lang {
            color: rgba(255, 255, 255, 0.5);
        }

        .humans {
            height: 500px;
            background: #140D29;
        }

        .humans__questions {
            text-align: center;
        }

        .traffic {
        }

        .lane {
            height: 90px;
        }

        svg {
        	position: absolute;
        }

        .trucks {
            background: #C272C2;;
        }

        .cars {
            background: #66B866;
        }

        .buses {
            background: #008080;
        }

        .title {
            height: 100px;
        }

        .human {
            position: absolute;
            opacity: 0.4;
            height: 245px;
            width: 117px;
        }


    </style>

    <script>

    // function() {
    //     urls = [
    //       'http://quizlet.com/tts/it.mp3?t=Italia!&qoverride=1',
    //       'http://s3-us-west-1.amazonaws.com/voice.quizlet.com/voice/JtmUx9FZxVtNVeS9.mp3'
    //     ];

    // }

    // player.play('/all-along-the-watchtower.mp3', {
    //   onLoad: function() { console.log('Audio Loaded!'); },
    //   onError: function() { console.log('Error Loading Audio!'); },
    //   onStop: function() { console.log('Audio Stopped Playing!'); },
    //   timeout: 5000
    // });


    function setHumans(now) {
        var humans = $(".humans");
        var h = humans.height();
        var w = humans.width();
        var human;

        var margin = 100;

        var previous = $(".human").length;

        if (now < previous) {
            for (var i = 0; i < previous - now; i++) {
                $(".human")[0].remove();
            }
        } else {
            for (var i = 0; i < now - previous; i++) {

                human = $("<img class='human' src='http://qdaq.com/cXT.gif' />").css({
                    left: margin + Math.random()*(w - 2*margin),
                    top: margin + Math.random()*(h - 3.5*margin),
                    transform: 'scale('+(0.6+Math.random()*0.4)+')'
                });

                $(".humans").append(human);
            }
        }
    }
    </script>
</head>

<body>

<div class="humans">
    <header class="humans__questions">
        <p class="question question--primary-lang">
            where were you born?

        </p>
        <p class="question question--second-lang">
            在那里出世？
        </p>
        <p class="question question--second-lang">
            ¿dónde naciste?
        </p>
    </header>
    <div class="humans__bodies">
    </div>
</div>
<div class="svgspot"></div>
<div class="traffic">
    <div class="lane trucks">
    </div>
    <div class="lane cars">
    </div>
    <div class="lane buses">
    </div>
</div>
<footer class="title">
    <p class="title__text">
        MARKET AND SYNTH: an urban human + traffic orchestra
    </p>
</footer>

<script type="text/javascript" src="/static/js/plugins/jquery-1.8.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var buses = [];
var cars = [];
var peds = [];
var trucks = [];

$( document ).ready(function() {
	console.log( 'reading csv' );
	d3.csv("/static/gh.csv", function(error, csv) {
	  csv.forEach(function(x) {
	    var t = x.Time,
	        v = x[' Vehicle'],
	        c = x[' Count'];

	    switch( v ){
	    	case 'Pedestrians':
	    		peds.push( c );
	    		break;
	    	case 'Buses':
	    		buses.push( c );
	    		break;
	    	case 'Cars':
	    		cars.push( c );
	    		break;
	    	case 'Trucks':
	    		trucks.push( c );
	    		break;
	    }
	  });
	});

	// Step through minute-by-minute,
	var counter = 0;
	var delay;
	setInterval( function(){

		console.log( '1 minute', counter, Number(cars[ counter ]) );

		// buses
		var n_buses = Number(buses[ counter ]);
		if( n_buses > 0 ){
			delay = Math.floor(Math.random() * 2000) + 1000;
			setTimeout( function() { fireShape(1,n_buses) }, delay);
		}

		// cars
		var n_cars = Number(cars[ counter ]);
		if( n_cars > 0 ){
			delay = Math.floor(Math.random() * 2000) + 1000;
			setTimeout( function() { fireShape(2,n_cars) }, delay);
		}

		// trucks
		var n_trucks = Number(cars[ counter ]);
		if( n_trucks > 0 ){
			delay = Math.floor(Math.random() * 2000) + 1000;
			setTimeout( function() { fireShape(3,n_trucks) }, delay);
		}

		// pedestrians
		for( var l=0; l < Number(buses[ counter ]); l++ ){
			delay = Math.floor(Math.random() * 2000) + 1000;
			setTimeout( function() { ; }, delay);
		}

		counter++;
	}, 600);
});

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var svg = d3.select(".svgspot").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 + ")");

function fireShape( level, num_vehicles ){
	// level is 1, 2, or 3

	var y = d3.scale.ordinal()
	    .domain(d3.range(num_vehicles))
	    .rangePoints([0, height]);

	$('circle').remove();
	var circles = svg.selectAll("circle");

	console.log('circles', circles)

	circles.style("opacity",1)
	  .attr("cx",0)
	    .data(y.domain())
	  .enter().append("circle")
	    .attr("r", 25)
	    .attr("cx", 0)
	    .attr("cy", 90.0 * (level-1))
	  .transition()
	    .duration(200)
	    .style("opacity",0)
	    .delay(function(d) { return d * 40; })
	    .each(slide)
	    .remove();
}

function slide() {
  var circle = d3.select(this);

  console.log( 'slide', circle );

  (function repeat() {
    circle = circle.transition()
        .attr("cx", width)
      .transition()
        .attr("cx", 0)

        //.each("start", repeat);
  })();

}

</script>

</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="https://raw2.github.com/quizlet/mp3.js/master/mp3.js"></script>
	<style type="text/css">

	circle {
	fill: #000;
	stroke: #000;
	stroke-width: 1.5px;
	}

	.bus{
	color: blue;
	}

	.car{
	color: red;
	}

	.truck{
	color: green;
	}

	* {
	box-sizing: border-box;
	}

	html {
	}

	body {
	padding: 0;
	margin: 0;
	font-family: andale mono;
	}

	.questions {
	width: 100%;
	text-align: center;
	}

	.title {
	width: 100%;
	}

	.question {
	margin: 0;
	font-size: 42px;
	display: inline-block;
	padding: 20px;
	}

	.title__text {
	font-size: 42px;
	display: table-cell;
	padding: 20px;
	}

	.question--primary-lang {
	color: #fff;
	}

	.question--second-lang {
	color: rgba(255, 255, 255, 0.5);
	}

	.humans {
	height: 500px;
	background: #140D29;
	}

	.humans__questions {
	text-align: center;
	}

	.traffic {
	}

	.lane {
	height: 90px;
	}

	svg {
	position: absolute;
	}

	.trucks {
	background: #C272C2;;
	}

	.cars {
	background: #66B866;
	}

	.buses {
	background: #008080;
	}

	.title {
	height: 100px;
	}

	.human {
	position: absolute;
	opacity: 0.4;
	height: 245px;
	width: 117px;
	}



	</style>

	<script>

	// function() {
	// urls = [
	// 'http://quizlet.com/tts/it.mp3?t=Italia!&qoverride=1',
	// 'http://s3-us-west-1.amazonaws.com/voice.quizlet.com/voice/JtmUx9FZxVtNVeS9.mp3'
	// ];

	// }

	// player.play('/all-along-the-watchtower.mp3', {
	// onLoad: function() { console.log('Audio Loaded!'); },
	// onError: function() { console.log('Error Loading Audio!'); },
	// onStop: function() { console.log('Audio Stopped Playing!'); },
	// timeout: 5000
	// });



	function setHumans(now) {
	var humans = $(".humans");
	var h = humans.height();
	var w = humans.width();
	var human;

	var margin = 100;

	var previous = $(".human").length;

	if (now < previous) {
	for (var i = 0; i < previous - now; i++) {
	$(".human")[0].remove();
	}
	} else {
	for (var i = 0; i < now - previous; i++) {

	human = $("<img class='human' src='http://qdaq.com/cXT.gif' />").css({
	left: margin + Math.random()(w - 2margin),
	top: margin + Math.random()(h - 3.5margin),
	transform: 'scale('+(0.6+Math.random()*0.4)+')'
	});

	$(".humans").append(human);
	}
	}
	}
	</script>
	</head>

	<body>

	<div class="humans">
	<header class="humans__questions">
	<p class="question question--primary-lang">
	where were you born?

	</p>
	<p class="question question--second-lang">
	在那里出世？
	</p>
	<p class="question question--second-lang">
	¿dónde naciste?
	</p>
	</header>
	<div class="humans__bodies">
	</div>
	</div>
	<div class="svgspot"></div>
	<div class="traffic">
	<div class="lane trucks">
	</div>
	<div class="lane cars">
	</div>
	<div class="lane buses">
	</div>
	</div>
	<footer class="title">
	<p class="title__text">
	MARKET AND SYNTH: an urban human + traffic orchestra
	</p>
	</footer>

	<script type="text/javascript" src="/static/js/plugins/jquery-1.8.3.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var buses = [];
	var cars = [];
	var peds = [];
	var trucks = [];

	$( document ).ready(function() {
	console.log( 'reading csv' );
	d3.csv("/static/gh.csv", function(error, csv) {
	csv.forEach(function(x) {
	var t = x.Time,
	v = x[' Vehicle'],
	c = x[' Count'];

	switch( v ){
	case 'Pedestrians':
	peds.push( c );
	break;
	case 'Buses':
	buses.push( c );
	break;
	case 'Cars':
	cars.push( c );
	break;
	case 'Trucks':
	trucks.push( c );
	break;
	}
	});
	});

	// Step through minute-by-minute,
	var counter = 0;
	var delay;
	setInterval( function(){

	console.log( '1 minute', counter, Number(cars[ counter ]) );

	// buses
	var n_buses = Number(buses[ counter ]);
	if( n_buses > 0 ){
	delay = Math.floor(Math.random() * 2000) + 1000;
	setTimeout( function() { fireShape(1,n_buses) }, delay);
	}

	// cars
	var n_cars = Number(cars[ counter ]);
	if( n_cars > 0 ){
	delay = Math.floor(Math.random() * 2000) + 1000;
	setTimeout( function() { fireShape(2,n_cars) }, delay);
	}

	// trucks
	var n_trucks = Number(cars[ counter ]);
	if( n_trucks > 0 ){
	delay = Math.floor(Math.random() * 2000) + 1000;
	setTimeout( function() { fireShape(3,n_trucks) }, delay);
	}

	// pedestrians
	for( var l=0; l < Number(buses[ counter ]); l++ ){
	delay = Math.floor(Math.random() * 2000) + 1000;
	setTimeout( function() { ; }, delay);
	}

	counter++;
	}, 600);
	});

	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	width = 960 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	var svg = d3.select(".svgspot").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 + ")");

	function fireShape( level, num_vehicles ){
	// level is 1, 2, or 3

	var y = d3.scale.ordinal()
	.domain(d3.range(num_vehicles))
	.rangePoints([0, height]);

	$('circle').remove();
	var circles = svg.selectAll("circle");

	console.log('circles', circles)

	circles.style("opacity",1)
	.attr("cx",0)
	.data(y.domain())
	.enter().append("circle")
	.attr("r", 25)
	.attr("cx", 0)
	.attr("cy", 90.0 * (level-1))
	.transition()
	.duration(200)
	.style("opacity",0)
	.delay(function(d) { return d * 40; })
	.each(slide)
	.remove();
	}

	function slide() {
	var circle = d3.select(this);

	console.log( 'slide', circle );

	(function repeat() {
	circle = circle.transition()
	.attr("cx", width)
	.transition()
	.attr("cx", 0)

	//.each("start", repeat);
	})();

	}

	</script>

	</body>
	</html>