jackparmer · February 23, 2014 02:28
diff --git a/gistfile1.txt b/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>