<commit_before>{% extends "base.j2" %}


{% block main %}

    <h1>
        Semantic maps
    </h1>

    <p>
        <form method="POST" action="{{ url_for('tools_semantics', iso=iso) }}">
            <input type="text" name="term" value="{{ term if term != None }}"/>
            <input type="submit" name="submit" value="Search Term" />
        </form>
    </p>

    {% if map %}

        <!-- <img src="{{ url_for('static', filename='plots/{0}'.format(map)) }}" /> -->

    {% endif %}

    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div id="flashes">
            {% for message in messages %}
                <p>{{ message }}</p>
            {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <div id="semantic_map"></div>

{% endblock %}


{% block scripts %}

    <script src="{{ url_for('static', filename='media/js/libs/d3.v3.min.js') }}"></script>
    <!-- Remote loading does not work via SSL -->
    <!--<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>-->

    <script>
        // Enable moveToFront function
        d3.selection.prototype.moveToFront = function() {
            return this.each(function(){
                this.parentNode.appendChild(this);
                });
            };

        function mouseoverEvent() {
            d3.select(this.parentNode).moveToFront();      
            d3.select(this.parentNode).select("rect")
                .style("fill-opacity", "1");
            d3.select(this.parentNode).select("circle")
                .moveToFront()
                .attr("r", 7.5)
                .style("fill", function(d) {
                    if (d[0] == "{{term}}") return "green";
                    else return "3366CC";
                });
        }

        function mouseoutEvent() {
            d3.select(this.parentNode).select("circle")
                .attr("r", 5.5)
                .style("fill", function(d) {
                    if (d[0] == "{{term}}") return "lightgreen";
                    else return "steelblue";
                })
            d3.select(this.parentNode).select("rect")
                .style("fill-opacity", ".25");
        }

        function zoom() {
            node.attr("transform", transform);
        }

        function transform(d) {
            //alert((x(d[1]) - width/2) + ", " + (y(d[2]) - height/2))
            return "translate(" + (x(d[1]) - width/2) + "," + (y(d[2]) - height/2) + ")";
        }

        var data = JSON.parse('{{ graphdata_json }}');

        var margin = {top: 0, right: 0, bottom: 0, left: 0},
            width = 960,
            height = 500;

        var x = d3.scale.linear()
            .domain([-0.4, 0.4]) // TODO: get minimum and maximum from data
            .range([0, width]);

        var y = d3.scale.linear()
            .domain([-0.4, 0.4])
            .range([height, 0]);

        var zoomvar = d3.behavior.zoom()
                .x(x).y(y)
                .center([width / 2, height / 2])
                .scale(1)
                .scaleExtent([0.05, 10])
                .on("zoom", zoom);
                
        var svg = d3.select("#semantic_map").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "dot chart")
            .call(zoomvar)
            .on("mouseout", function() {
                var mousex = (d3.mouse(this)[0]);
                var mousey = (d3.mouse(this)[1]);
                if (mousex <= 0 || mousex >= 960 || mousey <= 0 || mousey >= 500) {
                    //alert("x: " + mousex + "\ny: " + mousey);
                    zoomvar.on("zoom",null);
                    d3.select("#semantic_map").select("svg").call(zoom);
                };
            })
            .on("mouseover", function() {
                zoomvar.on("zoom", zoom);
            })
            .append("g")
                .attr("class", "ggroup");

        var node = svg.selectAll("circle.node")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", transform);

        node.append("rect")
            .attr("x", function(d) { return x(d[1]); })
            .attr("y", function(d) { return y(d[2]); })
            .attr("width", function(d) { return (d[0].length * 8) + 10; }) // 8 is charwidth & 10 accomodates for margins
            .attr("height", 20)
            .style("fill", "#ccc")
            .style("fill-opacity", ".25")
            .style("stroke", "#666")
            .style("stroke-width", "1.2px")
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        node.append("text")
            .attr("x", function(d) { return x(d[1]) + 5; })
            .attr("y", function(d) { return y(d[2]) + 15; })
            .style("font", "400 14px Droid Sans Mono") // Monospace font to calculate text width
            .style("fill", "#666")
            .style("cursor", "default")
            .text(function(d) { return d[0]; })
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        var bluecircles = node.append("circle")
            .attr("class", "dot")
            .attr("id", function(d) { return d[0]; })
            .attr("cx", function(d) { return x(d[1]); })
            .attr("cy", function(d) { return y(d[2]); })
            .attr("r", 5.5)
            .style("fill", function(d) {
                if (d[0] == "{{term}}") return "lightgreen";
                else return "steelblue";
            })
            .style("stroke", function(d) {
                if (d[0] == "{{term}}") return "green";
                else return "3366CC";
            })
            .style("stroke-width", "1.5px")
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        svg.append("svg:rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("stroke", "#000");

        function pad(scale, k) {
          var range = scale.range();
          if (range[0] > range[1]) k *= -1;
          return scale.domain([range[0] - k, range[1] + k].map(scale.invert)).nice();
        }
<commit_msg>Removed border from semantic map.<commit_after>{% extends "base.j2" %}


{% block main %}

    <h1>
        Semantic maps
    </h1>

    <p>
        <form method="POST" action="{{ url_for('tools_semantics', iso=iso) }}">
            <input type="text" name="term" value="{{ term if term != None }}"/>
            <input type="submit" name="submit" value="Search Term" />
        </form>
    </p>

    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div id="flashes">
            {% for message in messages %}
                <p>{{ message }}</p>
            {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <div id="semantic_map"></div>

{% endblock %}


{% block scripts %}

    <script src="{{ url_for('static', filename='media/js/libs/d3.v3.min.js') }}"></script>
    <!-- Remote loading does not work via SSL -->
    <!--<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>-->

    <script>
        // Enable moveToFront function
        d3.selection.prototype.moveToFront = function() {
            return this.each(function(){
                this.parentNode.appendChild(this);
                });
            };

        function mouseoverEvent() {
            d3.select(this.parentNode).moveToFront();      
            d3.select(this.parentNode).select("rect")
                .style("fill-opacity", "1");
            d3.select(this.parentNode).select("circle")
                .moveToFront()
                .attr("r", 7.5)
                .style("fill", function(d) {
                    if (d[0] == "{{term}}") return "green";
                    else return "3366CC";
                });
        }

        function mouseoutEvent() {
            d3.select(this.parentNode).select("circle")
                .attr("r", 5.5)
                .style("fill", function(d) {
                    if (d[0] == "{{term}}") return "lightgreen";
                    else return "steelblue";
                })
            d3.select(this.parentNode).select("rect")
                .style("fill-opacity", ".25");
        }

        function zoom() {
            node.attr("transform", transform);
        }

        function transform(d) {
            return "translate(" + (x(d[1]) - width/2) + "," + (y(d[2]) - height/2) + ")";
        }

        var data = JSON.parse('{{ graphdata_json }}');

        var margin = {top: 0, right: 0, bottom: 0, left: 0},
            width = 960,
            height = 500;

        var x = d3.scale.linear()
            .domain([-0.4, 0.4]) // TODO: get minimum and maximum from data
            .range([0, width]);

        var y = d3.scale.linear()
            .domain([-0.4, 0.4])
            .range([height, 0]);

        var zoomvar = d3.behavior.zoom()
                .x(x).y(y)
                .center([width / 2, height / 2])
                .scale(1)
                .scaleExtent([0.05, 10])
                .on("zoom", zoom);
                
        var svg = d3.select("#semantic_map").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "dot chart")
            .call(zoomvar)
            .on("mouseout", function() {
                var mousex = (d3.mouse(this)[0]);
                var mousey = (d3.mouse(this)[1]);
                if (mousex <= 0 || mousex >= 960 || mousey <= 0 || mousey >= 500) {
                    //alert("x: " + mousex + "\ny: " + mousey);
                    zoomvar.on("zoom",null);
                    d3.select("#semantic_map").select("svg").call(zoom);
                };
            })
            .on("mouseover", function() {
                zoomvar.on("zoom", zoom);
            })
            .append("g")
                .attr("class", "ggroup");

        var node = svg.selectAll("circle.node")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", transform);

        node.append("rect")
            .attr("x", function(d) { return x(d[1]); })
            .attr("y", function(d) { return y(d[2]); })
            .attr("width", function(d) { return (d[0].length * 8) + 10; }) // 8 is charwidth & 10 accomodates for margins
            .attr("height", 20)
            .style("fill", "#ccc")
            .style("fill-opacity", ".25")
            .style("stroke", "#666")
            .style("stroke-width", "1.2px")
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        node.append("text")
            .attr("x", function(d) { return x(d[1]) + 5; })
            .attr("y", function(d) { return y(d[2]) + 15; })
            .style("font", "400 14px Droid Sans Mono") // Monospace font to calculate text width
            .style("fill", "#666")
            .style("cursor", "default")
            .text(function(d) { return d[0]; })
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        var bluecircles = node.append("circle")
            .attr("class", "dot")
            .attr("id", function(d) { return d[0]; })
            .attr("cx", function(d) { return x(d[1]); })
            .attr("cy", function(d) { return y(d[2]); })
            .attr("r", 5.5)
            .style("fill", function(d) {
                if (d[0] == "{{term}}") return "lightgreen";
                else return "steelblue";
            })
            .style("stroke", function(d) {
                if (d[0] == "{{term}}") return "green";
                else return "3366CC";
            })
            .style("stroke-width", "1.5px")
            .on("mouseover", mouseoverEvent)
            .on("mouseout", mouseoutEvent);

        svg.append("svg:rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("stroke", "#fff");

        function pad(scale, k) {
          var range = scale.range();
          if (range[0] > range[1]) k *= -1;
          return scale.domain([range[0] - k, range[1] + k].map(scale.invert)).nice();
        }

{'fraction_non_alphanumeric': 0.18727540019601438, 'fraction_numerical': 0.021398235870630514, 'mean_word_length': 1.501532175689479, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 53, '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': '3745701', 'n_tokens_mistral': 3877, 'n_tokens_neox': 3596, 'n_words': 751}