metormote/index.html

## index.html
<!DOCTYPE html>

<head>
    <title>Equalizer</title>

    <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
    <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>

    <style>
        body {
            font: 16px arial;
            background-color: #515151;
        }

        .unselectable {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .slider {
            font-size: 12px;
        }

        .slider .axis path,
        .slider .axis line {
            fill: none;
            stroke: #ddd;
            shape-rendering: crispEdges;
        }


        .slider .lane {
            fill: #eee;
            opacity: 1;
        }

        .slider .cursor {
            fill: #00EEFF;
            opacity: 1;
        }

        .slider .tick {
            fill: #ddd;
        }

        .slider .major {
            stroke-width: 2;
        }

    </style>
</head>
<body>
    <div>
        <span id="equalizer" touch-action="none"></span>
    </div>

    <script>
        var svg = d3.select("#equalizer")
                .append("svg:svg")
                .attr("width", 600)
                .attr("height", 400)
                .append("g")
                .attr("transform", "translate(100, 100)")
                .attr("class", "equalizer");

        var leds = [];
        var eq = svg.selectAll(".ledarray").data(d3.range(0, 500, 25));
        eq.enter().append("g")
                .attr("class", "ledarray")
                .each(function(d, i) {
                    var led = iopctrl.ledarray();
                    led.scale().domain([0, 1]).range([200, 0]);
                    d3.select(this).attr("transform", "translate("+d+")")
                            .call(led);
                    led.value(Math.sin(Math.PI * d / 500));
                    leds.push(led);
                });

        var ctrl = iopctrl.slider()
                .width(50)
                .transitionDuration(5000);
        ctrl.scale().range([0, 450]);
        svg.append("g")
                .attr("transform", "translate(0, 200)")
                .attr("class", "slider")
                .call(ctrl);

        ctrl.onValueChanged(function(value) {
            leds.forEach(function(led, i) {
                leds[i].value((1 + Math.sin(Math.PI * (i / 8 - 4 * value))) / 2);
            })
        })
    </script>
</body>
	<!DOCTYPE html>

	<head>
	<title>Equalizer</title>

	<script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
	<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
	<script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>

	<style>
	body {
	font: 16px arial;
	background-color: #515151;
	}

	.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	.slider {
	font-size: 12px;
	}

	.slider .axis path,
	.slider .axis line {
	fill: none;
	stroke: #ddd;
	shape-rendering: crispEdges;
	}


	.slider .lane {
	fill: #eee;
	opacity: 1;
	}

	.slider .cursor {
	fill: #00EEFF;
	opacity: 1;
	}

	.slider .tick {
	fill: #ddd;
	}

	.slider .major {
	stroke-width: 2;
	}

	</style>
	</head>
	<body>
	<div>
	<span id="equalizer" touch-action="none"></span>
	</div>

	<script>
	var svg = d3.select("#equalizer")
	.append("svg:svg")
	.attr("width", 600)
	.attr("height", 400)
	.append("g")
	.attr("transform", "translate(100, 100)")
	.attr("class", "equalizer");

	var leds = [];
	var eq = svg.selectAll(".ledarray").data(d3.range(0, 500, 25));
	eq.enter().append("g")
	.attr("class", "ledarray")
	.each(function(d, i) {
	var led = iopctrl.ledarray();
	led.scale().domain([0, 1]).range([200, 0]);
	d3.select(this).attr("transform", "translate("+d+")")
	.call(led);
	led.value(Math.sin(Math.PI * d / 500));
	leds.push(led);
	});

	var ctrl = iopctrl.slider()
	.width(50)
	.transitionDuration(5000);
	ctrl.scale().range([0, 450]);
	svg.append("g")
	.attr("transform", "translate(0, 200)")
	.attr("class", "slider")
	.call(ctrl);

	ctrl.onValueChanged(function(value) {
	leds.forEach(function(led, i) {
	leds[i].value((1 + Math.sin(Math.PI * (i / 8 - 4 * value))) / 2);
	})
	})
	</script>
	</body>