(function(d3) {

    const increase = ((Math.PI * 2) / 360);
    const margin   = { top:10, right:10, bottom:10, left:10 }
    const view     = d3.select('#gfx')
    const bbox     = view.node().getBoundingClientRect()
    const width    = Math.max(bbox.width, bbox.height)
    const height   = Math.max(bbox.width, bbox.height)

    var w = width - margin.right - margin.left
    var h = height - margin.top - margin.bottom

    const samples = Math.PI * 3
    var   data    = generateSineData(samples)

    console.log(data)

    var xScale = d3.scaleLinear().domain([0, samples-1]).range([0, w])
    var yScale = d3.scaleLinear().domain([-1, 1]).range([h, 0])

    const initialX = xScale(12);
    const initialY = yScale(15);

    // define the area
    var sine = d3.area()
	.curve(d3.curveMonotoneX)
	.x(function(d, i) { return xScale(i); })
	.y0(height)
	.y1(function(d) { return yScale(d.y || d); });

    const svg   = view.append('svg')
	  .attr('width', bbox.width + margin.left + margin.right)
	  .attr('height', bbox.height + margin.top + margin.bottom)
	  .attr('role', 'presentation')
	  .attr('aria-hidden', 'true')
	  .append('g')
	  .attr('transform',function(){
              var x1 = bbox.x + bbox.width / 2
              var y1 = bbox.y + bbox.height / 2
	      console.log(`rotate(90, ${x1}, ${y1}) translate(${margin.left}, ${margin.top})`)
	      return `translate(${margin.left - x1}, ${margin.top -y1}) rotate(90, ${x1}, ${y1})`
          })

    svg.append("defs").append("clipPath").attr("id", "clip")
	      .append("rect").attr("width", width).attr("height", height)
    	  .append("rect").attr("width", h).attr("height", w)    

    const graphContainer = svg.append("g")
           .attr('transform', `translate(-${initialX}, -${initialY})`);

    const state = {
	initialX,
	initialY,
	graphContainer,
	time: 0
    };

    function generateSineData(samples) {
	return d3.range(0, 100).map(function(i) { return Math.sin(i) })
    }

    var drawSineWave = function(state) {
	const freqs = [ 84, 34, 71, 125 ]

	svg
	    .attr('width', function() { return bbox.width  })
	    .attr('height', function() {return bbox.height })

	d3.selectAll('.sinewave').remove()

	freqs.forEach(function(f, i) {
	    var data = d3.range(0, 54)
		.map(x => x * 10 / f)
		.map((x) => { return { x: x, y: - Math.sin(x + i - state.time)} })

	    state.graphContainer.append('path')
		.datum(data)
		.attr('class', 'sinewave w' + i)
		.attr('d', sine)
	})
    }

    var drawGraph = function(state) {
	state.time += increase;
	drawSineWave(state);
	requestAnimationFrame(drawGraph.bind(this, state));
    }

    drawGraph(state);

})(d3)