<commit_before><!doctype html>
<title>Reddit Top 100 with Thumbnails</title>
<link rel="stylesheet" type="text/css" href="../d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
html, body { width: 100%; }
#example { width: 100%; height: 400px; position: fixed; top: 10px;}
#grid { height: 198px; width: 3800px;}
#thumbnails { height: 110px; width: 3800px; overflow: hidden; margin-top: 412px; }
.row, .header { clear: left; font-size: 12px; line-height: 18px; height: 18px; }
.row:nth-child(odd) { background: rgba(0,0,0,0.05); }
.header { font-weight: bold; }
.cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; height: 18px; }
#thumbnails img { height: 110px; padding-right: 12px; }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src="../d3.parcoords.js"></script>
<script src="lib/divgrid.js"></script>
<div id="example" class="parcoords"></div>
<div id="thumbnails"></div>
<div id="grid"></div>
<script>
var parcoords = d3.parcoords()("#example")
  .alpha(0.4);

var dimensions = ["score", "created", "domain", "downs", "ups", "num_comments", "subreddit"];

// load csv file and create the chart
$.getJSON('http://www.reddit.com/.json?limit=100&jsonp=?', function(raw) {
  var data = raw['data']['children'].map(function(d) { return d.data });

  parcoords
    .data(data)
    .detectDimensions()
    .dimensions(dimensions)
    .render()
    .brushMode("1D-axes");  // enable brushing

  // thumbnails
  updateThumbnails(data);

  // create data table, row hover highlighting
  var grid = d3.divgrid();
  d3.select("#grid")
    .datum(data.slice(0,10))
    .call(grid)
    .selectAll(".row")
    .on({
      "mouseover": function(d) { parcoords.highlight([d]) },
      "mouseout": parcoords.unhighlight
    });

  // update data table on brush event
  parcoords.on("brush", function(d) {
    d3.select("#grid")
      .datum(d.slice(0,10))
      .call(grid)
      .selectAll(".row")
      .on({
        "mouseover": function(d) { parcoords.highlight([d]) },
        "mouseout": parcoords.unhighlight
      });
    updateThumbnails(d);
  });

  function updateThumbnails(data) {
    var imgs = d3.select("#thumbnails")
      .selectAll("img")
      .data(data, function(d) { return d.thumbnail })
    imgs.exit().remove();
    imgs.enter()
      .append("a")
      .attr("href", function(d) { return d.url; })
      .append("img")
      .attr("src", function(d) { return d.thumbnail; })
      .on({
        "mouseover": function(d) { parcoords.highlight([d]) },
        "mouseout": parcoords.unhighlight
      })
  };
});
</script>
<commit_msg>Fix reddit example(don't need to call detectDimensions)<commit_after><!doctype html>
<title>Reddit Top 100 with Thumbnails</title>
<link rel="stylesheet" type="text/css" href="../d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
html, body { width: 100%; }
#example { width: 100%; height: 400px; position: fixed; top: 10px;}
#grid { height: 198px; width: 3800px;}
#thumbnails { height: 110px; width: 3800px; overflow: hidden; margin-top: 412px; }
.row, .header { clear: left; font-size: 12px; line-height: 18px; height: 18px; }
.row:nth-child(odd) { background: rgba(0,0,0,0.05); }
.header { font-weight: bold; }
.cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; height: 18px; }
#thumbnails img { height: 110px; padding-right: 12px; }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src="../d3.parcoords.js"></script>
<script src="lib/divgrid.js"></script>
<div id="example" class="parcoords"></div>
<div id="thumbnails"></div>
<div id="grid"></div>
<script>
var parcoords = d3.parcoords()("#example")
  .alpha(0.4);

var dimensions = ["score", "created", "domain", "downs", "ups", "num_comments", "subreddit"];

// load csv file and create the chart
$.getJSON('http://www.reddit.com/.json?limit=100&jsonp=?', function(raw) {
  var data = raw['data']['children'].map(function(d) { return d.data });

  parcoords
    .data(data)
    .dimensions(dimensions)
    .render()
    .brushMode("1D-axes");  // enable brushing

  // thumbnails
  updateThumbnails(data);

  // create data table, row hover highlighting
  var grid = d3.divgrid();
  d3.select("#grid")
    .datum(data.slice(0,10))
    .call(grid)
    .selectAll(".row")
    .on({
      "mouseover": function(d) { parcoords.highlight([d]) },
      "mouseout": parcoords.unhighlight
    });

  // update data table on brush event
  parcoords.on("brush", function(d) {
    d3.select("#grid")
      .datum(d.slice(0,10))
      .call(grid)
      .selectAll(".row")
      .on({
        "mouseover": function(d) { parcoords.highlight([d]) },
        "mouseout": parcoords.unhighlight
      });
    updateThumbnails(d);
  });

  function updateThumbnails(data) {
    var imgs = d3.select("#thumbnails")
      .selectAll("img")
      .data(data, function(d) { return d.thumbnail })
    imgs.exit().remove();
    imgs.enter()
      .append("a")
      .attr("href", function(d) { return d.url; })
      .append("img")
      .attr("src", function(d) { return d.thumbnail; })
      .on({
        "mouseover": function(d) { parcoords.highlight([d]) },
        "mouseout": parcoords.unhighlight
      })
  };
});
</script>

{'fraction_non_alphanumeric': 0.20104244229337304, 'fraction_numerical': 0.028294862248696945, 'mean_word_length': 3.651948051948052, 'pattern_counts': {'":': 12, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, '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': '3785922', 'n_tokens_mistral': 2051, 'n_tokens_neox': 1913, 'n_words': 399}