<commit_before><!DOCTYPE html>
<html>

<head>
    <title>Better Food Choices</title>
    <!--<link rel="stylesheet" href="css/style.css">
	-->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://localhost:8000/hos_panel.js"></script>
    <script src="http://localhost:8000/search_panel.js"></script>
    <script src="http://localhost:8000/libs/papaparse.min.js"></script>
    <script src="http://localhost:8000/TS_parallel_chart.js"></script>
    <script src="http://localhost:8000/TS_nutrition_facts.js"></script>
    <script src="http://localhost:8000/load_data.js"></script>
    <script src="http://localhost:8000/option_buttons.js"></script>
     <script src="http://localhost:8000/bar-chart/bar-chart-v8/bar_chart.js"></script>
    <script>
        var url = "http://localhost:8000/demo_food_data_latest.csv";
        // var url = "http://localhost:8000/demo_food_data_sd_regularized_columns.csv";

        // bfc stands for better food choices
        var bfc_context = {
            selected_topmenu_button :null,
            selected_submenu_button :null,
    };
    </script>
</head>

<body>
    <style>

        .main_button {
            background-color: #999999;
            color: white;
            padding: 8px 24px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
			font-weight: bold;
            margin: 4px 2px;
            cursor: pointer;
            border: 2px solid;
            border-radius: 25px;
            width: 188px;
            outline: none;
        }

		.main_button:hover {
			background-color: #0071BC;
		}

        .sv_button {
            background-color: #999999;
            color: white;
            padding: 8px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
			font-weight: bold;
            margin: 4px 2px;
            cursor: pointer;
            border: 2px solid;
            border-radius: 25px;
            width: 110px;
            outline: none;
        }

		.sv_button:hover {
			background-color: #0071BC;
		}

        .table td, .table th {
            height: 32px;
        }

        .inactive {
            background-color: white;
            color: #bdbdbd;
            }

        .active {
            background-color: #999999;
            color: white;
            }
        h1 {
            margin: 0px 0px 15px 20px;
            font-family: sans-serif;
            }

        .label {
            fill: black;
            font: 12px sans-serif;
            }

        .y path, .y stroke, .y line {
            display: none;
            }

        .x path, .x stroke {
            display: none;
            }

        .hover {
            background-color:#0071BC;
}

        #measureOptions {
                font: 14px sans-serif;
            }

    </style>

       <body>
      <table  width= "1200" border = "0">
        <tr>
            <td colspan = 4><img src="http://localhost:8000/betterfood_toppanel.png" alt="" border=0 height=75 width=1220></img></td>
        </tr>

        <tr>
    	    <th colspan = 4 width="1220" align="right"><font size="4" color="black"><a href="http://localhost:8000/about.html">About this website</a></th>
        </tr>

         <tr valign = "top" >
            <td id="hos-panel"  width = "760" height = "140">
            </td>

            <td id="search-panel" width = "440">
                <table>
                    <tr>
                    <td>
                        <label  style="font-family:sans-serif;font-size:20px;"><br><br>Start typing below to search for a product:</label>
                    </td>
                    </tr>
                    <tr>
                    <td>
                        <input style="font-weight:bold;font-size:20px;font-family:sans-serif;border-width:5px;border-style:solid;border-color:gray;width:440px;height:30px" type="text" id="search-text" placeholder="...">
                        <div id="filteredList"></div>
                        <script src="search_panel.js"></script>
                        <script>
                            var data;
                            loadUSDAData();
                        </script>
                    </td>
                    </tr>
                </table>
            </td>
         </tr>
        <tr>
            <table width = "1200">
            <td>
                <table width = "600">
                    <tr>
                        <td>
                            <button type="button" id="sv" class="main_button inactive" onclick="optionButtonSelected(this.id)" >Simple View</button>
                            <button type="button"  id="av-parallel" class="main_button inactive" onclick="optionButtonSelected(this.id)">Multiple Measures </button>
                            <button type="button"  id="av-polygon" class="main_button inactive" onclick="optionButtonSelected(this.id)">Compare Two</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                                <button type="button"  id="fat" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Fat</button>
                                <button type="button"  id="sugars" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Sugars</button>
                                <button type="button"  id="proteins" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Proteins</button>
                                <button type="button"  id="sodium" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Sodium</button>
                                <button type="button"  id="fiber" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Fiber</button>
                        </td>

                        <script>
                            initOptionButtons();
                        </script>
                    </tr>
                    <tr>
                        <td>
                            <svg id = "chart1" width="600" height="400"></svg>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table width = "600">
                    <tr>
                        <td>
                            <svg id = "nutfacts_panel" width="600" height="500"></svg>
                        </td>
                    </tr>
                </table>
            </td>
        </table>
        </tr>

        <tr>
            <td colspan = 4><img src="http://localhost:8000/betterfood_bottompanel.png" alt="" border=0 height=150 width=1220></img></td>
        </tr>
      <table>
   </body>

    <script>



    // other variables
    var hos_data;
    var hos_width = 760;
    var hos_height = 140;

    // create SVG element
    var svg = d3.select("#hos-panel")
            .append("svg")
            .attr("width", hos_width)
            .attr("height", hos_height);

    d3.csv(url, function(error, data) {
        drawHOS(svg,data);
    });

    </script>
</body>

</html>
<commit_msg>changed About text style to sans-serif<commit_after><!DOCTYPE html>
<html>

<head>
    <title>Better Food Choices</title>
    <!--<link rel="stylesheet" href="css/style.css">
	-->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://localhost:8000/hos_panel.js"></script>
    <script src="http://localhost:8000/search_panel.js"></script>
    <script src="http://localhost:8000/libs/papaparse.min.js"></script>
    <script src="http://localhost:8000/TS_parallel_chart.js"></script>
    <script src="http://localhost:8000/TS_nutrition_facts.js"></script>
    <script src="http://localhost:8000/load_data.js"></script>
    <script src="http://localhost:8000/option_buttons.js"></script>
     <script src="http://localhost:8000/bar-chart/bar-chart-v8/bar_chart.js"></script>
    <script>
        var url = "http://localhost:8000/demo_food_data_latest.csv";
        // var url = "http://localhost:8000/demo_food_data_sd_regularized_columns.csv";

        // bfc stands for better food choices
        var bfc_context = {
            selected_topmenu_button :null,
            selected_submenu_button :null,
    };
    </script>
</head>

<body>
    <style>

        .main_button {
            background-color: #999999;
            color: white;
            padding: 8px 24px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
			font-weight: bold;
            margin: 4px 2px;
            cursor: pointer;
            border: 2px solid;
            border-radius: 25px;
            width: 188px;
            outline: none;
        }

		.main_button:hover {
			background-color: #0071BC;
		}

        .sv_button {
            background-color: #999999;
            color: white;
            padding: 8px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
			font-weight: bold;
            margin: 4px 2px;
            cursor: pointer;
            border: 2px solid;
            border-radius: 25px;
            width: 110px;
            outline: none;
        }

		.sv_button:hover {
			background-color: #0071BC;
		}

        .table td, .table th {
            height: 32px;
        }

        .inactive {
            background-color: white;
            color: #bdbdbd;
            }

        .active {
            background-color: #999999;
            color: white;
            }
        h1 {
            margin: 0px 0px 15px 20px;
            font-family: sans-serif;
            }

        .label {
            fill: black;
            font: 12px sans-serif;
            }

        .y path, .y stroke, .y line {
            display: none;
            }

        .x path, .x stroke {
            display: none;
            }

        .hover {
            background-color:#0071BC;
}

        #measureOptions {
                font: 14px sans-serif;
            }

    </style>

       <body>
      <table  width= "1200" border = "0">
        <tr>
            <td colspan = 4><img src="http://localhost:8000/betterfood_toppanel.png" alt="" border=0 height=75 width=1220></img></td>
        </tr>

        <tr>
    	    <th colspan = 4 width="1220" align="right"><font style="font-family:sans-serif;font-size:16px;" color="black"><a href="http://localhost:8000/about.html">About this website</a></th>
        </tr>

         <tr valign = "top" >
            <td id="hos-panel"  width = "760" height = "140">
            </td>

            <td id="search-panel" width = "440">
                <table>
                    <tr>
                    <td>
                        <label  style="font-family:sans-serif;font-size:20px;"><br><br>Start typing below to search for a product:</label>
                    </td>
                    </tr>
                    <tr>
                    <td>
                        <input style="font-weight:bold;font-size:20px;font-family:sans-serif;border-width:5px;border-style:solid;border-color:gray;width:440px;height:30px" type="text" id="search-text" placeholder="...">
                        <div id="filteredList"></div>
                        <script src="search_panel.js"></script>
                        <script>
                            var data;
                            loadUSDAData();
                        </script>
                    </td>
                    </tr>
                </table>
            </td>
         </tr>
        <tr>
            <table width = "1200">
            <td>
                <table width = "600">
                    <tr>
                        <td>
                            <button type="button" id="sv" class="main_button inactive" onclick="optionButtonSelected(this.id)" >Simple View</button>
                            <button type="button"  id="av-parallel" class="main_button inactive" onclick="optionButtonSelected(this.id)">Multiple Measures </button>
                            <button type="button"  id="av-polygon" class="main_button inactive" onclick="optionButtonSelected(this.id)">Compare Two</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                                <button type="button"  id="fat" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Fat</button>
                                <button type="button"  id="sugars" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Sugars</button>
                                <button type="button"  id="proteins" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Proteins</button>
                                <button type="button"  id="sodium" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Sodium</button>
                                <button type="button"  id="fiber" class="sv_button inactive" onclick="optionButtonSelected(this.id)">Fiber</button>
                        </td>

                        <script>
                            initOptionButtons();
                        </script>
                    </tr>
                    <tr>
                        <td>
                            <svg id = "chart1" width="600" height="400"></svg>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table width = "600">
                    <tr>
                        <td>
                            <svg id = "nutfacts_panel" width="600" height="500"></svg>
                        </td>
                    </tr>
                </table>
            </td>
        </table>
        </tr>

        <tr>
            <td colspan = 4><img src="http://localhost:8000/betterfood_bottompanel.png" alt="" border=0 height=150 width=1220></img></td>
        </tr>
      <table>
   </body>

    <script>



    // other variables
    var hos_data;
    var hos_width = 760;
    var hos_height = 140;

    // create SVG element
    var svg = d3.select("#hos-panel")
            .append("svg")
            .attr("width", hos_width)
            .attr("height", hos_height);

    d3.csv(url, function(error, data) {
        drawHOS(svg,data);
    });

    </script>
</body>

</html>

{'fraction_non_alphanumeric': 0.13933933933933934, 'fraction_numerical': 0.028895562228895562, 'mean_word_length': 1.4233505821474774, 'pattern_counts': {'":': 0, '<': 285, '<?xml version=': 0, '>': 285, 'https://': 4, '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': '1247097', 'n_tokens_mistral': 4729, 'n_tokens_neox': 4193, 'n_words': 797}