<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Mercator Projection</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
    <style type="text/css">

@import url("../../lib/jquery-ui/jquery-ui.css");

body, .ui-widget {
  font: 14px Helvetica Neue;
}

svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  background: #eee;
}

line {
  stroke: brown;
  stroke-dasharray: 4,2;
}

path {
  fill: #ccc;
  stroke: #fff;
}

div {
  width: 960px;
}

    </style>
  </head>
  <body>
    <h3>Mercator Projection</h3>
    <script type="text/javascript">

// Our projection.
var xy = d3.geo.mercator(),
    path = d3.geo.path().projection(xy);

var states = d3.select("body")
  .append("svg")
  .append("g")
    .attr("id", "states");

var equator = d3.select("svg")
  .append("line")
    .attr("x1", "0%")
    .attr("x2", "100%");

d3.json("../data/world-countries.json", function(collection) {

  states
    .selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.properties.name; });

  equator
      .attr("y1", xy([0, 0])[1])
      .attr("y2", xy([0, 0])[1])
});

function refresh() {
  states
    .selectAll("path")
      .attr("d", path);

  equator
      .attr("y1", xy([0, 0])[1])
      .attr("y2", xy([0, 0])[1])

  d3.select("#scale span")
      .text(xy.scale());
  d3.select("#translate-x span")
      .text(xy.translate()[0]);
  d3.select("#translate-y span")
      .text(xy.translate()[1]);
}

    </script><p>
    <div id="scale">scale: <span>500</span></div><p>
    <div id="translate-x">translate.x: <span>480</span></div>
    <div id="translate-y">translate.y: <span>250</span></div>
    <script type="text/javascript">

$("#scale").slider({
  min: 0,
  max: 3000,
  value: 500,
  slide: function(event, ui) {
    xy.scale(ui.value);
    refresh();
  }
});
<commit_msg>Add missing semicolon to mercator example.<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Mercator Projection</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
    <style type="text/css">

@import url("../../lib/jquery-ui/jquery-ui.css");

body, .ui-widget {
  font: 14px Helvetica Neue;
}

svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  background: #eee;
}

line {
  stroke: brown;
  stroke-dasharray: 4,2;
}

path {
  fill: #ccc;
  stroke: #fff;
}

div {
  width: 960px;
}

    </style>
  </head>
  <body>
    <h3>Mercator Projection</h3>
    <script type="text/javascript">

// Our projection.
var xy = d3.geo.mercator(),
    path = d3.geo.path().projection(xy);

var states = d3.select("body")
  .append("svg")
  .append("g")
    .attr("id", "states");

var equator = d3.select("svg")
  .append("line")
    .attr("x1", "0%")
    .attr("x2", "100%");

d3.json("../data/world-countries.json", function(collection) {

  states
    .selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.properties.name; });

  equator
      .attr("y1", xy([0, 0])[1])
      .attr("y2", xy([0, 0])[1]);
});

function refresh() {
  states
    .selectAll("path")
      .attr("d", path);

  equator
      .attr("y1", xy([0, 0])[1])
      .attr("y2", xy([0, 0])[1]);

  d3.select("#scale span")
      .text(xy.scale());
  d3.select("#translate-x span")
      .text(xy.translate()[0]);
  d3.select("#translate-y span")
      .text(xy.translate()[1]);
}

    </script><p>
    <div id="scale">scale: <span>500</span></div><p>
    <div id="translate-x">translate.x: <span>480</span></div>
    <div id="translate-y">translate.y: <span>250</span></div>
    <script type="text/javascript">

$("#scale").slider({
  min: 0,
  max: 3000,
  value: 500,
  slide: function(event, ui) {
    xy.scale(ui.value);
    refresh();
  }
});

{'fraction_non_alphanumeric': 0.23401329360531745, 'fraction_numerical': 0.031171212468484987, 'mean_word_length': 3.0823199251637043, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, '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': '3286720', 'n_tokens_mistral': 1767, 'n_tokens_neox': 1682, 'n_words': 297}