Fork me on GitHub

Drew's World

Rants, News, Etc on my Life and Projects

A Go at Graphics

by Andrew De Ponte (@cyphactor)

Hi all. I recently tried my hand at a little graphic design work. A while back I came up with the domain name lusciousbits.com and bought it. I had a couple different ideas for that domain. However, I ran into a very difficult time coming up with the concept for a logo for the site. After a while of contemplating various concepts for logos and failing to come up with anything useful, I started asking people what they thought of when they heard the word luscious. It was astounding to me that the vast majority of people specifically said “You know the Hot Chick Mud Flaps on Trucks?” So, I finally decided that despite the fact that some may take it to be sexist I was going to use that and attempt a little graphics work. I did not intend it to be sexist so please don’t take it that way. The tag line was lovingly donated by another Software Engineer friend of mine (Patrick Murphy). Anyways, below is a wallpaper I created based on this concept for lusciousbits.com.

jQuery Comparative Histogram Plugin

by Andrew De Ponte (@cyphactor)

I recently wrote a jQuery Plugin that I am calling jquery_comphist. It is a jQuery Plugin that draws a Comparative Histogram of a provided population divided into two major groups with any number of shared sub-groups. One of the most common uses for such a feature is when you are trying to display demographics data on some population. Anyways, as usual the code is available at my GitHub page here and you can see a demo of it below.

 

With the jQuery Comparative Histogram (CompHist) Plugin you can easily represent populations and information about them. A prime usage exampe of this is demographics. All the styling is done via CSS. Hence the style is easily modified. It does the calculations for you and it allows for non listed group counts via a non_demo_count data option.

The above demo was produced by defining a few code snippets. The first snippet is a snippet of HTML that includes the jQuery Comparative Histogram javascript source file and CSS style sheet. Note: The jQuery Comparative Histogram javascript source file needs to come after the standard jQuery javascript source file. An example of this snippet is as follows:

<script type="text/javascript" src="../jquery.comphist.js"></script>
<link rel="stylesheet" type="text/css" href="../stylesheets/jquery.comphist.css">

Note: In the above snippet the href values are likely to be different in your case. The second code snippet is simply a single line of HTML where the div that is to be the Comparative Histogram. It is key that this div has an id that is easily referenced and a set height and width. An example of this snippet is as follows:

<div id="compplaceholder" style="width: 375px; height: 200px;"></div>

The third code snippet needed is the javascript that defines the data, creates the Comparative Histogram in the specified div, and handles the hover functionality. An example of this is seen below.

<script type="text/javascript">
$(function () {
  function showCompHistTooltip(x, y, contents) {
    console.log("called my shit");
    $('<div id="comphist1tooltip">' + contents + '</div>').css({
      position: 'absolute',
      display: 'none',
      top: y - 20,
      left: x - 30,
      border: '1px solid #fdd',
      padding: '2px',
      'background-color': '#fee',
      opacity: 1
    }).appendTo("body").fadeIn(200);
  }

  var comphist_data = {
    population_label: 'Active Fans This Week',
    group_1_label: 'Male', group_2_label: 'Female',
    subgroups: [
    { label: '13-17', group_1_count: 3, group_2_count: 16 },
    { label: '18-24', group_1_count: 7, group_2_count: 27 },
    { label: '25-34', group_1_count: 3, group_2_count: 29 },
    { label: '35-44', group_1_count: 2, group_2_count: 9 },
    { label: '45-54', group_1_count: 0, group_2_count: 4 },
    { label: '55+', group_1_count: 0, group_2_count: 0 }
    ],
    non_demo_count: 0
  };
  $("#compplaceholder").comphist({}, comphist_data);

  $("#compplaceholder").bind("barover", function (e, perc, pos) {
    $("#comphist1tooltip").remove();
    showCompHistTooltip(pos.left, pos.top, perc);
  });

  $("#compplaceholder").bind("barout", function (e, perc, pos) {
    $("#comphist1tooltip").remove();
  });
});
</script>

Hopefully, the demo and quick code example helps get you up and running quickly.

Flot Multi-series Bar Graph Support

by Andrew De Ponte (@cyphactor)

Hey boys and girls. I just got finished coding support for Multi-series bar graphs into Flot (a jQuery based JavaScript graphing library). Hence, I figured I would share not only the code but a little preview of it below. The code for it can be found at my GitHub account here. Please enjoy the little demo below.

 

Mouse hovers at (0, 0).

With the multi-series bar graph support, you can have Flot display the series side by side. This is useful when you are interested in visually comparing series and grouping segments you want to columns in series that you are specifically interested in comparing.

The above demo was produced by defining a few code snippets. The first snippet is a snippet of HTML that includes the customized Flot javascript source file. Note: The Flot javascript source file needs to come after the standard jQuery javascript source file. An example of this snippet is as follows:

<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>

Note: In the above snippet the href values are likely to be different in your case. The second code snippet is simply a single line of HTML that is the div that is to be the Multi-series Bar Graph. It is key that this div has an id that is easily referenced and a set height and width. An example of this snippet is as follows:

<div id="placeholder" style="width: 375px; height: 200px;"></div>

The third code snippet needed is the javascript that defines the data, creates the Multi-series Bar Graph in the specified div, and handles the hover functionality. An example of this is seen below.

<script id="source">
$(function () {
  var ms_data = [{"label":"FOO","data":[[0,80],[1,70],[2,100],[3,60],[4,102]]},
                 {"label":"BAR","data":[[0,10],[1,20],[2,30],[3,40],[4,80]]},
                 {"label":"CAR","data":[[0,5],[1,10],[2,15],[3,20],[4,25]]}]
  var ms_ticks = [[0,"1/28"],[1,"1/29"],[2,"1/30"],[3,"1/31"],[4,"1/32"]];

    function plotWithOptions() {
      $.plot($("#placeholder"), ms_data, {
        bars: { show: true, barWidth: 0.6, series_spread: true, align: "center" },
        xaxis: { ticks: ms_ticks, autoscaleMargin: .10 },
        grid: { hoverable: true, clickable: true }
      });
    }

    function showTooltip(x, y, contents) {
        $('').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").show();
    }

    plotWithOptions();

    $("#placeholder").bind("plothover", function (event, pos, item) {
      $("#x").text(pos.x.toFixed(2));
      $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.datapoint) {
                previousPoint = item.datapoint;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " Group id: " + Math.floor(x) + ", y = " + y + ", seriesIndex: " + item.seriesIndex);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked bar " + item.dataIndex + " in " + item.series.label + ".");
        }
    });
});
</script>

Hopefully, the demo and quick code example helps get you up and running.

Lazy Google App Engine Model Migrations

by Andrew De Ponte (@cyphactor)

I have been working on a side project for a bit now called We'reSICC (We are Sound Image Community & Collaboration). It planned to be an online service that is specifically designed to allow music artists and graphic artists to come together and collaborate to create music merchandise. The idea is that We'reSICC will provide a community and the necessary tools for Musicians and Graphic Artists to collaborate easily to produce merchandise and also provide the necessary tools for both Musicians and Graphic Artists to sell the products. The business model is simply that each party involved gets a chunk of the each sales profit. Anyways, thats enough lead in on that project you will find more about it later.

The reason I mentioned We'reSICC is because we recently started porting the Django code base over to Google App Engine. We soon found that it lacked support for the standard database migration support that is generally necessary when developing an application of this magnitude. Hence, after searching long and hard I came to the conclusion that I would have to throw together the basis for implementing Lazy Migrations for Google App Engine Models. Hence, I did and then handed a version with very basic functionality off to Patrick Murphy to flesh out further. Patrick Murphy is a software engineer friend of mine that is also working on We'reSICC. He has written a very nice blog post here that explains how these Lazy Google App Engine Model Migrations and provided all the code you need to get started with it. We like to give back to the community that has given so much to us, :-).

If you are interested in simply learning more about Patrick Murphy then by all means check out his blog here.

House Demo Day 2

by Andrew De Ponte (@cyphactor)

Well, as expected the demo was continued today as well and will probably be continued for a while after that. Aly and I decided to put together another quick little HD video so you could see the progress if you were interested. So, here you go.