<commit_before>(function () {
    'use strict';

    window.graphView = {
    	el: '.graph',
        div: null,
        d: {
            w: $(window).height()*.88,
            h: $(window).height()*.88,
            rx: $(window).height()*.44,
            ry: $(window).height()*.44
        },
        d3: null,
        lastEvent: [],
        bundle: null,
        cluster: null,
        line: null,
        svg: null,
        timer: null,
        colors:[ '#210050','#46007a','#7f00de','#018b88','#01b8b1','#01ead6','#1667af','#01aeff','#6ed1ff','#73115b','#af007c','#d03593' ],
        fakeData: 'javascripts/data/dummy.json',

        init: function(data){
            var _this = this;

            console.log('started graphview')

            _this.setupGraph();
            _this.parseToD3(data);
            _this.render();

        },

        render: function(){
            
            

        },	

        update: function(eventData) {
            var _this = this;
            var d = this.parseEventData(eventData);
            console.log(d);

            _.each(d,function(val,key){
                var select = _this.svg.selectAll("path.link.target-" + val)
                  .each(_this.updateNodes("source", true))
                  .transition()
                    .style("opacity", 1)
                    .style('stroke-width','5px')
                    .duration(400);

                select.transition()
                    .style("opacity", .4)
                    .style('stroke-width','2px')
                    .duration(400)
                    .delay(400);
              })
        },

        setupGraph: function() {
            var _this = this;

            // Setup the data clustering
            this.cluster = d3.layout.cluster()
                .size([360, this.d.ry-120]) // Degrees, radius
                .sort( function(a,b){
                    return d3.ascending(a.key, b.key);
                });

            // Setup the layout bundle
            this.bundle = d3.layout.bundle();

            // Setup radial line generator
            this.line = d3.svg.line.radial()
                .interpolate('bundle')
                .tension(.85)
                .radius( function(d) {
                    return d.y;
                    })
                .angle( function(d) {
                    return d.x/180 * Math.PI;
                    });

            // Generates the containing div
            this.div = d3.select('.graph')
                .insert("div", "h2")
                .style("width", "100%")//this.d.w + "px")
                .style("height", this.d.h + "px")
                .style("position", "absolute")
                .style("left","0px")
                .style("-webkit-backface-visibility", "hidden");

            // Binds svg to the containing div
            this.svg = this.div.append('svg:svg')
                .style('margin','0 auto')
                .attr('width',this.d.w)
                .attr('height',this.d.h)
                .append('svg:g')
                .attr('transform','translate(' + this.d.rx + ',' + this.d.ry + ')' );

            // Line generator
            this.line = d3.svg.line.radial()
                .interpolate("bundle")
                .tension(.85)
                .radius(function(d) { return d.y; })
                .angle(function(d) { return d.x / 180 * Math.PI; });
            
        },

        parseToD3: function(collectionData) {
            var _this = this;
            // d3.json(collectionData, function(data) {

                // Main elements
            var d = _this.mapToNodes(collectionData),
                nodes = _this.cluster.nodes(_this.mapHierarchy(d)),
                links = _this.getConnections(nodes),
                splines = _this.bundle(links);

            console.log('mappedData',d);
            console.log('nodes',nodes);
            console.log('links',links);
            console.log('splines',splines);

            _this.drawCategory(nodes);

             // Establish paths from links
            var path = _this.svg.selectAll("path.link")
                .data(links)
                .enter().append("svg:path")
                .attr("class", function(d) { return "link name-" + d.source.name.split('.')[2] + " source-" + d.source.name.split('.')[2] + " target-" + d.target.name.split('.')[2]; })
                .attr("d", function(d, i) { return _this.line(splines[i]); });

                // Establish nodes for text display
            _this.svg.selectAll("g.node")
                  .data(nodes.filter(function(d) { return !d.children; }))
                .enter().append("svg:g")
                  .attr("class", "node")
                  .attr("id", function(d) { return "node-" + d.key; })
                  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
                .append("svg:text")
                  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
                  .attr("dy", ".31em")
                  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                  .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
                  .text(function(d) { return d.name.split('participant.')[1]; })
                  .on("mouseover", _this.mouseon)
                  .on("mouseout", _this.mouseoff);                
          // });
        },


        drawCategory: function(nodes) {
            var _this = this;
            
            // Arc Generator
            var groupArc = d3.svg.arc()
                .innerRadius(this.d.ry-120)
                .outerRadius(this.d.ry-160)
                .startAngle(function(d){ var r=_this.getAngles(d); return r.min; })
                .endAngle(function(d){ var r=_this.getAngles(d); return r.max; });

        
          this.svg.selectAll("g.arc")
            .data(nodes.filter(function(d){
                return d.name !== 'participant' && d.name;
            }))
            .enter().append("svg:path")
            .attr("d", groupArc)
            .attr("class", function(d) {
                return "groupArc " + d.name.split('.')[1];
            })
            .style("fill", function(d) {
                return _this.colors[Math.floor(Math.random() * _this.colors.length)]
            })
            .style("fill-opacity", 0.5)
            .on("mouseover", _this.mouseon)
            .on("mouseout", _this.mouseoff);

        },

        getAngles: function(data) {
            var min,max = 0;
            // console.log('getAnglesInput',data.x)
            if(!data.children) {
                console.log("Noe kids")
                return { min: 0, max:0 };
            }
            min = max = data.children[0].x;
           data.children.forEach(function(d){
               if(d.x < min) min = d.x;
               if(d.x > max) max = d.x;
           });
            var pi = Math.PI;
            // console.log('minmax return',{ min: min-2 * (pi/180), max: max+2 * (pi/180)});<commit_msg>Lemma names drawing in arcs, lemma topics drawing over<commit_after>(function () {
    'use strict';

    window.graphView = {
    	el: '.graph',
        div: null,
        d: {
            w: $(window).height()*.88,
            h: $(window).height()*.88,
            rx: $(window).height()*.44,
            ry: $(window).height()*.44
        },
        d3: null,
        lastEvent: [],
        bundle: null,
        cluster: null,
        line: null,
        svg: null,
        timer: null,
        colors:[ '#210050','#46007a','#7f00de','#018b88','#01b8b1','#01ead6','#1667af','#01aeff','#6ed1ff','#73115b','#af007c','#d03593' ],
        fakeData: 'javascripts/data/dummy.json',

        init: function(data){
            var _this = this;

            console.log('started graphview')

            _this.setupGraph();
            _this.parseToD3(data);
            _this.render();

        },

        render: function(){
            
            

        },	

        update: function(eventData) {
            var _this = this;
            var d = this.parseEventData(eventData);
            console.log(d);

            _.each(d,function(val,key){
                var select = _this.svg.selectAll("path.link.target-" + val)
                  .each(_this.updateNodes("source", true))
                  .transition()
                    .style("opacity", 1)
                    .style('stroke-width','5px')
                    .duration(400);

                select.transition()
                    .style("opacity", .4)
                    .style('stroke-width','2px')
                    .duration(400)
                    .delay(400);
              })
        },

        setupGraph: function() {
            var _this = this;

            // Setup the data clustering
            this.cluster = d3.layout.cluster()
                .size([360, this.d.ry-120]) // Degrees, radius
                .sort( function(a,b){
                    return d3.ascending(a.key, b.key);
                });

            // Setup the layout bundle
            this.bundle = d3.layout.bundle();

            // Setup radial line generator
            this.line = d3.svg.line.radial()
                .interpolate('bundle')
                .tension(.85)
                .radius( function(d) {
                    return d.y;
                    })
                .angle( function(d) {
                    return d.x/180 * Math.PI;
                    });

            // Generates the containing div
            this.div = d3.select('.graph')
                .insert("div", "h2")
                .style("width", "100%")//this.d.w + "px")
                .style("height", this.d.h + "px")
                .style("position", "absolute")
                .style("left","0px")
                .style("-webkit-backface-visibility", "hidden");

            // Binds svg to the containing div
            this.svg = this.div.append('svg:svg')
                .style('margin','0 auto')
                .attr('width',this.d.w)
                .attr('height',this.d.h)
                .append('svg:g')
                .attr('transform','translate(' + this.d.rx + ',' + this.d.ry + ')' );

            // Line generator
            this.line = d3.svg.line.radial()
                .interpolate("bundle")
                .tension(.85)
                .radius(function(d) { return d.y; })
                .angle(function(d) { return d.x / 180 * Math.PI; });
            
        },

        parseToD3: function(collectionData) {
            var _this = this;
            // d3.json(collectionData, function(data) {

                // Main elements
            var d = _this.mapToNodes(collectionData),
                nodes = _this.cluster.nodes(_this.mapHierarchy(d)),
                links = _this.getConnections(nodes),
                splines = _this.bundle(links);

            console.log('mappedData',d);
            console.log('nodes',nodes);
            console.log('links',links);
            console.log('splines',splines);

            _this.drawCategory(nodes);

             // Establish paths from links
            var path = _this.svg.selectAll("path.link")
                .data(links)
                .enter().append("svg:path")
                .attr("class", function(d) { return "link name-" + d.source.name.split('.')[2] + " source-" + d.source.name.split('.')[2] + " target-" + d.target.name.split('.')[2]; })
                .attr("d", function(d, i) { return _this.line(splines[i]); });

                // Establish nodes for text display
            _this.svg.selectAll("g.node")
                  .data(nodes.filter(function(d) { return !d.children; }))
                .enter().append("svg:g")
                  .attr("class", "node")
                  .attr("id", function(d) { return "node-" + d.key; })
                  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
                .append("svg:text")
                  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
                  .attr("dy", ".31em")
                  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                  .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
                  .text(function(d) { return d.name.split('.')[2]; })
                  .on("mouseover", _this.mouseon)
                  .on("mouseout", _this.mouseoff);                
          // });
        },


        drawCategory: function(nodes) {
            var _this = this;
            
            // Arc Generator
            var groupArc = d3.svg.arc()
                .innerRadius(this.d.ry-120)
                .outerRadius(this.d.ry-160)
                .startAngle(function(d){ var r=_this.getAngles(d); return r.min; })
                .endAngle(function(d){ var r=_this.getAngles(d); return r.max; });

        
            this.svg.selectAll("g.arc")
                .data(nodes.filter(function(d){
                    return d.name !== 'participant' && d.name;
                }))
                .enter().append("svg:path")
                .attr("d", groupArc)
                .attr("class", function(d) {
                    return "groupArc " + d.name.split('.')[1];
                })
                .style("fill", function(d) {
                    return _this.colors[Math.floor(Math.random() * _this.colors.length)]
                })
                .style("fill-opacity", 0.5)
                .on("mouseover", _this.mouseon)
                .on("mouseout", _this.mouseoff);

            _this.svg.selectAll("g.category")
                .data(nodes.filter(function(d){
                    return d.name !== 'participant' && d.name && d.children;
                }))
                .enter().append("svg:g")
                  .attr("class", "category")
                  .attr("id", function(d) { return "node-" + d.key; })
                  .attr("transform", function(d) { 
                    var r=_this.getAngles(d)
                    return "rotate(" + (d.x-100) +") translate(" + (d.y+95) + ")"; })
                .append("svg:text")
                  .attr('class','arcText')
                  .attr("dx", function(d) { return d.x < 45 ? 0 : -0; })
                  .attr("dy", ".31em")
                  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                  .attr("transform", function(d) { return /*d.x < 180 ? null :*/ "rotate(90)"; })
                  .text(function(d) { return d.name.split('.')[1]; })
                  .on("mouseover", _this.mouseon)
                  .on("mouseout", _this.mouseoff);                


        },

        getAngles: function(data) {
            var min,max = 0;
            // console.log('getAnglesInput',data.x)
            if(!data.children) {
                console.log("Noe kids")
                return { min: 0, max:0 };
            }
            min = max = data.children[0].x;
           data.children.forEach(function(d){
               if(d.x < min) min = d.x;
               if(d.x > max) max = d.x;
           });
            var pi = Math.PI;
            // console.log('minmax return',{ min: min-2 * (pi/180), max: max+2 * (pi/180)});
{'fraction_non_alphanumeric': 0.1646712463199215, 'fraction_numerical': 0.020150474321229964, 'mean_word_length': 1.299338146811071, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1770133', 'n_tokens_mistral': 4740, 'n_tokens_neox': 4317, 'n_words': 765}