Javascript Archives - Page 7 of 10 - {5} Setfive

Visualizing the Startup Institute Spring ’13 Class

Last week, we got our hands on the class list for the Spring ’13 Startup Institute class. I had some time to burn so I decided to throw together a visualization using the names and email addresses of the members of the class. You can check it out at http://symf.setfive.com/d3_startup_school/

How it works

Basically, the visualization represents every student with a 3×3 color grid by using various attributes of their names and email addresses. The various squares are calculated with the following formulas:

Top left: Calculated by taking the first letter of the first name (say C) and then converting it to a % for how far down the alphabet the letter is. So C would come out to 3 / 25 = 12% Then, this percentage value is applied to the “lightness” component of a HSL color tuple for “hsl(40,100%,92%)”
Top middle: Calculated by taking the length of the first name and then calculating a % for how long it is compared to the other names in the list. So basically, it finds the length of the longest name and then divides the current student’s name by that value for a %. The % is then used in the lightness component of “hsl(340,100%,73%)”
Top right: A color generated using the metaphone of the first name. The metaphone is generated, then split up into 3 pieces, and then the ASCII values of those 3 components are summed. Then, the 3 parts are mapped to HSL values depending on the % maximum they are for the entire sample size.
The second row is identical to the first except using the last name.
Bottom left: Calculated depending on the “track” that the user is in.
Bottom middle and right: These use the same metaphone algorithm except using the email address and email domain name respectively.

Technically, the squares are drawn using the d3 library and the page layout is done with Bootstrap.

Anyway, as always comments and feedback are welcome.

Javascript: Using Bootstrap tooltips with jQuery UI’s slider

By Ashish Datta | 7 Comments

Earlier today, I was adding a “slider” UI element to a project that was using Twitter Bootstrap as well as jQuery UI. Although they weren’t designed to work together, the two projects generally stay out of each other’s way since their CSS classes are namespaced pretty well.

Since jQuery UI was already loaded I naturally decided to just use the jQuery UI slider control to power the slider. One of the limitations with the jQuery UI slider is that it has no native way to show the current slider value over the slider handle, as a developer you have to display that number somewhere. Fortunately, the control has the event hooks neccesary to make this happen – specifically the slide event which is triggered everytime the slider is moved.

With Bootstrap also loaded, I decided to try and use the tooltip plugin to dynamically display the current value of the slider above the handle. Getting the initual tooltip setup was pretty straightforward. Check it out here.

But the issue is that even with the “slide” event, the Bootstrap tooltip plugin has no exposed method to force a reposition. The only way to get a tooltip to reposition itself is to hide it and then show it again. Obviously, that’s less than ideal since you get a noticible “jump” as the tooltip is hid and then shown again.

With this issue in mind, I decided to take a look at how the Tooltip plugin actually does the positioning. It turns out it’s really simple, the relevant code is on GitHub. Ok, so its easy to reposition them but how do you get the “right” tooltip div incase you have multiple sliders? Looking through the code, the Tooltip plugin actually uses the jQuery.data() function to store config options and additionally stores a reference to the correct div there. Getting a handle to the correct div is as easy as $(“#slider .ui-slider-handle:first”).data(“tooltip”).$tip

Looking at the actual plugin code, it’s simple enough to just copy that out and use it to reposition the tooltips. Check it out in action at http://jsfiddle.net/cqVPM/7/

Anyway, let me know if you run into any issues in the comments.

D3: Taking a dip

By Ashish Datta | 4 Comments

D3 is a “newish” visualization library that has been getting a lot of attention recently. The New York Times has been using it extensively to create visualizations, and in fact its creator is currently employed by the NYT. I’d been meaning to take D3 for a spin for a while but couldn’t find a dataset I wanted to play with until a few weeks ago.

At the end of November, the LA Times published a dataset titled Capital appreciation bonds which highlighted how various California school districts were funding various projects with extremely high interest rate bonds. The LA Times described the data as:

Hundreds of California school and community college districts have financed construction projects with capital appreciation bonds that push repayment far into the future and ultimately cost many times what the district borrowed. Government finance experts consider bonds imprudent if the total cost is more than four times the money borrowed or the maturity period is greater than 25 years.

Anyway, you can check out my attempt at a visualization here.

Custom Templates with jQuery File Upload

By Matt Daum | Leave a Comment

Recently I was working on a project which was using the jQuery File Upload Plugin to do multiple file uploads. I needed to show the progress of each upload (in this case just images). Looking through their documentation it shows how to a few ways to do custom templates. By default it uses the Javascript Templates Engine for all of its templating. I wanted to use just a div on the page for my template. Here’s how I ended up doing it.

First My basic markup for the html:

Basically my “#template” div was a hidden div on the page which I used as the photo being uploaded. Now for the javascript:

It ended up being pretty simple and self explanatory. The ‘progress’ function is called each time there is a progress update. You can do more advanced templates using their templating engine, however as I was adapting the code to an existing layout and was on a time constraint this was the route I took.

Hope this saves you sometime if you are looking to just quickly add a progress template for the uploaded images.

Recursive templates with UnderscoreJS

By Ashish Datta | 1 Comment

I was working on a BackboneJS project recently that was using UnderscoreJS for templating and started wondering if its possible to invoke UnderscoreJS recursively.

At face value, the _.template function simply takes a template string and converts it to a first class Javascript function so I figured it would be possible. Out of curiosity, I decided to take a look at how the _. function is actually implemented:

Not any real surprises there – it basically does a series of string replaces on the template you pass in to interpolate any variables you want outputted, converts blocks you want evaluated to regular Javascript, and then injects the object you passed in into the local scope.

Then, the “magic” happens at “var render = new Function(settings.variable || ‘obj’, ‘_’, source);” where a new function is created with a “print” function locally defined and your template converted to a Javascript function.

Here is the “source” string that is passed into “new Function”:

That is the dynamic function generated for the following template:

Since its looking for the “template” function in the global scope it looks like everything should work fine. To test it, I decide to take the Fibonacci sequence and generate boxes for each of the numbers in the sequence up to some N.

Theres a live demo running at http://twitlabs.net/us/ and a Gist of the code is replicated below:

Just for fun, you can also change how the boxes are arranged by toggling between “Stacked” and “Cascaded”.

Anyway, fair warning – I imagine there are some performance implications regarding doing this as well as computational limits. You could potentially cause a stack overflow by consuming your entire stack via the recursion.

As always, questions, comments, concerns welcome!