<commit_before><link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="sf-life" attributes="">
    <template>
        <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
        <link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
        <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../js/vanilla.js"></script>
        <script src="../js/jquery.min.js"></script>
        <style>
        .left-panel {
            background-color: #45DFBE;
            height: 100%;
            padding: 50px;
        }
        .right-panel {
            background-color: #FFFFFF;
            height: 100%;
        }
        .option-tab {
        }
    </style>
    <div class="top-section">
    <div class="row">
      <div class="col-md-4 left-panel">
        <div center horizontal layout>
            <div flex><h2>EDGE</h2></div>
        </div>
        </br>
        <div center horizontal layout class="option-tab">
            <div flex> Community Gardens </div>
            <paper-toggle-button role="button" aria-pressed="{{gardens_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Farmers Markets </div>
            <paper-toggle-button role="button" aria-pressed="{{markets_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Health Facility Proximity </div>
            <paper-toggle-button role="button" aria-pressed="{{health_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Rent Burden </div>
            <paper-toggle-button role="button" aria-pressed="{{rentburden_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Transit Frequency </div>
            <paper-toggle-button role="button" aria-pressed="{{transit_selected}}"></paper-toggle-button>
        </div>
      </div>
      
      <div class="col-md-8 right-panel">
          <div id="map" style="width: 100%; height: 100%"></div>
      </div>

    </div>
    </div>
    </template>
    <script src="../js/d3.v2.min.js"></script>
    <script src="../bower_components/require/build/require.min.js"></script>
    <script>
        var $j = jQuery.noConflict();
        Polymer('sf-life', {
            metricData: null,
            ready: function() {



                var r = new XMLHttpRequest();
                r.open("GET", "static/data/SF.json", true);
                r.onreadystatechange = function () {
                  if (r.readyState != 4 || r.status != 200) return;
                  metricData = JSON.parse(r.responseText);
                  console.dir(metricData);
                };
                var that = this;
                var draw = function() {
                    if (that.$.map.querySelector('svg') != undefined) {
                        that.$.map.querySelector('svg').remove();
                    }
                    var arr = [];
                    var rates = [];
                    var width = that.$.map.offsetWidth;
                    var height = that.$.map.offsetHeight;
                    console.log("height: " + height + " width: " + width);

                    //var scale = width * 354;
                    var scale = (width/843)*268000;
                    var horizontalOffset = width / 1.7;
                    var verticalOffset = height / 3.05;
                    var map = d3.select(that.$.map).append('svg').attr("width", width)
                    .attr("height", height);
                    var path = d3.geo.path().projection(d3.geo.albers().origin([-122.4031949051393, 37.80511854740679]).scale(scale).translate([horizontalOffset, verticalOffset]));

                    d3.json('static/data/AsthmaRates_CB00.json', function(json) {
                        map.selectAll('path')
                               .data(json.features)
                               .enter().append('path')
                               .attr('d', path)
                               .attr("id", function(d, i){ /*console.log(i);*/ return 'n' + i })
                               .attr('class', function(d, i) {
                                   //console.log('block: ' + d.properties.BLOCKGROUP);
                                   //   console.log('zip z' + d.properties);
                                   arr.push(d.properties);
                                   return 'block b' + d.properties.BLOCKGROUP // + 'num id' + i
                               })
                               .style("fill", function(d, i){ /*console.log(i);*/ return 'n' + i })
                               .on('mouseover', function() {
                                    var zip = d3.select(this).attr('class').split('block b').join('');
                                    var ques = d3.select(this).attr('id').split('n').join('');
                                    //console.log('block ' + zip + ' selected with id ' + ques);

                                    d3.select(that.$.map).selectAll('p').text('');
                                    for (key in arr) {
                                        d3.select(that.$.map.querySelector('.b' + arr[key].BLOCKGROUP)).style("fill", "black");
                                    }
                                    d3.select(that.$.map.querySelector('.b' + zip)).style("fill", "purple");
                                    //d3.select(this.$.map).append('p').text('District: ' + zip);
                                    //d3.select(this.$.map).append('p').text('Value: ' + arr[ques].ASTHMARATE);

                                    //Sample -- d3.select('#map .z94110').style("fill", "purple");

                                    //highlightZip(zip);
                               });
                    }); 
                }
                draw();
                $j(window).resize(function() {
                    if(this.resizeTO) clearTimeout(this.resizeTO);
                    this.resizeTO = setTimeout(function() {
                        $j(this).trigger('resizeEnd');
                    }, 500);
                });

                $j(window).bind('resizeEnd', function() {
                    draw();
                });
            }

        });
    </script>
    
</polymer-element><commit_msg>add on mouseout<commit_after><link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="sf-life" attributes="">
    <template>
        <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
        <link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
        <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../js/vanilla.js"></script>
        <script src="../js/jquery.min.js"></script>
        <style>
        .left-panel {
            background-color: #45DFBE;
            height: 100%;
            padding: 50px;
        }
        .right-panel {
            background-color: #FFFFFF;
            height: 100%;
        }
        .option-tab {
        }
    </style>
    <div class="top-section">
    <div class="row">
      <div class="col-md-4 left-panel">
        <div center horizontal layout>
            <div flex><h2>EDGE</h2></div>
        </div>
        </br>
        <div center horizontal layout class="option-tab">
            <div flex> Community Gardens </div>
            <paper-toggle-button role="button" aria-pressed="{{gardens_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Farmers Markets </div>
            <paper-toggle-button role="button" aria-pressed="{{markets_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Health Facility Proximity </div>
            <paper-toggle-button role="button" aria-pressed="{{health_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Rent Burden </div>
            <paper-toggle-button role="button" aria-pressed="{{rentburden_selected}}"></paper-toggle-button>
        </div> 
            </br>
        <div center horizontal layout class="option-tab">
            <div flex> Transit Frequency </div>
            <paper-toggle-button role="button" aria-pressed="{{transit_selected}}"></paper-toggle-button>
        </div>
      </div>
      
      <div class="col-md-8 right-panel">
          <div id="map" style="width: 100%; height: 100%"></div>
      </div>

    </div>
    </div>
    </template>
    <script src="../js/d3.v2.min.js"></script>
    <script src="../bower_components/require/build/require.min.js"></script>
    <script>
        var $j = jQuery.noConflict();
        Polymer('sf-life', {
            metricData: null,
            ready: function() {



                var r = new XMLHttpRequest();
                r.open("GET", "static/data/SF.json", true);
                r.onreadystatechange = function () {
                  if (r.readyState != 4 || r.status != 200) return;
                  metricData = JSON.parse(r.responseText);
                  console.dir(metricData);
                };
                var that = this;
                var draw = function() {
                    if (that.$.map.querySelector('svg') != undefined) {
                        that.$.map.querySelector('svg').remove();
                    }
                    var arr = [];
                    var rates = [];
                    var width = that.$.map.offsetWidth;
                    var height = that.$.map.offsetHeight;
                    console.log("height: " + height + " width: " + width);

                    //var scale = width * 354;
                    var scale = (width/843)*268000;
                    var horizontalOffset = width / 1.7;
                    var verticalOffset = height / 3.05;
                    var map = d3.select(that.$.map).append('svg').attr("width", width)
                    .attr("height", height);
                    var path = d3.geo.path().projection(d3.geo.albers().origin([-122.4031949051393, 37.80511854740679]).scale(scale).translate([horizontalOffset, verticalOffset]));

                    d3.json('static/data/AsthmaRates_CB00.json', function(json) {
                        map.selectAll('path')
                                .data(json.features)
                                .enter().append('path')
                                .attr('d', path)
                                .attr("id", function(d, i){ /*console.log(i);*/ return 'n' + i })
                                .attr('class', function(d, i) {
                                    //console.log('block: ' + d.properties.BLOCKGROUP);
                                    //   console.log('zip z' + d.properties);
                                    arr.push(d.properties);
                                    return 'block b' + d.properties.BLOCKGROUP // + 'num id' + i
                                })
                                .style("fill", function(d, i){ /*console.log(i);*/ return 'n' + i })
                                .on('mouseover', function() {
                                    var zip = d3.select(this).attr('class').split('block b').join('');
                                    var ques = d3.select(this).attr('id').split('n').join('');
                                    //console.log('block ' + zip + ' selected with id ' + ques);

                                    d3.select(that.$.map).selectAll('p').text('');
                                    for (key in arr) {
                                        d3.select(that.$.map.querySelector('.b' + arr[key].BLOCKGROUP)).style("fill", "black");
                                    }
                                    d3.select(that.$.map.querySelector('.b' + zip)).style("fill", "purple");
                                    //d3.select(this.$.map).append('p').text('District: ' + zip);
                                    //d3.select(this.$.map).append('p').text('Value: ' + arr[ques].ASTHMARATE);

                                    //Sample -- d3.select('#map .z94110').style("fill", "purple");

                                    //highlightZip(zip);
                                })
                                .on('mouseout', function() {
                                    for (key in arr) {
                                        d3.select(that.$.map.querySelector('.b' + arr[key].BLOCKGROUP)).style("fill", "black");
                                    }
                                });
                    }); 
                }
                draw();
                $j(window).resize(function() {
                    if(this.resizeTO) clearTimeout(this.resizeTO);
                    this.resizeTO = setTimeout(function() {
                        $j(this).trigger('resizeEnd');
                    }, 500);
                });

                $j(window).bind('resizeEnd', function() {
                    draw();
                });
            }

        });
    </script>
    
</polymer-element>
{'fraction_non_alphanumeric': 0.15557971014492752, 'fraction_numerical': 0.014130434782608696, 'mean_word_length': 1.3063168449197862, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 149, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 41, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5913387', 'n_tokens_mistral': 3804, 'n_tokens_neox': 3505, 'n_words': 624}