<commit_before><!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Heatmaps</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }

            #panel, .panel {
                font-family: 'Roboto','sans-serif';
                line-height: 30px;
                padding-left: 10px;
            }

            #panel select, #panel input, .panel select, .panel input {
                font-size: 15px;
            }

            #panel select, .panel select {
                width: 100%;
            }

            #panel i, .panel i {
                font-size: 12px;
            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=visualization,geometry&amp;sensor=false"></script>
        <script type="text/javascript">
var TILE_SIZE = 256;

//Mercator --BEGIN--
function bound(value, opt_min, opt_max) {
  if (opt_min !== null) value = Math.max(value, opt_min);
  if (opt_max !== null) value = Math.min(value, opt_max);
  return value;
}

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

function MercatorProjection() {
  this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,
  TILE_SIZE / 2);
  this.pixelsPerLonDegree_ = TILE_SIZE / 360;
  this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
}

MercatorProjection.prototype.fromLatLngToPoint = function (latLng,
opt_point) {
  var me = this;
  var point = opt_point || new google.maps.Point(0, 0);
  var origin = me.pixelOrigin_;

  point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;

  // NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
  // 89.189.  This is about a third of a tile past the edge of the world
  // tile.
  var siny = bound(Math.sin(degreesToRadians(latLng.lat())), - 0.9999,
  0.9999);
  point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
  return point;
};

MercatorProjection.prototype.fromPointToLatLng = function (point) {
  var me = this;
  var origin = me.pixelOrigin_;
  var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
  var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
  var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
  return new google.maps.LatLng(lat, lng);
};

//Mercator --END--


var desiredRadiusPerPointInMeters = 700;
function getNewRadius() {
    console.log("Radius calc")
    var numTiles = 1 << map.getZoom();
    var center = map.getCenter();
    var moved = google.maps.geometry.spherical.computeOffset(center, 10000, 90); /*1000 meters to the right*/
    var projection = new MercatorProjection();
    var initCoord = projection.fromLatLngToPoint(center);
    var endCoord = projection.fromLatLngToPoint(moved);
    var initPoint = new google.maps.Point(
        initCoord.x * numTiles,
        initCoord.y * numTiles
    );
    var endPoint = new google.maps.Point(
        endCoord.x * numTiles,
        endCoord.y * numTiles
    );
    var pixelsPerMeter = (Math.abs(initPoint.x-endPoint.x))/10000.0;
    var totalPixelSize = Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter);
    console.log(totalPixelSize);
    return totalPixelSize;
 
}

var latData = [];
var railStations = {};
var busStops = {};

var map, pointarray, heatmap;

function init() {
    console.debug("init map");
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(38.904815, -77.016190),
        mapTypeId: google.maps.MapTypeId.MAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

    var pointArray = new google.maps.MVCArray(latData);
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: pointArray,
        radius: getNewRadius()
    });

    heatmap.setMap(map);

    google.maps.event.addListener(map, 'zoom_changed', function () {
        heatmap.setOptions({radius:getNewRadius()});
    });


}

function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
    var gradient = [];
    heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
    heatmap.set('radius', heatmap.get('radius') ? null : 0.005);
}
function changeOpacity() {
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

google.maps.event.addDomListener(window, 'load', function() {
    $.get("/gen/export.json", {}, function(d) {
        var data = JSON.parse(d);
        var rail = data["metrorail"];
        for(var i=0; i<rail.length; i++) {
            var pt = rail[i];
            latData.push({
                location: new google.maps.LatLng(
                    parseFloat(pt["lat"]), parseFloat(pt["lon"])),
                weight: parseFloat(pt["weight"])
            });

            railStations[pt.station_code] = pt;
        }

        var bus = data["metrobus"];
        for(var i=0; i<bus.length; i++) {
            var pt = bus[i];
            latData.push({
                location: new google.maps.LatLng(
                    parseFloat(pt["lat"]), parseFloat(pt["lon"])),
                weight: parseFloat(pt["weight"])
            });

            busStops[pt.stop_id] = pt;
        }

        init();
    }, "text");
    
});


        </script>
    </head>

    <body>
        <div id="panel" style="display:none">
        </div>
        <div id="map-canvas"></div>
    </body>
</html><commit_msg>grayscale background for better appearance<commit_after><!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Heatmaps</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }

            #panel, .panel {
                font-family: 'Roboto','sans-serif';
                line-height: 30px;
                padding-left: 10px;
            }

            #panel select, #panel input, .panel select, .panel input {
                font-size: 15px;
            }

            #panel select, .panel select {
                width: 100%;
            }

            #panel i, .panel i {
                font-size: 12px;
            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=visualization,geometry&amp;sensor=false"></script>
        <script type="text/javascript">
var TILE_SIZE = 256;

//Mercator --BEGIN--
function bound(value, opt_min, opt_max) {
  if (opt_min !== null) value = Math.max(value, opt_min);
  if (opt_max !== null) value = Math.min(value, opt_max);
  return value;
}

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

function MercatorProjection() {
  this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,
  TILE_SIZE / 2);
  this.pixelsPerLonDegree_ = TILE_SIZE / 360;
  this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
}

MercatorProjection.prototype.fromLatLngToPoint = function (latLng,
opt_point) {
  var me = this;
  var point = opt_point || new google.maps.Point(0, 0);
  var origin = me.pixelOrigin_;

  point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;

  // NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
  // 89.189.  This is about a third of a tile past the edge of the world
  // tile.
  var siny = bound(Math.sin(degreesToRadians(latLng.lat())), - 0.9999,
  0.9999);
  point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
  return point;
};

MercatorProjection.prototype.fromPointToLatLng = function (point) {
  var me = this;
  var origin = me.pixelOrigin_;
  var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
  var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
  var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
  return new google.maps.LatLng(lat, lng);
};

//Mercator --END--


var desiredRadiusPerPointInMeters = 700;
function getNewRadius() {
    console.log("Radius calc")
    var numTiles = 1 << map.getZoom();
    var center = map.getCenter();
    var moved = google.maps.geometry.spherical.computeOffset(center, 10000, 90); /*1000 meters to the right*/
    var projection = new MercatorProjection();
    var initCoord = projection.fromLatLngToPoint(center);
    var endCoord = projection.fromLatLngToPoint(moved);
    var initPoint = new google.maps.Point(
        initCoord.x * numTiles,
        initCoord.y * numTiles
    );
    var endPoint = new google.maps.Point(
        endCoord.x * numTiles,
        endCoord.y * numTiles
    );
    var pixelsPerMeter = (Math.abs(initPoint.x-endPoint.x))/10000.0;
    var totalPixelSize = Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter);
    console.log(totalPixelSize);
    return totalPixelSize;
 
}

var latData = [];
var railStations = {};
var busStops = {};

var map, pointarray, heatmap;

function init() {
    console.debug("init map");
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(38.904815, -77.016190),
        mapTypeId: google.maps.MapTypeId.MAP
        styles: [{
            stylers: [{
                saturation: -100
            }]
        }]
    };
    var container = document.getElementById('map_canvas');

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
    var pointArray = new google.maps.MVCArray(latData);
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: pointArray,
        radius: getNewRadius()
    });

    heatmap.setMap(map);

    google.maps.event.addListener(map, 'zoom_changed', function () {
        heatmap.setOptions({radius:getNewRadius()});
    });


}

function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
    var gradient = [];
    heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
    heatmap.set('radius', heatmap.get('radius') ? null : 0.005);
}
function changeOpacity() {
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

google.maps.event.addDomListener(window, 'load', function() {
    $.get("/gen/export.json", {}, function(d) {
        var data = JSON.parse(d);
        var rail = data["metrorail"];
        for(var i=0; i<rail.length; i++) {
            var pt = rail[i];
            latData.push({
                location: new google.maps.LatLng(
                    parseFloat(pt["lat"]), parseFloat(pt["lon"])),
                weight: parseFloat(pt["weight"])
            });

            railStations[pt.station_code] = pt;
        }

        var bus = data["metrobus"];
        for(var i=0; i<bus.length; i++) {
            var pt = bus[i];
            latData.push({
                location: new google.maps.LatLng(
                    parseFloat(pt["lat"]), parseFloat(pt["lon"])),
                weight: parseFloat(pt["weight"])
            });

            busStops[pt.stop_id] = pt;
        }

        init();
    }, "text");
    
});


        </script>
    </head>

    <body>
        <div id="panel" style="display:none">
        </div>
        <div id="map-canvas"></div>
    </body>
</html>
{'fraction_non_alphanumeric': 0.14309224059902906, 'fraction_numerical': 0.020488768205381386, 'mean_word_length': 2.2034791776489193, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 47, 'https://': 4, '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': '194982', 'n_tokens_mistral': 4223, 'n_tokens_neox': 3895, 'n_words': 814}