%%javascript

// Setup Javascript playground
window.get_element = function(el){
    return (el !== undefined) ? el[0] : $('script').last().parent()[0];
};

element = undefined;

// Define external scripts
require.config({
    paths: {
        d3: "http://d3js.org/d3.v3.min"
    }
});

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        d3.select(target)
          .selectAll("p")
          .data([1,2,3,4,5])
          .enter()
          .append("p")
          .text("New paragraph!");
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var dataset = d3.range(20);

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', 20)
            .attr('height', 100);
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var dataset = d3.range(20);

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){  // x 위치 차례대로 구분해주기
                return i * 21;
            })
            .attr('y', 0)
            .attr('width', 20)
            .attr('height', 100);
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        // 데이터 개수 늘리기
        var dataset = d3.range(24);

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            // x 위치 차례대로 구분해주기
            .attr('x', function(d, i){ 
                return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', 20)
            .attr('height', 100);
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        // 데이터 개수 줄이기
        var dataset = d3.range(5); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){
                 return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', 20)
            .attr('height', 100);
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var createGraph = function(data_num){
            var w = 500;
            var h = 100;

            // 막대 간격 변수 추가
            var barPadding = 1;

            var dataset = d3.range(data_num); 

            var svg = d3.select(target)
                .append('svg')
                .attr('width', w)
                .attr('height', h);

            svg.selectAll('rect')
                .data(dataset)
                .enter()
                .append('rect')
                .attr('x', function(d, i){
                     return i * w / dataset.length;
                })
                .attr('y', 0)
                // 막대 간격 동적으로 조절
                .attr('width', function(d, i){
                    return w / dataset.length - barPadding;
                })
                .attr('height', 100);
        }

        createGraph(100);
        createGraph(5);
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = d3.range(20); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){
                 return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', function(d, i){
                return w / dataset.length - barPadding;
            })

            // 높이 데이터와 연동
            .attr('height', function(d){
                return d;
            });
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = d3.range(20); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){
                 return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', function(d, i){
                return w / dataset.length - barPadding;
            })
            .attr('height', function(d){
                // 보기 좋게 높이 * 4
                return d * 4;
            });
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = d3.range(20); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){
                 return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', function(d, i){
                return w / dataset.length - barPadding;
            })
            .attr('height', function(d){
                return d * 4;
            })
            // 막대에 색 입히기
            .attr('fill', 'teal');
    });
})();

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = d3.range(20); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', function(d, i){
                 return i * w / dataset.length;
            })
            .attr('y', 0)
            .attr('width', function(d, i){
                return w / dataset.length - barPadding;
            })
            .attr('height', function(d){
                return d * 4;
            })
            // 막대에 동적으로 색 입히기
            .attr('fill', function(d){
                return 'rgb(0, 0,' + (d * 10) + ')';
            });
    });
});

%%javascript

(function(){
    var target = get_element(element);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = d3.range(20); 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')

            // attr에 한꺼번에 속성 지정하기
            .attr({
                x: function(d, i) { return i * w / dataset.length; },
                y: function(d) { return h - (d * 4) },
                width: w / dataset.length - barPadding,
                height: function(d) { return d * 4 },
                fill: function(d) { return 'rgb(0, 0,' + (d * 10) + ')'}
            })
    });
})();

%%javascript

window.dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
                    11, 12, 15, 20, 18, 17, 16, 18, 23, 25]

window.draw_graph = function(el, callback){
    var target = get_element(el);

    require(['d3'], function() {
        var w = 500;
        var h = 100;

        var barPadding = 1;

        var dataset = window.dataset; 

        var svg = d3.select(target)
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        svg.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')

            // attr에 한꺼번에 속성 지정하기
            .attr({
                x: function(d, i) { return i * w / window.dataset.length; },
                y: function(d) { return h - (d * 4) },
                width: w / dataset.length - barPadding,
                height: function(d) { return d * 4 },
                fill: function(d) { return 'rgb(0, 0,' + (d * 10) + ')'}
            })
        
        if(callback !== undefined){
            callback(svg, w, h)
        }
    });
};

%%javascript

draw_graph(element);

%%javascript

draw_graph(element, function(svg, w, h){
    // Text Label 추가하기
    svg.selectAll('text')
        .data(window.dataset)
        .enter()
        .append('text')
        .text(function(d){
            return d;
        })
        .attr('x', function(d, i){
            return i * (w / dataset.length);
        })
        .attr('y', function(d){
            return h - (d * 4);
        })
});

%%javascript

draw_graph(element, function(svg, w, h){

    svg.selectAll('text')
        .data(window.dataset)
        .enter()
        .append('text')
        .text(function(d){
            return d;
        })
        .attr('x', function(d, i){
            // 5 더하기
            return i * (w / dataset.length) + 5;
        })
        .attr('y', function(d){
            // 15 더하기
            return h - (d * 4) + 15;
        })
});

%%javascript

draw_graph(element, function(svg, w, h){

    svg.selectAll('text')
        .data(window.dataset)
        .enter()
        .append('text')
        .text(function(d){
            return d;
        })
        .attr('x', function(d, i){
            return i * (w / dataset.length) + 5;
        })
        .attr('y', function(d){
            return h - (d * 4) + 15;
        })
    
        // Font 스타일링
        .attr('font-family', 'sans-serif')
        .attr('font-size', '11px')
        .attr('fill', 'white')
});

%%javascript

draw_graph(element, function(svg, w, h){
    var barPadding = 1;

    svg.selectAll('text')
        .data(window.dataset)
        .enter()
        .append('text')
        .text(function(d){
            return d;
        })
    
        // 각 막대의 왼쪽 끝과 막대 폭의 절반 값을 더하도록 바꿈
        .attr('x', function(d, i){
            return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
        })
    
        // 15 -> 14
        .attr('y', function(d){
            return h - (d * 4) + 14;
        })
        .attr('font-family', 'sans-serif')
        .attr('font-size', '11px')
        .attr('fill', 'white')
    
        // text-anchor 속성 추가
        .attr('text-anchor', 'middle')
});