simple underscore.js projects, walk through, & tutorial


Lottery DataBase Analysis - 12 (flot graphs)

Like underscore.js, flot.js is a free library for Javascript.

The following code transforms the existing data into the format that flot.js requires.
And then, the code for the flot, follows that.
Graph is down at bottom of page.

        // clears existing text
        document.getElementById('prizeAvailableGraph').innerHTML = "";

        // formats data to meet flots needs   
        data = _.map(percentData, function(a){
            var temp = [];
            temp[0] = "$" + a.prizeThis;
            temp[1] = a.pAvailable;
            return temp;           
        });
        data[data.length - 1][0] = "ticket";
        data.unshift(["%Max", percentTicketsAvailableMax]);// unshift adds a value to the beginning of an array
        data.unshift(["%Ave", percentTicketsAvailableAve]); // these three values are for reference
        data.unshift(["%Min", percentTicketsAvailableMin]); // and represent the degree of error in the other graphs
       
        document.getElementById('outputOne').innerHTML = JSON.stringify(data); // output follows
           
        $.plot("#prizeAvailableGraph", [ data ], {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.75,
                    align: "center"
                }
            },
            xaxis: {
                mode: "categories",
                tickLength: 0
            }
        });  //end flot output, graph 1 // and this is the first graph at the bottom of the page


document.getElementById('outputOne').innerHTML = JSON.stringify(data); // yields the following
[["%Min",34.1],["%Ave",35.5],["%Max",38.33],["$3250000",35.29],["$5000",35.29],["$1000",36.27],["$500",34.14],["$100",34.18],["$40",34.13],["$20",34.88],["$15",34.46],["$10",35.02],["$5",35.93],["ticket",38.12]]


Once again, the first part formats the data, then the flot code follows, with the graph at the bottom of the page.

    //prizeDistrubtionGraph -- Pie Chart Output
    data = _.map(lotteryData, function(a){
        var temp = [];
        temp[0] = "$" + a.prizeThis;
        temp[1] = a.numWinners;       
        return temp;
    });// end data update
    data[data.length - 1][0] = "ticket";

    data.unshift(["losers", numLosingTickets]);
    document.getElementById('outputTwo').innerHTML = JSON.stringify(data); // outputed below
   

    $.plot('#ticketDistributionGraph', data, {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2/3,
                    //formatter: labelFormatter,
                    threshold: 0.1
                }
            }
        },
        legend: {
            show: true
        }
    });

document.getElementById('outputTwo').innerHTML = JSON.stringify(data); // yields
[["losers",29141587],["$3250000",17],["$5000",34],["$1000",102],["$500",3400],["$100",63240],["$40",116620],["$20",765000],["$15",1020000],["$10",2040000],["$5",3570000],["ticket",4080000]]

Permanent Display Stat area (summary of all meaningful stats, to date for this project):

var derivedLotteryStats = {
"ticketPrice": 5, // in Dollars
"returnPerTicket": 3.85, // aka the action
"returnPerTicketDollar": 0.77,
bigPrizeReturn": 0.27, // return per Dollar on Big Prize
"chanceBigPrize": 2400000, // on 1 ticket
"bigPrizeChanceOn100":63157, // all low prizes reinvested

"bigPrizeAmount": 3250000, // in Dollars
"bigPrizePerDollar": 650000, // bigPrizeAmount/ticketPrice

"numTickets": 40800000, // # Top Prizes * odds Of
"numLosingTickets": 29141587, //no prize tickets
"numTicketsBoughtMax": 26884200, // a derived value, it's a guess
"numTicketsBoughtMin": 25158441, // a derived value, it's a guess
" numTicketsBoughtAverage": 26314165, // a derived value, it's a guess

"percentTicketsAvailableMax":38.33,
"percentTicketsAvailableMin":34.1
"percentTicketsAvailableAve": 35.5
};

var percentData =
[{"prizeThis":3250000,"pAvailable":35.29},{"prizeThis":5000,"pAvailable":35.29},{"prizeThis":1000,"pAvailable":36.27},{"prizeThis":500,"pAvailable":34.14},{"prizeThis":100,"pAvailable":34.18},{"prizeThis":40,"pAvailable":34.13},{"prizeThis":20,"pAvailable":34.88},{"prizeThis":15,"pAvailable":34.46},{"prizeThis":10,"pAvailable":35.02},{"prizeThis":5,"pAvailable":35.93},{"prizeThis":5,"pAvailable":38.12}];


var lotterytData =
[{"prizeThis":3250000,"oddsThis":2400000,"numWinners":17,"numClaimed":11,"numAvailable":6,"returnPerThis":1.3541666666666667,"returnPerDollar":0.27083333333333337,"pAvailable":35.29},{"prizeThis":5000,"oddsThis":1200000,"numWinners":34,"numClaimed":22,"numAvailable":12,"returnPerThis":0.004166666666666667,"returnPerDollar":0.0008333333333333333,"pAvailable":35.29},{"prizeThis":1000,"oddsThis":400000,"numWinners":102,"numClaimed":65,"numAvailable":37,"returnPerThis":0.0025,"returnPerDollar":0.0005,"pAvailable":36.27},{"prizeThis":500,"oddsThis":12000,"numWinners":3400,"numClaimed":2239,"numAvailable":1161,"returnPerThis":0.041666666666666664,"returnPerDollar":0.008333333333333333,"pAvailable":34.14},{"prizeThis":100,"oddsThis":645,"numWinners":63240,"numClaimed":41624,"numAvailable":21616,"returnPerThis":0.155,"returnPerDollar":0.031,"pAvailable":34.18},{"prizeThis":40,"oddsThis":350,"numWinners":116620,"numClaimed":76812,"numAvailable":39808,"returnPerThis":0.11433333333333333,"returnPerDollar":0.022866666666666667,"pAvailable":34.13},{"prizeThis":20,"oddsThis":53,"numWinners":765000,"numClaimed":498167,"numAvailable":266833,"returnPerThis":0.375,"returnPerDollar":0.075,"pAvailable":34.88},{"prizeThis":15,"oddsThis":40,"numWinners":1020000,"numClaimed":668467,"numAvailable":351533,"returnPerThis":0.375,"returnPerDollar":0.075,"pAvailable":34.46},{"prizeThis":10,"oddsThis":20,"numWinners":2040000,"numClaimed":1325571,"numAvailable":714429,"returnPerThis":0.5,"returnPerDollar":0.1,"pAvailable":35.02},{"prizeThis":5,"oddsThis":11,"numWinners":3570000,"numClaimed":2287131,"numAvailable":1282869,"returnPerThis":0.4375,"returnPerDollar":0.0875,"pAvailable":35.93},{"prizeThis":5,"oddsThis":10,"numWinners":4080000,"numClaimed":2524475,"numAvailable":1555525,"returnPerThis":0.5,"returnPerDollar":0.1,"pAvailable":38.12}];


As follows is the first flot graph.
The first three bars show the expected sales by chance.
The remaining show outstanding prizes (as a percentage of total starting prizes) still available for each prize category.

%Min
%Ave
%Max
$3250000
$5000
$1000
$500
$100
$40
$20
$15
$10
$5
ticket
0
10
20
30
40

This is the second flot graph.
It shows the total number of tickets as divided by each prize level.  (So, biggest area represents the non-winning tickets and the smallest represents the big prize.)  
Note: as a gambling analysis tool, this graph is pretty meaningless.

Ticket Distribution Graph
undefined
71%
undefined
10%

Also, between starting this page (and starting my review of the underscore library) and now, I've decided to look into the YUI library... if for no other reason, because it already has the underscrore, flot, and a whole bunch of other libraries wrapped up into one easy to use container.

So, after a few more pages (I want to wrap up this lottery project first), I may never come back to underscore.  Still, the exercise was helpful to me.  And I would recommend the exercise to others a relatively easy way to get a foothold on the mechanics of passing functions to functions.


_.moreUnderscoreProjects

© Copyright 2013 Brett Paufler


Please Note: I am an idiot.  No seriously.  The odds of my gambling odds calculations being correct are likely on par with my odds of ever winning.  You have been warned.