George MacKerron: code blog » JavaScript

Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier

George — Wed, 22 Jun 2011 20:19:25 +0000

Ever noticed how, in Google Earth, marker pins that overlap each other spring apart gracefully when you click them, so you can pick the one you meant?

And ever noticed how, when using the Google Maps API, the exact same thing doesn’t happen?

This code makes Google Maps API version 3 map markers behave in that Google Earth way. Small numbers of markers (up to 8, configurable) spiderfy into a circle. Larger numbers fan out into a (more space-efficient) spiral.

Try it! (You can reload this page to re-randomise the marker positions).

The code is MIT licenced, has no dependencies, and is under 3K compiled (from CoffeeScript), minified and gzipped. I wrote it as part of the data download feature for Mappiness.

It’s on Github, where you can find out more, download or fork the code.

Cubic splines in JavaScript (via CoffeeScript)

George — Sat, 01 Jan 2011 19:36:07 +0000

For a recent study two colleagues needed to elicit a cumulative probability distribution function (CDF) from survey respondents.

We decided it would be nice to allow respondents to interact with this CDF after providing some key values, and implemented this in the web browser with (falling back on FlashCanvas for IE).

In the process, we implemented three kinds of cubic spline calculation in the ever-wonderful CoffeeScript: natural, clamped and (what we actually needed) monotonic cubic splines.

You can play with some examples below: click-and-drag the round handles, or double-click to enter values directly. Feel free to borrow the code (ideally with attribution) if it’s of use to you.

Monotonic

Natural

Clamped (to a slope of 1 at both ends)

The spline code

class MonotonicCubicSpline
 
# by George MacKerron, mackerron.com
 
# adapted from: 
# http://sourceforge.net/mailarchive/forum.php?thread_name=
# EC90C5C6-C982-4F49-8D46-A64F270C5247%40gmail.com&forum_name=matplotlib-users
# (easier to read at http://old.nabble.com/%22Piecewise-Cubic-Hermite-Interpolating-
# Polynomial%22-in-python-td25204843.html)
 
# with help from:
# F N Fritsch & R E Carlson (1980) 'Monotone Piecewise Cubic Interpolation', 
#   SIAM Journal of Numerical Analysis 17(2), 238 - 246.
# http://en.wikipedia.org/wiki/Monotone_cubic_interpolation
# http://en.wikipedia.org/wiki/Cubic_Hermite_spline
 
  constructor: (x, y) ->
    n = x.length
    delta = []; m = []; alpha = []; beta = []; dist = []; tau = []
    for i in [0...(n - 1)]
      delta[i] = (y[i + 1] - y[i]) / (x[i + 1] - x[i])
      m[i] = (delta[i - 1] + delta[i]) / 2 if i > 0
    m[0] = delta[0]
    m[n - 1] = delta[n - 2]
    to_fix = []
    for i in [0...(n - 1)]
      to_fix.push(i) if delta[i] == 0
    for i in to_fix
      m[i] = m[i + 1] = 0
    for i in [0...(n - 1)]
      alpha[i] = m[i] / delta[i]
      beta[i]  = m[i + 1] / delta[i] 
      dist[i]  = Math.pow(alpha[i], 2) + Math.pow(beta[i], 2)
      tau[i]   = 3 / Math.sqrt(dist[i])
    to_fix = []
    for i in [0...(n - 1)]
      to_fix.push(i) if dist[i] > 9
    for i in to_fix
      m[i]     = tau[i] * alpha[i] * delta[i]
      m[i + 1] = tau[i] * beta[i]  * delta[i]
    @x = x[0...n]  # copy
    @y = y[0...n]  # copy
    @m = m
 
  interpolate: (x) ->
    for i in [(@x.length - 2)..0]
      break if @x[i] <= x
    h = @x[i + 1] - @x[i]
    t = (x - @x[i]) / h
    t2 = Math.pow(t, 2)
    t3 = Math.pow(t, 3)
    h00 =  2 * t3 - 3 * t2 + 1
    h10 =      t3 - 2 * t2 + t
    h01 = -2 * t3 + 3 * t2
    h11 =      t3  -    t2
    y = h00 * @y[i] + 
        h10 * h * @m[i] + 
        h01 * @y[i + 1] + 
        h11 * h * @m[i + 1]
    y
 
 
class CubicSpline  # natural or clamped
 
# by George MacKerron, mackerron.com
 
# adapted from:
# http://www.michonline.com/ryan/csc/m510/splinepresent.html
 
  constructor: (x, a, d0, dn) ->
    return unless x? and a?
    clamped = d0? and dn?
    n = x.length - 1
    h = []; y = []; l = []; u = []; z = []; c = []; b = []; d = []; k = []; s = []
    for i in [0...n]
      h[i] = x[i + 1] - x[i]
      k[i] = a[i + 1] - a[i]
      s[i] = k[i] / h[i]
    if clamped
      y[0] = 3 * (a[1] - a[0]) / h[0] - 3 * d0
      y[n] = 3 * dn - 3 * (a[n] - a[n - 1]) / h[n - 1]
    for i in [1...n]
      y[i] = 3 / h[i] * (a[i + 1] - a[i]) - 3 / h[i - 1] * (a[i] - a[i - 1])
    if clamped
      l[0] = 2 * h[0]
      u[0] = 0.5
      z[0] = y[0] / l[0]
    else
      l[0] = 1
      u[0] = 0
      z[0] = 0
    for i in [1...n]
      l[i] = 2 * (x[i + 1] - x[i - 1]) - h[i - 1] * u[i - 1]
      u[i] = h[i] / l[i]
      z[i] = (y[i] - h[i - 1] * z[i - 1]) / l[i]
    if clamped
      l[n] = h[n - 1] * (2 - u[n - 1])
      z[n] = (y[n] - h[n - 1] * z[n - 1]) / l[n]
      c[n] = z[n]
    else
      l[n] = 1
      z[n] = 0
      c[n] = 0
    for i in [(n - 1)..0]
      c[i] = z[i] - u[i] * c[i + 1]
      b[i] = (a[i + 1] - a[i]) / h[i] - h[i] * (c[i + 1] + 2 * c[i]) / 3
      d[i] = (c[i + 1] - c[i]) / (3 * h[i])
    @x = x[0..n]  # copy
    @a = a[0...n]
    @b = b
    @c = c[0...n]
    @d = d
 
  derivative: ->
    s = new this.constructor()
    s.x = @x[0...@x.length]  # copy
    s.a = @b[0...@b.length]  # copy
    s.b = 2 * c for c in @c
    s.c = 3 * d for d in @d
    s.d = 0 for x in [0...@d.length]
    s
 
  interpolate: (x) ->
    for i in [(@x.length - 1)..0]
      break if @x[i] <= x
    deltaX = x - @x[i]
    y = @a[i] + 
        @b[i] * deltaX + 
        @c[i] * Math.pow(deltaX, 2) + 
        @d[i] * Math.pow(deltaX, 3)
    y

Download:

Extended and properly-multi-line Regular Expressions for JavaScript

George — Sun, 08 Aug 2010 18:44:46 +0000

Perl, Ruby, and some other languages support a readable ‘extended’ regular expression syntax, in which literal whitespace is ignored and comments (starting with #) are available. They also support a multi-line mode where the . character matches anything, including a newline.

JavaScript does neither of these: it doesn’t recognise the extended syntax, and its version of multi-line only allows the ^ and $ characters to match the beginnings and ends of lines within a string (it will never allow the . to match a newline).

So I wrote the following function to convert extended and fully-multi-line RegExp source strings to the basic syntax that JavaScript understands.

function convertRegExpSource(source, ext, multi) {  // string, boolean, boolean
  if (! ext && ! multi) return source;
  var convertedSource = '', len = source.length;
  var inCharClass = false, inComment = false, justBackslashed = false;
  for (var i = 0; i < len; i ++) {
    var c = source.charAt(i);
    if (justBackslashed) {
      if (! inComment) convertedSource += c;
      justBackslashed = false;
      continue;
    }
    if (c == '\\') {
      if (! inComment) convertedSource += c;
      justBackslashed = true;
      continue;
    }
    if (inCharClass) {
      convertedSource += c;
      if (c == ']') inCharClass = false;
      continue;
    }
    if (inComment) {
      if (c == "\n" || c == "\r") inComment = false;
      continue;
    }
    if (c == '[') {
      convertedSource += c;
      inCharClass = true;
      continue;
    }
    if (ext && c == '#') {
      inComment = true;
      continue;
    }
    if (multi && c == '.') {
      convertedSource += '[\\s\\S]';
      continue;
    }
    if (! ext || ! c.match(/\s/)) convertedSource += c;
  }
  return convertedSource;
}

Use it

The starting example below is the Daring Fireball monster URL regex.

Extended RegExp source (editable)

\b ( # Capture 1: entire matched URL (?: [a-z][\w-]+: # URL protocol and colon (?: /{1,3} # 1-3 slashes | # or [a-z0-9%] # Single letter or digit or '%' # (Trying not to match e.g. "URI::Escape") ) | # or www\d{0,3}[.] # "www.", "www1.", "www2." … "www999." | # or [a-z0-9.\-]+[.][a-z]{2,4}/ # looks like domain name followed by a slash ) (?: # One or more: [^\s()<>]+ # Run of non-space, non-()<> | # or $([^\s()<>]+|(\([^\s()<>]+$))*\) # balanced parens, up to 2 levels )+ (?: # End with: $([^\s()<>]+|(\([^\s()<>]+$))*\) # balanced parens, up to 2 levels | # or [^\s`!()\[\]{};:'".,<>?«»“”‘’] # not a space or one of these punct chars ) )

Basic RegExp source output

Let me know if you find any bugs, or if you know a nicer way to do this (I know nothing about parsing, so there surely is one).

I think I may suggest extended RegExp support as a possible CoffeeScript enhancement.

Signing Amazon Product Advertising API calls in Ruby

George — Sat, 22 Aug 2009 11:04:23 +0000

I have a simple site that generates covers for CDs I burn from iTunes purchases and so on (it pre-dates widespread use of JS libraries, and is in much need of prettifying). The site uses Amazon Product Advertising API calls to search and retrieve album cover art and track listings. Since earlier this month, such API calls have to be cryptographically signed.

This is somewhat annoying — the site’s original design has it communicating independently with Amazon (using Amazon’s XSLT API feature to transform their XML data into JSON), and that’s no longer possible with the use of a private key. But it’s not unfixable. The site now sends its API call first to my server, which returns a signed version, and then forwards the signed call on to Amazon.

I found most of what I needed for this on Chris Roos’ blog, but his version still wasn’t quite working for me (the two problems I recall are that Ruby’s CGI.escape doesn’t quite follow Amazon’s requirements, and that times need converting to GMT).

Anyway, in case you’re looking to do the same, here’s what I ended up with:

#!/usr/bin/env ruby
 
# Note: You need hmac.rb and hmac-sha2.rb from http://deisui.org/~ueno/ruby/hmac.html 
# somewhere in your require paths. ruby-hmac is currently broken under Ruby 1.9.
 
%w(rubygems cgi time hmac-sha2 base64).each { |lib| require lib }
 
ACCESS_IDENTIFIER = 'YOUR_PUBLIC_ID'
SECRET_IDENTIFIER = 'YOUR_PRIVATE_ID'
 
def aws_escape(s)
  s.gsub(/[^A-Za-z0-9_.~-]/) { |c| '%' + c[0].to_s(16).upcase }  
  # for 1.9, you'd replace [0] with .ord -- but ruby-hmac seems broken under 1.9
end
 
cgi = CGI.new
params = cgi.params.dup
 
amazon_endpoint = params.delete('amazon_endpoint')
amazon_path = params.delete('amazon_path')
js_callback = params.delete('js_callback')
 
signing_params = {
  'AWSAccessKeyId' => ACCESS_IDENTIFIER,
  'Timestamp' => Time.now.gmtime.iso8601
}
 
params.merge!(signing_params)
 
canonical_querystring = params.sort.collect do |key, value| 
  [aws_escape(key.to_s), aws_escape(value.to_s)].join('=') 
end.join('&')
 
string_to_sign = "GET\n#{amazon_endpoint}\n#{amazon_path}\n#{canonical_querystring}"
 
hmac = HMAC::SHA256.new(SECRET_IDENTIFIER)
hmac.update(string_to_sign)
signature = Base64.encode64(hmac.digest).chomp
 
params['Signature'] = signature
querystring = params.sort.collect do |key, value| 
  [aws_escape(key.to_s), aws_escape(value.to_s)].join('=') 
end.join('&')
 
signed_url = "http://#{amazon_endpoint}#{amazon_path}?#{querystring}"
 
cgi.out('type' => 'text/javascript') { "#{js_callback}('#{signed_url}');" }

You can test this locally by feeding key/value parameters to CGI, followed by Ctrl-D. These, for example:

amazon_endpoint=ecs.amazonaws.com
amazon_path=/onca/xml
js_callback=do_stuff
Service=AWSECommerceService
Version=2009-03-31
Operation=ItemSearch
SearchIndex=Books
Keywords=george+monbiot

Getting a Firefox extension’s directory from within the extension

George — Thu, 07 May 2009 12:23:07 +0000

When creating a Firefox extension recently, I was surprised how much pain is involved simply in finding out, from within an extension, where that extension’s files are installed.

You have to create a ‘component’, which entails a fair chunk of unintelligible boilerplate code (well, unintelligible unless you’re much better acquainted with Firefox’s innards than developing a basic extension generally requires you to be).

Plenty of places will tell you roughly how to do it. But, after some experimentation, let me show you exactly how.

Copy this JavaScript file into your extension’s /components directory (if that directory doesn’t exist yet, create it).
Add these lines to your chrome.manifest:

component {723079F5-F880-40BB-8283-8266DEA93960} components/getExtDir.js
contract @mackerron.com/getExtDir;1 {723079F5-F880-40BB-8283-8266DEA93960}

Use it from elsewhere in your extension like so:

var own_path = Components.classes["@mackerron.com/getExtDir;1"]
  .createInstance().wrappedJSObject.getExtDir();

Update, August 2011 — Firefox 3 made this a bit less hairy, and Firefox 4 introduced a small but incompatible change. The updated code above works in Firefox 3 – 6, and most likely beyond. However, to make knowing your own directory useful (e.g. in order to locate and run an AppleScript there) you may have also to set true in install.rdf. This activates the old extension unpacking behaviour, which is deprecated because it increases load time.