<commit_before>// A map visualization.
//
// Draws from:
//
//  * Mike Bostock's map example:
//    http://bl.ocks.org/mbostock/3757132
//  * SVG Geometric Zooming example:
//    http://bl.ocks.org/mbostock/3680999
//
// TODO visualize UN population data drawing from
// Choropleth - http://bl.ocks.org/mbostock/4060606
//
// <NAME> 4/9/2014
define([], function () {

  // The constructor function invoked by `dashboardScaffold`.
  return function (dashboard) {

    // Append the svg element for this visualization
    // to the dashboard div.
    var svg = dashboard.div.append('svg')

          // Use CSS `position: absolute;`
          // so setting `left` and `top` later will
          // position the SVG relative to the dashboard div.
          .style('position', 'absolute'),

        // Use a mercator projection.
        projection = d3.geo.mercator().precision(.1),
        geoPath = d3.geo.path().projection(projection),
        g = svg.append('g')
          .call(d3.behavior.zoom().on('zoom', zoom))
          .append('g'),

        // The dummy visualization has
        // the following configuration options:
        model = new Backbone.Model({
          // `box` is a property expected to be on all
          // visualization components, and is set by
          // the dashboard layout engine.
        });

    model

      // When the size of the visualization is set
      // by the dashboard layout engine,
      .wire('box', function (box) {

        // Set the CSS `left` and `top` properties
        // to move the SVG to `(box.x, box.y)`
        // relative to the dashboard div.
        svg
          .style('left', box.x + 'px')
          .style('top', box.y + 'px')

          // Set the `width` and `height` attributes
          // to the size computed by the dashboard layout engine
          // on the SVG element 
          .attr('width', box.width)
          .attr('height', box.height);
      })

      // When the data or size changes,
      .wire(['features', 'box'], function (features, box) {

        // update the map projection based on the current box,
        projection
          .scale((box.width + 1) / 2 / Math.PI)
          .translate([box.width / 2, box.height / 2]);

        // render the map.
        var path = g.selectAll('path').data(features);
        path.enter().append('path');
        path.attr('d', geoPath);
        
        // TODO traverse the data, not the geoJSON,
        // looking up polygons for each data element.
        //path.attr('d', function (d) {
        //  console.log(d);
        //  return geoPath(d);
        //});
      });

    function zoom() {
      g.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
    }

    // TODO move this into the data configuration
    d3.json('data/natural_earth/countries.json', function(error, data) {
      var feature = topojson.feature(data, data.objects.countriesGeoJSON);
      model.set('features', feature.features);
    });

    return model
  }
});<commit_msg>Simplified code for zooming and panning on map. Fixed interaction bug that required hovering over polygons for pan and zoom to work<commit_after>// A map visualization.
//
// Draws from:
//
//  * Mike Bostock's map example:
//    http://bl.ocks.org/mbostock/3757132
//  * SVG Geometric Zooming example:
//    http://bl.ocks.org/mbostock/3680999
//
// TODO visualize UN population data drawing from
// Choropleth - http://bl.ocks.org/mbostock/4060606
//
// <NAME> 4/9/2014
define([], function () {

  // The constructor function invoked by `dashboardScaffold`.
  return function (dashboard) {

    // Append the svg element for this visualization
    // to the dashboard div.
    var svg = dashboard.div.append('svg')

          // Use CSS `position: absolute;`
          // so setting `left` and `top` later will
          // position the SVG relative to the dashboard div.
          .style('position', 'absolute'),

        // Use a mercator projection.
        projection = d3.geo.mercator().precision(.1),
        geoPath = d3.geo.path().projection(projection),
        g = svg.append('g'),

        // The dummy visualization has
        // the following configuration options:
        model = new Backbone.Model({
          // `box` is a property expected to be on all
          // visualization components, and is set by
          // the dashboard layout engine.
        });

    model

      // When the size of the visualization is set
      // by the dashboard layout engine,
      .wire('box', function (box) {

        // Set the CSS `left` and `top` properties
        // to move the SVG to `(box.x, box.y)`
        // relative to the dashboard div.
        svg
          .style('left', box.x + 'px')
          .style('top', box.y + 'px')

          // Set the `width` and `height` attributes
          // to the size computed by the dashboard layout engine
          // on the SVG element 
          .attr('width', box.width)
          .attr('height', box.height);
      })

      // When the data or size changes,
      .wire(['features', 'box'], function (features, box) {

        // update the map projection based on the current box,
        projection
          .scale((box.width + 1) / 2 / Math.PI)
          .translate([box.width / 2, box.height / 2]);

        // render the map.
        var path = g.selectAll('path').data(features);
        path.enter().append('path');
        path.attr('d', geoPath);
        
        // TODO traverse the data, not the geoJSON,
        // looking up polygons for each data element.
        //path.attr('d', function (d) {
        //  console.log(d);
        //  return geoPath(d);
        //});
      });

    // Set up zooming and panning.
    // TODO integrate zoom and pan with the model
    svg.call(d3.behavior.zoom().on('zoom', function () {
      g.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
    }));

    // TODO move this into the data configuration
    d3.json('data/natural_earth/countries.json', function(error, data) {
      var feature = topojson.feature(data, data.objects.countriesGeoJSON);
      model.set('features', feature.features);
    });

    return model
  }
});
{'fraction_non_alphanumeric': 0.13920591544767721, 'fraction_numerical': 0.012216685420350426, 'mean_word_length': 1.9770334928229665, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '5681119', 'n_tokens_mistral': 1883, 'n_tokens_neox': 1767, 'n_words': 561}