<commit_before><html>
<head>
<script src="/static/jquery-1.5.1.min.js" type="text/javascript"></script>
<style type="text/css">
body{
    padding-top: 1em;
    padding-bottom: 1em;
    font-family: Helvetica, Arial, Verdana, serif;
    font-size: 0.9em;
    color: #555;
    background: #eee;
}

a {
    color: #444;
}

.clear{
    clear: both;
}

p {
    font-size: 0.8em;
    font-style: italic;
    padding: 0.5em;
}

#logo{
    width: 900px;
    height: 106px;
    background: url('/static/logo.png');
    margin: auto;
}
#logo h1{
    text-indent: -9999px;
}
h1, h2{
    text-align: center;
}
iframe {
    border: none;
}

div.container {
    width: 1050px;
    margin: auto;
    margin-bottom: 10px;
}

div.graph {
    border: 1px solid #ccc;
    background: white;
}

div.footer{
    text-align: center;
}

div#bar-changer {
    margin-left: 75px;
    padding: 20px;
}

div#bullet-changer {
    float:left;
    margin-top: 70px;
}
span.bar-item{
    padding: 7px;
    margin-right: 2em;
    cursor: pointer;
}

span.bar-item:hover{
    text-decoration: underline;
}
span.current{
    background: #dedede;
    border-radius: 7px;
    opacity: 1 !important;
}

span.bullet-item{
    display: block;
    margin-bottom: 0.5em;
    padding: 5px;
    cursor: pointer;
    opacity: 0.5;
}

span.bullet-item:hover{
    opacity: 1;
}

#legend{
    padding: 1.5em;
    padding-left: 10em;
}

#legend > span{
    padding-right: 1em;
}
span.legend-item{
    display: inline-block;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
}

span#a span.legend-item{
    background: #F07F97;
}
span#g span.legend-item{
    background: #F2B968; 
}
span#k span.legend-item{
    background: #FFE28A;
}
span#n span.legend-item{
    background: #ADD164;
}
span#q span.legend-item{
    background: #9ED5DE;
}
span#p span.legend-item{
    background: #6D93C9;
}
span#r span.legend-item{
    background: #C29EDE;
}

p.whats {
    text-align: right;
    cursor: pointer;
    margin: 0px;
    font-style: none;
}

p.whats:hover{
    text-decoration: underline;
}
p.popup {
    display: none;
    margin: 2px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".bar-item").click(function(){
        $(".bar-item").removeClass("current");
        $(this).addClass("current");
        $("#barchart").attr("src", "/graph/" + $(this).attr("id"));
    });
    
    $(".bullet-item").click(function(){
        $(".bullet-item").removeClass("current");
        $(this).addClass("current");
        $("#bulletchart").attr("src", "/graph/" + $(this).attr("id"));
    });
    $(".whats").hover(function(){
        popup = $("#" + $(this).attr("alt"));
        popup.show();
    }, function(){
        $("#" + $(this).attr("alt")).hide();
    });
});
</script>
</head>
<body>
<div id="logo">
    <h1><u>Cereal Visualization</u> by <NAME></h1>
</div>
<div class="container">
    <div class="graph">
        <h2>Comparison of Nutritional Facts for the 7 major cereal manufacturers</h2>
        <div style="float:left; margin-left: 1em;">
            <iframe id="barchart" scrolling="no" width="550px" height="280px" src="/graph/calories"></iframe>
            <div id="bar-changer">
                <span id="calories" class="bar-item current">Calories</span>
                <span id="protein" class="bar-item">Protein</span>
                <span id="fat" class="bar-item">Fat</span>
                <span id="carb" class="bar-item">Carbohydrates</span>
            </div>
        </div>
        <div style="float:left; margin-left: 10px;">
            <div style="float:left;width: 400px; margin-top: 20px;">
                <p class="whats" alt="bullet">What's this?</p><p id="bullet" class="popup">Recommended nutritional intake for breakfast (assuming breakfast is 1/5 of daily intake) with the average nutritional information from top cereal manufacturers.</p>
                <iframe id="bulletchart" scrolling="no" width="400px" height="280px" src="/graph/a"></iframe>
            </div>
            <div id="bullet-changer"> 
                <span id="a" class="bullet-item current"><span class="legend-item">A</span></span>
                <span id="g" class="bullet-item"><span class="legend-item">G</span></span>
                <span id="k" class="bullet-item"><span class="legend-item">K</span></span>
                <span id="n" class="bullet-item"><span class="legend-item">N</span></span>
                <span id="q" class="bullet-item"><span class="legend-item">Q</span></span>
                <span id="p" class="bullet-item"><span class="legend-item">P</span></span>
                <span id="r" class="bullet-item"><span class="legend-item">R</span></span>
            
            </div>
        </div>
        <div class="clear"></div>
        <div id="legend">
            <span id="a"><span class="legend-item">A</span>  AAHF Products</span>
            <span id="g"><span class="legend-item">G</span>  General Mill</span>
            <span id="k"><span class="legend-item">K</span>  Kellogs</span>
            <span id="n"><span class="legend-item">N</span>  Nabisco</span>
            <span id="q"><span class="legend-item">Q</span>  Post</span>
            <span id="p"><span class="legend-item">P</span>  Quaker Oats</span>
            <span id="r"><span class="legend-item">R</span>  Ralston Purina</span>
        </div>
    </div>
</div>
<div class="container">
    <div class="graph" style="float: left;">
        <h2>Hierarchy of Cereal Brands</h2>
        <div style="margin:auto; width: 350px; padding-bottom: 0px;">
            <p class="whats" alt="pie">What's this?</p><p id="pie" class="popup">Percentage of cereals offered by the top cereal manufacturers.</p>
            <iframe scrolling="no" width="350px" height="350px" src="/graph/pie"></iframe>
        </div>
        <div>
            <iframe scrolling="no" width="500px" height="900px" src="/graph/flare"></iframe>
        </div>
    </div>
    <div class="graph" style="float: left; margin-left: 10px; width: 536px;">
        <h2>Visual Heatmap of Cereal Nutrition</h2>
        <div style="padding-left: 3em; padding-right: 5em;">
            <p class="whats" alt="_heat">What's this?</p><p id="_heat" class="popup">Visual "heatmap" of relative nutritional values for various cereal brands. Darker colors mean high positive deviation from the mean for that particular category, while lighter colors mean high negative deviation from the mean.</p>
        </div>
        <iframe scrolling="no" width="536px" height="1250px" src="/graph/heat"></iframe>
    </div>
    <div class="clear"></div>
</div>
<div class="footer">
Design by <a href="http://www.amberfeng.com"><NAME></a>, Graph API by <a href="http://vis.stanford.edu/protovis/">Protovis</a>, Data set by <a href="http://datascienc.es">CS194-16 Spring 2011, UC Berkeley</a>
</div>
</body>
</html>
<commit_msg>added units to bar graph<commit_after><html>
<head>
<script src="/static/jquery-1.5.1.min.js" type="text/javascript"></script>
<style type="text/css">
body{
    padding-top: 1em;
    padding-bottom: 1em;
    font-family: Helvetica, Arial, Verdana, serif;
    font-size: 0.9em;
    color: #555;
    background: #eee;
}

a {
    color: #444;
}

.clear{
    clear: both;
}

p {
    font-size: 0.8em;
    font-style: italic;
    padding: 0.5em;
}

#logo{
    width: 900px;
    height: 106px;
    background: url('/static/logo.png');
    margin: auto;
}
#logo h1{
    text-indent: -9999px;
}
h1, h2{
    text-align: center;
}
iframe {
    border: none;
}

div.container {
    width: 1050px;
    margin: auto;
    margin-bottom: 10px;
}

div.graph {
    border: 1px solid #ccc;
    background: white;
}

div.footer{
    text-align: center;
}

div#bar-changer {
    margin-left: 35px;
    padding: 20px;
}

div#bullet-changer {
    float:left;
    margin-top: 70px;
}
span.bar-item{
    padding: 7px;
    margin-right: 1.5em;
    cursor: pointer;
}

span.bar-item:hover{
    text-decoration: underline;
}
span.current{
    background: #dedede;
    border-radius: 7px;
    opacity: 1 !important;
}

span.bullet-item{
    display: block;
    margin-bottom: 0.5em;
    padding: 5px;
    cursor: pointer;
    opacity: 0.5;
}

span.bullet-item:hover{
    opacity: 1;
}

#legend{
    padding: 1.5em;
    padding-left: 10em;
}

#legend > span{
    padding-right: 1em;
}
span.legend-item{
    display: inline-block;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
}

span#a span.legend-item{
    background: #F07F97;
}
span#g span.legend-item{
    background: #F2B968; 
}
span#k span.legend-item{
    background: #FFE28A;
}
span#n span.legend-item{
    background: #ADD164;
}
span#q span.legend-item{
    background: #9ED5DE;
}
span#p span.legend-item{
    background: #6D93C9;
}
span#r span.legend-item{
    background: #C29EDE;
}

p.whats {
    text-align: right;
    cursor: pointer;
    margin: 0px;
    font-style: none;
}

p.whats:hover{
    text-decoration: underline;
}
p.popup {
    display: none;
    margin: 2px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".bar-item").click(function(){
        $(".bar-item").removeClass("current");
        $(this).addClass("current");
        $("#barchart").attr("src", "/graph/" + $(this).attr("id"));
    });
    
    $(".bullet-item").click(function(){
        $(".bullet-item").removeClass("current");
        $(this).addClass("current");
        $("#bulletchart").attr("src", "/graph/" + $(this).attr("id"));
    });
    $(".whats").hover(function(){
        popup = $("#" + $(this).attr("alt"));
        popup.show();
    }, function(){
        $("#" + $(this).attr("alt")).hide();
    });
});
</script>
</head>
<body>
<div id="logo">
    <h1><u>Cereal Visualization</u> by <NAME></h1>
</div>
<div class="container">
    <div class="graph">
        <h2>Comparison of Nutritional Facts for the 7 major cereal manufacturers</h2>
        <div style="float:left; margin-left: 1em;">
            <iframe id="barchart" scrolling="no" width="550px" height="280px" src="/graph/calories"></iframe>
            <div id="bar-changer">
                <span id="calories" class="bar-item current">Calories (cal)</span>
                <span id="protein" class="bar-item">Protein (g)</span>
                <span id="fat" class="bar-item">Fat (g)</span>
                <span id="carb" class="bar-item">Carbohydrates (g)</span>
            </div>
        </div>
        <div style="float:left; margin-left: 10px;">
            <div style="float:left;width: 400px; margin-top: 20px;">
                <p class="whats" alt="bullet">What's this?</p><p id="bullet" class="popup">Recommended nutritional intake for breakfast (assuming breakfast is 1/5 of daily intake) with the average nutritional information from top cereal manufacturers.</p>
                <iframe id="bulletchart" scrolling="no" width="400px" height="280px" src="/graph/a"></iframe>
            </div>
            <div id="bullet-changer"> 
                <span id="a" class="bullet-item current"><span class="legend-item">A</span></span>
                <span id="g" class="bullet-item"><span class="legend-item">G</span></span>
                <span id="k" class="bullet-item"><span class="legend-item">K</span></span>
                <span id="n" class="bullet-item"><span class="legend-item">N</span></span>
                <span id="q" class="bullet-item"><span class="legend-item">Q</span></span>
                <span id="p" class="bullet-item"><span class="legend-item">P</span></span>
                <span id="r" class="bullet-item"><span class="legend-item">R</span></span>
            
            </div>
        </div>
        <div class="clear"></div>
        <div id="legend">
            <span id="a"><span class="legend-item">A</span>  AAHF Products</span>
            <span id="g"><span class="legend-item">G</span>  General Mill</span>
            <span id="k"><span class="legend-item">K</span>  Kellogs</span>
            <span id="n"><span class="legend-item">N</span>  Nabisco</span>
            <span id="q"><span class="legend-item">Q</span>  Post</span>
            <span id="p"><span class="legend-item">P</span>  Quaker Oats</span>
            <span id="r"><span class="legend-item">R</span>  Ralston Purina</span>
        </div>
    </div>
</div>
<div class="container">
    <div class="graph" style="float: left;">
        <h2>Hierarchy of Cereal Brands</h2>
        <div style="margin:auto; width: 350px; padding-bottom: 0px;">
            <p class="whats" alt="pie">What's this?</p><p id="pie" class="popup">Percentage of cereals offered by the top cereal manufacturers.</p>
            <iframe scrolling="no" width="350px" height="350px" src="/graph/pie"></iframe>
        </div>
        <div>
            <iframe scrolling="no" width="500px" height="900px" src="/graph/flare"></iframe>
        </div>
    </div>
    <div class="graph" style="float: left; margin-left: 10px; width: 536px;">
        <h2>Visual Heatmap of Cereal Nutrition</h2>
        <div style="padding-left: 3em; padding-right: 5em;">
            <p class="whats" alt="_heat">What's this?</p><p id="_heat" class="popup">Visual "heatmap" of relative nutritional values for various cereal brands. Darker colors mean high positive deviation from the mean for that particular category, while lighter colors mean high negative deviation from the mean.</p>
        </div>
        <iframe scrolling="no" width="536px" height="1250px" src="/graph/heat"></iframe>
    </div>
    <div class="clear"></div>
</div>
<div class="footer">
Design by <a href="http://www.amberfeng.com"><NAME></a>, Graph API by <a href="http://vis.stanford.edu/protovis/">Protovis</a>, Data set by <a href="http://datascienc.es">CS194-16 Spring 2011, UC Berkeley</a>
</div>
</body>
</html>

{'fraction_non_alphanumeric': 0.18962887646161666, 'fraction_numerical': 0.023167986055632216, 'mean_word_length': 2.859304932735426, 'pattern_counts': {'":': 0, '<': 307, '<?xml version=': 0, '>': 309, 'https://': 0, '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': '3984573', 'n_tokens_mistral': 5029, 'n_tokens_neox': 4618, 'n_words': 1002}