<commit_before><!DOCTYPE html>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">

<style>

#addresses {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  padding: 10px;
  z-index:1000;
}

#addresses ul {
  list-style-type: none;
}

#addresses ul li {
  border-bottom: 1px solid #CCC;
}

#boundary {
  stroke: lightblue;
  stroke-width: 1px;
  fill: yellow;
  fill-opacity:0.1;
}
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.hexagon {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
  z-index: -1000;
}

.hexagon:hover {
  stroke-width: 1px;
}

.d3-tip {
  z-index: 1000;
  padding: 4px;
  background: white;
  border: 1px solid #CCC;
  border-radius:4px;
}

body { margin:0; padding: 0; }

</style>

<body>
    
    <div id="slider"></div>
    <div id="addresses"></div>
</body>


<script type="text/ecmascript" id="script">

function ShowTooltip(evt)
{
  tooltip.setAttributeNS(null,"x",evt.clientX-8);
  tooltip.setAttributeNS(null,"y",evt.clientY-5);
  tooltip.setAttributeNS(null,"visibility","visible");
  tooltip.text(evt.clientX-8+","+evt.clientY-5);
}

function HideTooltip()
{
  tooltip.setAttributeNS(null,"visibility","hidden");
}

</script>

<link rel="stylesheet" type="text/css" href="css/d3.slider.css" media="screen" />

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.githubusercontent.com/turban/d3.slider/master/d3.slider.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script>
var width = window.innerWidth *0.6,
height = window.innerHeight-10 ,
scale = 60000;

var center_x = -73.99,
center_y= 40.71;

tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
  var newHTML = "<ul>";
  for (i = 0; i < d.length; i++) {
    newHTML += "<li>" + d[i].formatted_address + "</li>";
  }
  newHTML += "</ul>";
  document.getElementById("addresses").innerHTML = newHTML;
  return d.length + " addresses with stalled construction projects"; 
});

function drawMap(error,json) {
   

    var hexbin = d3.hexbin()
        .size([width, height])
        .radius(scale/10000)
        .x(function(d) {return d.point[0]})
        .y(function(d) {return d.point[1]});

    var svg= d3.select("div").append("svg")
        .attr("width",width)
        .attr("height",height)
        .attr("id","myMap");<commit_msg>make the width of the SVG element the browser window width minus 300 (pixels) since the addresses column on the right is 300px in width.<commit_after><!DOCTYPE html>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">

<style>

#addresses {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  padding: 10px;
  z-index:1000;
}

#addresses ul {
  list-style-type: none;
}

#addresses ul li {
  border-bottom: 1px solid #CCC;
}

#boundary {
  stroke: lightblue;
  stroke-width: 1px;
  fill: yellow;
  fill-opacity:0.1;
}
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.hexagon {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
  z-index: -1000;
}

.hexagon:hover {
  stroke-width: 1px;
}

.d3-tip {
  z-index: 1000;
  padding: 4px;
  background: white;
  border: 1px solid #CCC;
  border-radius:4px;
}

body { margin:0; padding: 0; }

</style>

<body>
    
    <div id="slider"></div>
    <div id="addresses"></div>
</body>


<script type="text/ecmascript" id="script">

function ShowTooltip(evt)
{
  tooltip.setAttributeNS(null,"x",evt.clientX-8);
  tooltip.setAttributeNS(null,"y",evt.clientY-5);
  tooltip.setAttributeNS(null,"visibility","visible");
  tooltip.text(evt.clientX-8+","+evt.clientY-5);
}

function HideTooltip()
{
  tooltip.setAttributeNS(null,"visibility","hidden");
}

</script>

<link rel="stylesheet" type="text/css" href="css/d3.slider.css" media="screen" />

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.githubusercontent.com/turban/d3.slider/master/d3.slider.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script>
var width = window.innerWidth - 300,
height = window.innerHeight - 10 ,
scale = 60000;

var center_x = -73.99,
center_y= 40.71;

tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
  var newHTML = "<ul>";
  for (i = 0; i < d.length; i++) {
    newHTML += "<li>" + d[i].formatted_address + "</li>";
  }
  newHTML += "</ul>";
  document.getElementById("addresses").innerHTML = newHTML;
  return d.length + " addresses with stalled construction projects"; 
});

function drawMap(error,json) {
   

    var hexbin = d3.hexbin()
        .size([width, height])
        .radius(scale/10000)
        .x(function(d) {return d.point[0]})
        .y(function(d) {return d.point[1]});

    var svg= d3.select("div").append("svg")
        .attr("width",width)
        .attr("height",height)
        .attr("id","myMap");
{'fraction_non_alphanumeric': 0.19528130671506352, 'fraction_numerical': 0.03575317604355717, 'mean_word_length': 3.7386070507308684, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 63, 'https://': 2, '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': '589683', 'n_tokens_mistral': 2261, 'n_tokens_neox': 2131, 'n_words': 386}