Posts Tagged ‘js’

Visualization: Geomap (Google)

Friday, June 19th, 2009

geomapgooglevisualization

[Editor's note: Google has made freely available the curious choropleth (colors by country) and graduated symbol (bubble) maps found in their Google Analytics tools as part of their charting - visualization kit. You set-up a HTML JavaScript object with the map parameters (country-value pairs or city-value pairs) and the colors and Google will make you an interactive Flash map (data brushing reveals country value on mouseOver) color coded via uninformative class breaks and terrible cartography linework (look at the US, Canada border) and a terrible world map projection (cylindrical with gross distortions in the higher latitudes). But it is free and fast and several regional base map are also available. There is certainly an oportunity for someone else to come up with a better API that uses the same function calls but draws better maps with meaningful data classes. Screenshot above is static, click on it to go to interactive version.]

Republished from Google Visualization.

Overview: A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.

We have two examples here: one that uses the regions display style, and another that uses the markers display style.

Regions Example

The regions style fills entire regions (typically countries) with colors corresponding to the values that you assign. Specify the regions style by assigning options['dataMode'] = ‘regions’ in your code.

Markers Example

The “markers” style displays a circle, sized and colored to indicate a value, over the regions that you specify. To use markers, you must include the following Google Maps API script with a key, unless you specify locations using latitude and longitude values.

Continue reading at Google . . .

jquery.timepickr.js (Haineault)

Wednesday, December 3rd, 2008

[Editor’s note: Graceful javascript GUI for setting time based on intuitive method. Thanks Peter!]

Republished from Haineault.com. Get the source code there.

Experimental code !

This is my humble attempt to enhance web time picking.

For the moment I’d call it a toy project, it might stay in experimental state evitam eternam.. I just wanted to see if I could create a better time picker.
I’ve seen lots of time pickers styles and approaches, but none seems to focus on user experience accross many platforms and beautiful degradation.

So I’ve determined a set of goals to achieve a better time picker.

Goals

  • Unobtrusive
  • Graceful degradation
  • Using maximum 2 clicks
  • Intuitive keyboard navigation
  • Be touch friendly (think iphone, tablet pc, etc..)

Demo

View video of GUI in action
(or click on image below, javascript embed don’t work in WordPress, sorry)

Basic usage

$(function(){
    $('#test-1').timepickr({handle: '#trigger-test'});
});

Options

Options Default Description
handle false handle is a dom element which will open the menu upon click
hours true display hours
minutes true display minutes
seconds false display seconds
range24 $.range(0, 24) available hours to pick in 24 format (0, 23)
range12 $.range(0, 12) available hours to pick in 12 format (1, 12)
rangeMin ['00', '15', '30', '45'] available minutes to pick
rangeSec ['00', '15', '30', '45'] available minutes to pick
apm ['am', 'pm'] AM/PM labels
convention 12 hour convention (12 or 24)
val false Initial value
dropslide object dropslide options

Tested browsers

  • Mozilla Firefox 2 (Windows)
  • Mozilla Firefox 3.0.3 (Linux)
  • Mozilla Firefox 3.0.3 (Windows)
  • Epiphany Web Browser 2.22.2 (Linux)
  • Safari 3.1.2 (Windows)
  • Microsoft Internet Explorer 6
  • Microsoft Internet Explorer 7

Todo

  • Internationalization (different time formats, ex 24h)
  • Custom positioning (left, center, right)
  • am/pm mouse follow should be optional
  • Fix remaining behavior bugs
  • Test browser compatibility
  • Make animation more smooth
  • Make all options work
  • Support for seconds
  • Allow custom handler (click clock icon = open picker)
  • keynav: esc = leave & reset
  • keynav: enter, space = commit
  • keynav: arrows = navigate
  • Labels for hour, min, sec
  • Allow custom positioning/orientation of am/pm picker
  • try to make a vertical version of it

Announcing Merge Text Extension for Adobe Illustrator (Ajar Productions)

Wednesday, November 26th, 2008

[Editor’s note: Dealing with broken text (common in PDF files) can be dastardly. There are a couple existing scripts out there, but few combine and preserve the font styling information at the same time. This new script does that with options. I’m curious how this new script from Ajar Productions installs into Illustrator using the Adobe Extension Manager, usually just for the old Macromedia products but not in all CS4 apps? The Flash version is also appealing.]

Republished from Ajar Productions. First seen at Mordy’s Real World Illustrator blog.

Following the release of [Ajar's] Combine Textfields extension for Flash, [they] put together a similar extension for Adobe Illustrator. This extension installs a script that will merge text (including text on a path) into one text object, while retaining the style attributes of the individual pieces, including character styles as well as paragraph styles (if the separator includes a return character).

Anyone who’s tried to edit text from a PDF opened in Illustrator knows how frustrating it can be to make simple text edits when the text is broken up. This extension reduces that headache.

Special thanks to David Van Brink for posting the Omino Dialog Maker. His time-saving code was used to produce the dialog box in this extension.

Download Options

Installation Instructions

JSX or JS file:

  1. Place the MergeText_AI.jsx (or MergeText_AI_CS.js) into the Scripts directory within your Illustrator application directory:

Windows > C:\Program Files\Adobe\Adobe Illustrator {version}\Presets\en_US\Scripts
Mac OS X > Applications/Adobe Illustrator {version}/Presets/Scripts

Note: In CS4, the directory path will include a region directory (e.g. Adobe Illustrator CS4/Presets/en_US/Scripts).

MXP file (CS4 only):

  1. Double-click on the mxp file to install using Adobe Extension Manager.

Usage

In Adobe Illustrator, select the text the you want to merge together and go to File > Scripts > MergeText_AI. If you’re using Illustrator CS3 or CS4, you will be prompted with a dialog box where you can choose your sorting orientation and a custom separator. If you’re using a version earlier than CS3, you will not be prompted with a dialog; the script will run using the default settings sorting topmost, then leftmost, with a separator of “[><]“. You can then run a Find and Replace and replace the separator with the characters of your choice.