Posts Tagged ‘Flash’

Interview with MarineMAP Mashup Developers (Kelso)

Tuesday, April 21st, 2009

marinemapsupporttool

[Editor's note: MarineMAP is a cutting edge mashup built using PostGIS, GeoDjango, Ajax, Flash, OpenLayers, GeoServer and MapServer with Google base map tiles. It assists stakeholders in the design of MPAs (Marine Protected Areas) in mapping oceanographic, biological geological, chemical and human dimensions of the ocean and coastal areas. I talk with Will McClintock and Chad Burt of the Marine Science Institute at University of California at Santa Barbara about the technical underpinnings and development philosophy behind the project. One key to the project's success (rolled out Dec. 2008) has been the hiring of dedicated programmers to implement design ideas and new technology to extend an earlier version's usability and reach. Thanks Melissa and Sebastian!]

Interact with the MarineMAP at marinemap.org/marinemap.

Interactive Map Tool Objective: MarineMap is an internet-based decision support tool that provides the capacity for the SCRSG (South Coast Regional Stakeholder Group) to view data layers, create individual MPA concepts, assemble collections of individual MPA concepts into MPA arrays, receive basic feedback on how well MPA concepts and arrays meet guidelines for MPA design, and submit MPA arrays to staff as MPA proposals. This tool will be the primary way in which MLPA Initiative staff and SCRSG members capture and store information regarding MPA proposals.

marinemapsupporttool2

(Above) Screenshot above showing Marine mammal and Nearshore habitat layers on base map with area Measurement Tool enabled.

(Question) Kelso’s Corner: What technologies are leveraged in MarineMAP?

(Anwer) MarineMAP: We’re not using ArcGIS at all, save for cutting map tiles (using ArcGIS Desktop and Arc2Earth) and, as a non-critical component of the system, ArcSDE / SQL Server. We’re mainly using PostGIS, GeoDjango, Ajax, Flash, OpenLayers, GeoServer and MapServer and will soon switch to the Google Earth API.

We are using OpenLayers, rather than the Google Maps API for our “slippy map”. OpenLayers is pure javascript, as is most of the client application. We are using Flex, but only for the charting component. [Editor's note: OpenLayers is using the Google Maps tiles.]

(Q) Kelso’s Corner: How many programmers do you have on staff to deal with all the software components?

(A) MarineMAP: Currently, two of our developers work full-time on MarineMap, while our other two developers work half time. We also have several GIS analysts and a cartographer to deal with the data end of things. We are now looking for a full-time, in-house Assistant Web Developer to continue working on MarineMap. As we extend MarineMap to different geographies and planning processes, we anticipate that we’ll be looking for one or two more programmers as well.

(Q) Kelso’s Corner: What was the rational for doing this substantial map development in house? Did you evalutate other routes, consultants, off the shelf software before going this route, why was this option preferable? Did you have a good cheat sheet for how to develop / implement this technology? Did you have to hire new staff to do the programming or did you have existing expertise to draw on?

(Anwer) MarineMAP: We did not have a cheat sheet for how to develop / implement this technology. This was a brand new application using some new technologies, and some that we were familiar with. Of course, we had experience developing other applications and some of these technologies overlapped. But, there was a significant amount of learning happening for all of our developers.

The MLPAI is an on-going process that will terminate sometime around 2011. Until then, we need to have a highly functional and stable application that can be adapted to the changing needs of the process. It turned out to be much more cost-effective and time efficient to hire in-house developers to work on the application year-round. Before we built our team, we spent a significant amount of time considering a host of alternatives, including trying to maintain and tweak Doris, contracting out all of the work, etc.  Initially, we felt we did not have enough in-house expertise. Although we already had Chad Burt (UCSB), Jared Kibele (UCSB), Tim Welch (Ecotrust) and, now, Ken Vollmer (Ecotrust) as our in-house crew, we eventually contracted two developers from Farallon Geographics (Dennis Wuthrich and Alexei Peters) for a limited period to  help with developing the database schema. This was particularly nice given that we had only 6 months to get the first version of MarineMap out the door. Dennis and Alexei are no longer working on the project but I am very grateful that we had access to their time and expertise during the initial phases.

(Q) Kelso’s Corner: What was Doris?

(Anwer) MarineMAP: At the beginning of the Marine Life Protection Act Initiative (MLPAI), staff chose to hire consultants to build an application (eventually called “Doris”) that was built on ArcGIS Server 9.1 technologies. It shared some of the features of MarineMap, including drawing MPAs and arrays, and generating reports on what was being captured inside those MPAs. Doris had a poorly designed interface and, perhaps more significantly, it was dreadfully slow. Consequently, few stakeholders used it. Furthermore, because the application was built using technologies with which we had no particular in-house expertise, and because these technologies were proprietary, we had a difficulty updating the application or tweaking it on the fly. (I had been running ArcSDE / ArcIMS and ArcGIS Server applications for a couple years but had no real development expertise in, say, ArcObjects, or VB .Net.)

(Q) Kelso’s Corner: It seems there are many more RubyOnRails developers than Django. Have you found this a hindrance for hiring staff or when looking for trouble shooting advice?

(Anwer) MarineMAP: It does seem to be a bit of a challenge finding Django developers, particularly those that can / will work locally. I have not tried to hire a RubyOnRails expert so I have no direct means comparison.

(Q) Kelso’s Corner: Why will you be switching to the Google Earth API? Is this only for the front end? Have you been happy with GeoDjango?

(Anwer) MarineMAP: GeoDjango has been fantastic. Using the Google Earth API does not mean ditching GeoDjango. Rather, using the Google Earth API represents a shift away from the OpenLayers API. We’ll still be using GeoDjango extensively.

[Our lead developer] was a big proponent of RubyOnRails for quite some time, but Django has taken many of its best ideas to Python. While Ruby is aesthetically a beautiful language, Python is usually much faster and has a more mature set of modules to build on. The only thing I miss after switching over to Django is the database migrations Rails offers. Most open source GIS packages also have bindings for Python, where as there a few similar tools for Ruby.

Switching to the Google Earth API will just mean replacing OpenLayers. OpenLayers is a very good library, but the Earth API is much faster due to the fact that it is a compiled plugin rather than being written in javascript. This allows it to display thousands of placemarks on screen at once, which is one of the primary reasons for switching. Google Earth can also display temporal and 3d data.

(Q) Kelso’s Corner: Besides the change to Google Earth API, what other changes, updates do you plan for this online map?

(Anwer) MarineMAP: Besides switching to the Google Earth API, there is one major upcoming update to MarineMap. Specifically, we will be implementing a map-based (i.e., location based) discussion forum. Users will be able to zoom into a location on a map and tag objects (MPAs, data, places) with a comment. Other users will see these comments (if they have comments “turned on”) as they zoom in to a location or if they load an MPA. Users can then participate in a dialog via a traditional discussion forum that is linked to the map. Furthermore, users will be able to define a geographic region and subscribe to RSS feeds (using GeoRSS) for any activity within that region. One might choose to do this, for example, if they want to be notified by email any time somebody draws a new MPA in, or makes a comment about a data layer in a specific region that he / she cares most about. I believe the map-based discussion forum will go a long way in facilitating discussion about MPAs, particularly outside the in-person monthly stakeholder meetings.

Conclusion: Thanks so much for the informative Q&A session. Please check out the MarineMap project at MarineMap.org/marinemap.

Interactive: Obama’s Appointments (Kelso via Wash Post)

Wednesday, March 18th, 2009

[Editor's note: I did the Flash ActionScript 3 programming behind Head Count: Tracking Obama's Appointments. This ambitious, collaborative database-driven project tracks the Obama administration’s senior political appointments and will be kept up-to-date with the latest happenings. A look at some of the interactive features you can find at washingtonpost.com/headcount.]

Interactive graphic and database by Sarah Cohen, Karen Yourish, Nathaniel Vaughn Kelso, Ryan O’Neil, Paul Volpe, Sarah Sampsel and Laura Stanton.

This project draws on concepts from these two blog posts in particular: It Ain’t Easy To Get A Newspaper To Provide Useful Data (TechDirt) and The New Journalism: Goosing the Gray Lady (NY Times).

Republished from The Washington Post

Heads Pop Up and Heads Roll: Let’s Keep Track.
By Al Kamen; Wednesday, March 18, 2009; Page A11

Today we launch Head Count, The Washington Post’s interactive database to help you keep a sharp eye on the people President Obama is appointing to the nearly 500 top positions in the federal government that require Senate confirmation. The new feature will not only tell you who they are but also help you count all the demographic beans — age, sex, ethnicity, education (elite schools or not), home states and so on.

At http://www.washingtonpost.com/headcount, you can search agency by agency to determine which jobs are still open, should your private-sector job be looking a little shaky these days. You can also search by individual to determine how many officials in this “change” administration are merely retreads from the Clinton days.

And Head Count will give some clues to help answer everyone’s perennial question: How did that fool get that great job? It will also tell you who paid good, hard money or bundled huge sums for Obama/Biden, who worked on the campaign, who had the coveted Harvard Law connection, hailed from Chicago or was a pal of Michelle Obama, Tom Daschle or Ted Kennedy.

The appointments that are tracked by Head Count do not include judges, ambassadors, U.S. attorneys or U.S. marshals. We’ll monitor those separately. Nor does the database include the many important officials who are not confirmed by the Senate. We’ll be tweaking the database as we go, adding new categories, such as veterans, and making other additions.

Loop Fans can help! If you’ve got information we could use or suggestions about how to improve the site, please submit comments and updates at the link provided on the Head Count Web site.

NOMINATING PARTY

The White House personnel logjam — also known as the Great Daschle Debacle — appears to have been broken. Team Obama’s nominations operation began at a record pace. But IRS problems sparked Health and Human Services nominee Tom Daschle‘s withdrawal on Feb. 3, leading to a general revetting of nominees that stalled everything.

The numbers are startling. Obama, by the end of his first week in office, had announced 47 nominees for senior-most jobs. He’d officially nominated 37 of them, according to data compiled by New York University’s Wagner School of Public Service Presidential Transition Project. (That number includes some holdovers.)

But in the month after Daschle’s withdrawal, the White House announced only 10 candidates for Senate-confirmed positions and formally nominated only six people.

In the next three weeks, however, the pace ramped up sharply, with 42 nominees named. Official nominations have been slower — only 27 during that time. But there were 15 last week, and we’re told there are plenty in the pipeline. As of yesterday, there were 39 Senate-confirmed individuals on the job. (That includes seven holdovers.)

The push now is to get as many nominees up to the Senate — and get confirmation for the three dozen or so already up there — before the Senate slithers out of town on April 3.

View the interactive at The Washington Post . . .

A Magic Wand for Selecting Text in Adobe Illustrator (KELSO)

Friday, March 6th, 2009

[Editor's note: This is largely a republish of my post here last September and before but with the added benefit of now being a public alpha (download version 11d) of the script that is good thru summer 2009. Why am I expanding testing? I'd like more feedback as I haven't heard of any major problems with the script. And I need a little motivation to finish programming ;) ]

I have been developing a plugin / script for Adobe Illustrator to make it easier to select type in Illustrator by  attributes like font family, style, size, and fill color. I hope to release this as a commercial plugin for designers and cartographers first quarter 2009? If you would like to beta test this plugin for me, please send me an email at nathaniel@kelsocartography.com or…

Download version 11d of Find and Replace Fonts Script (1.6m). Good thru summer 2009.

¡¡Warning!! This is not final release-quality product!!! Please save your work before running the script. I have never had it crash my machine but don’t take chances!!! Use at your own risk!!!

To install new scripts you need to:

  • Download the ZIP file using “Save as”.
  • Quit Illustrator
  • Copy the script files into the Illustrator application folder’s “Presets” » “Scripts” subfolder
  • After restarting Illustrator, you can find the scripts in the menu “File” » “Scripts”;
  • TIP: You can create subfolders in the scripts folder to organize your scripts

NOTE: You will need version CS3 or CS4 of Illustrator. If you have CS or CS2, get a trial version of CS4 from Adobe.

Insure you get further updates to the Script by joining this email list:
Name:
E-mail:

What is this tool and why would you use it?

  1. A magic wand for clicking on text and selecting like-styled text
  2. A non-modal eye dropper tool for copying font attributes and pasting them onto other text objects without directly eye dropping (like Freehand’s copy and past attributes).
  3. Menu items for Select > Type > Same font, same style, same size, same font color, overprinting, etc
  4. A pro version of the Find Fonts dialog already in Illustrator that does find / replacing in locked and hidden layers, or only in the active layer, sublayer, or window view.

Usage Tips

The resulting non-contiguous text can only be affected (eg: by the Character panel) by:

  1. Hitting escape on the keyboard and then making changes
    • but the original instance will not be changed
    • all others will be, though
  2. The entire text object was selected
  3. Initiating the “similar text (described in 2nd New features below) in text object mode, NOT text range or text insertion point mode.
  4. Using the Full Dialog mode’s replace functions
Looking Forward

Developing the plugin has taken a lot longer than I expected to implement all the basic and advanced features but I am now 90% complete with the script version, which is over 8,000 lines of code or a 300 page book! I need to start working on the plugin version which will entail completely translating the script from JavaScript into C in XCode on the Mac and Visual Studio on the PC.

  • Port to XCode and start testing as Illustrator Plugin, first for Mac, second for Windows

  • Settle on price and start selling. Perhaps thru a distributor.

  • There will be a cheap version and a pro version.

Turning the script into a plugin will bring several benefits:

  • Speed: much faster execution
  • Work with 1,000s of type objects / characters, not 100s
  • Menu items that can be assigned keyboard shortcuts
  • Can be recorded with Actions for automating routine tasks
  • New tool: magic wand for text and non-modal eyedropper for text font appearances
  • Allow me to recoup development costs

Example uses:

  • Selection:
    • Find all other type objects with same font – View video
    • Find all other type objects with same type size – View video
    • Find all other type objects with same character fill color
  • Applying / creating character styles:
    • Cartographer: ArcMap text imported to Illustrator >> have plugin apply matching style or create new styles that match each of the implicate styles
    • Designer: Quickly comp out a design and select all matching text with certain font attributes with the new Text magic wand tool and make them styles. Great for deadline projects.
  • Find and Replace fonts on hidden and locked layers (better than Illustrator’s default Find Font)

Demonstration videos:

Selecting by Font Color – Basic

Including exactly the same color, pattern, swatch, same color mode, by character and by object.

View video – 7.8 megs

Selecting by Font Color – Advanced

Including selecting type object NOT a color and overprints, replacing with knockout.

View video – 17.2 megs

Changing Alignment and Registration of Type

Includes limiting to just point, area, or line type objects

View video – 11.0 megs

Why Change the Registration for Point Type?

To scale type size when it is registered to a townspot or other graphic element.

View video – 1.1 meg

Finding Scope

Limit your selection to active layer, sublayer, current view, selection, artboard/page, and document.

View video – 20 megs

Finding by Text Content

Find all type that has the “River” or “Road” or “Street” in it and then change those text range’s attributes. Options include Is, Starts, Ends, and more.

View video – 13.5 megs

Replacing by Text Contents

With exact phrase or add to the end or beginning of the matched text.

View video – 9.3 megs

Simplified Interface

This dialog is similar to what’d you see for the planned “magic wand” for type tool settings. Thanks to Tom for this suggestion!

View video – 7.6 megs

FEATURES NEW THIS VERSION (and the Last)

  1. Significant speed increase
    • Will now deal with 100s of text objects (or characters in a single text object)

    • But still slow in 1000s of text objects; change seach scope to text frame for best result
  2. Now selects ranges of text, not just text objects!
  3. “Just do it” non-dialog scripts
    • Select text with same font face and style
    • Select text with same font size
    • Select text with same font face, style, and size
    • Select like text within current selection
  4. Zoom to next and previous matching objects

  5. Can initiate “similar” text font styling based on currently selected

    • Text object

    • Selected text range within text object

    • Text insertion point within text object
  6. Non-contiguous text that matches search criteria will be selected in the same text object
  7. Character styles can now be found and replaced
  8. Find options revamped
  9. Selection (results) scope now functional
  10. Hidden and locked layers now (mostly?) functional
  11. Less use of pure math logic in GU

  12. Fill color now works.

  13. Registration and Justification now work

  14. Simple dialog interface

  15. Search in active layer, active sublayer, and current document view

STILL NOT FIXED
  • Character styles has a few bugs relating to color

  • Find by text string still hinky

CONCLUSION

Please let me know what you think, what bugs you find, and how it can be made more useful. Send to nathaniel@kelsocartography.com.

If you couldn’t find the download links above, here it is again:

http://kelsocartography.com/beta/frf/files/FindReplaceFonts_a11d.zip

3D Flash: Papervision + Webcam = Augmented Reality!?!

Wednesday, March 4th, 2009

[Editor's note: See a digital hologram of a cute little green monster and GE Smart Grid technology come to life in your hands. This shit is crazy! You print out a black and white shape and then hold it up to your webcam and the camera in Flash picks up the angle and distance of the print-out and in real time renders, rotates, scales, etc one of two 3d "hologram" scenes on your computer screen. Thanks April!]

Some links from the BioChat blog.

Example from boffswana.com via Vimeo.
Papervision – Augmented Reality (extended)

Example from GE. Video below.
Try it yourself! (requires Flash and web cam, Mac and PC)

A Year of Parking Tickets (NY Times)

Wednesday, March 4th, 2009

[Editor's note: This Google Maps mashup inside Flash shows color coded streets in New York City based on the number of parking violations. Preset zooms are provided to certain hot spots and but users can still auto-zoom to their own street addresses.]

Republished from the New York Times.
By Matthew Bloch and Amanda Cox.
Orig. pub. date: Nov. 26, 2008.

New York City agencies issued 9,955,441 parking tickets from July 2007 to June 2008.

Interact with the orignal Flash graphic at New York Times . . .

Tag Cloud: Twitter Chatter During the Super Bowl (NY Times)

Tuesday, March 3rd, 2009

[Editor's note: The Times produced a fantastic interactive time-based tag-cloud-on-a-map showing twitter chatter across the US keyed to major events in the Super Bowl game between the Steelers and Cardinals. Several thematic channels are available. Kudos to Matthew Bloch and Shan Carter. Thanks Laris!]

Republished from The New York Times.
Orig pub date: Feb. 2, 2009.

As the Steelers and Cardinals battled on the field, Twitter users across the nation pecked out a steady stream of “tweets.” The map shows the location and frequency of commonly used words in Super Bowl related messages.

Interact with the original Flash version at New York Times . . .

Noncontiguous Area Cartograms (IndieMaps)

Monday, March 2nd, 2009

[Editor's note: Zach Johnson promotes his Actionscript 3 class for producing non-continuous cartograms and gives background on why these are better (and easier to construct) than Gaster-Newman continuous cartograms.]

Excerpted from IndieMaps blog by Zach Johnson.
View full blog post from Dec. 4, 2008.

Fully contiguous cartograms have stretched and distorted borders but perfectly maintained topologies. Like the Gastner-Newman diffusion-based cartograms we see all over the place. Though all sorts of cartogram designs have been produced, those with perfect topology preservation (fully contiguous cartograms) receive the majority of academic and popular press attention.

< snip >

Judy Olson (Wisconsin Geography alum natch) wrote the only academic article to focus specifically on this cartogram symbology in 1976. She believed noncontiguous cartograms held three potential advantages over contiguous cartograms (I’ve three more below):

  1. “the empty areas, or gaps, between observation units are meaningful representations of discrepancies of values, these discrepancies generally being a major reason for constructing a cartogram”
  2. production of noncontiguous cartograms involves “only the discrete units for which information is available and only the lines which can be accurately relocated on the original map appear on the noncontiguous cartogram”
  3. because of perfect shape preservation, “recognition of the units represented is relatively uncomplicated for the reader”

Despite these inherent advantages (along with ease of production), all the early value-by-area cartograms I’ve seen maintain contiguity. Some took the radical step of abstracting features to geometric primitives, like Levasseur’s early French examples (which may not have been cartograms) and Erwin Raisz’s early American “rectangular statistical cartograms”. But in many ways the noncontiguous design is the more radical cartogram, as it actually breaks the basemap apart — rather than skewing shared borders it abandons them.

my [his] AS3 classes

Olson outlines a technique — the projector method — for manually producing such cartograms. A projector capable of precise numeric reduction/enlargement was required, but not much else, and accurate cartograms could be produced in minutes. A scaling factor was calculated for each enumeration unit, the projector was set to this value, and the projected borders were traced, keeping units centered on their original centers.

My [his] AS3 NoncontiguousCartogram class works similarly. It takes an array of objects containing geometry and attribute properties and creates a noncontiguous cartogram. I include methods for creating the input array from a shapefile/dbf combo, but using KML, WKT, or geoJSON representations wouldn’t be too hard. Methods are included for projecting this lat/long linework (to Lambert’s Conformal Conic projection at least). The NoncontiguousCartogram class draws the input geography, figures the area of each feature, and scales figures according to their density in the chosen thematic variable.

It’s all good/in ActionScript 3, so can be used in Flash or Flex. The zip distribution includes the following:

  • the main NoncontiguousCartogram.as class
  • two example applications and the data needed to run them
  • utility classes, including some that make creating cartograms from shp/dbf input quite easy
  • Edwin Van Rijkom’s SHP and DBF libraries, which are used to load the shapefiles in both of the included examples
  • Keith Peters’ MinimalComps AS3 component library, for the components used in one of the examples
  • Grant Skinner’s gTween class, which is required by the NoncontiguousCartogram class for tween transitions

Browse all the above or download the zip.

<snip>

more advantages

In my thesis research last spring, noncontiguous cartograms performed quite well: subjects rated them highly on aesthetics and could locate and estimate the areas of features with relatively high accuracy. I would add the following to Olson’s list of noncontiguous cartogram advantages.

  1. Olson concentrates on the perfect shape preservation of noncontiguous cartograms. The form (well, those with units centered on the original enumeration unit centroids, as in Olson’s projector method) also perfectly preserves the location of the features on the resultant transformed cartogram. Not only are features easier to recognize, but locations within the transformed units can be accurately located as well (cities or mountain ranges from the original geography can be accurately plotted on the transformed cartogram).
  2. Because units are separate on the transformed cartogram, their figure-ground is increased and areas of features can therefore be more accurately estimated.
  3. Many cartogram designs (including most manual cartograms and the Gastner-Newman-produced cartograms) sacrifice some accuracy for shape recognition. This is a defensible tradeoff, especially as area estimation is notoriously inaccurate and nonlinear. Yet it’s a tradeoff that noncontigous cartograms need not make, as they can always perfectly represent the data with relative areas without sacrificing shape preservation.

Thus, noncontiguous cartograms seem to excel at the cartogram’s two main map-reading tasks: shape recognition and area estimation. This is mediated somewhat by the chief advantage of contiguous cartograms: compactness. Because no space is created between enumeration units, contiguous cartogram enumeration units can be larger than those on noncontiguous cartograms, all other things equal. The increased size on contiguous cartograms may improves their legibility.

Read the full entry over at Indie Maps . . .

E00Parser, an ActionScript 3 Parser for the Arc/Info Export Topological GIS Format (IndieMaps)

Monday, March 2nd, 2009

[Editor's note: Zach Johnson promo's his ActionScript 3 class for reading in .e00 GIS files to Flash. Useful for creating cartograms and other graphic representations reliant on topological relationships. Originally posted there Feb. 21, 2009.]

First off, why mess with such a retro format as Arc/Info Export (.e00)?– any code written for this ASCII file type in the last few years has been on how to go from e00 to pretty much anything (especially to the non-topological data format, the shapefile).

Put simply, topological information makes a lot of things possible for the intrepid ActionScripter.

Read more at IndieMaps . . .
Get the code . . .

Bullet Graphs for Not-to-Exceed Targets (Visual Business Intelligence)

Wednesday, January 28th, 2009

[Editor's note: The bullet graph is an alternative to circular gauges and meters commonly used on dashboards with a graph that provides a richer data display using less space. The bullet graph consists of five primary components: text label, a quantitative scale along a single linear axis, the featured measure usually as dark black line, one or two comparative or target measures of performance (optional), and from two to five ranges shown as background fills along the quantitative scale to declare the featured measure’s qualitative state like bad, satisfactory, and good (optional) All use the same quantitative scale. Flex component with source code from Agile UI. Google charts version from Dealer Diagnostics. Excel version from Excel User.

Correction on 2010 March 18: The image of the dashboard above is from Robert Allison. Get the SAS/Graph code to create the dashboard.]

Republished from Visual Business Intelligence. Monday, February 4th, 2008 at 2:54 pm.

Image above from Stephen Few’s Information Dashboard Design book seen here.
View PDF format Bullet Graph Design Specification from Stephen Few on the bullet graph. He’s got other useful information design writeups in his Library.

When I designed the bullet graph back in 2005, I did it to solve a particular problem related to dashboard displays. The graphical widgets that software vendors were providing to display single measures, such as year-to-date sales revenue, consisted mostly of circular gauges and meters, which suffered from several problems. Most of them conveyed too little information, did so unclearly, and wasted a great deal of space on the screen. The bullet graph was my alternative, which was designed to convey a rich story clearly in little space.

Bullet Graph Description

Since their introduction, a number of dashboard vendors now support bullet graphs, either as a predesigned display widget or as a display that can be easily constructed using their design tools. Now that bullet graphs are being used a great deal, they are being put to the test, and best practices are being developed to use them effectively.

One challenge that is faced by any graphical display of a single measure compared to another, such as a target, is the fact that the target usually functions as a point that the measure should reach or exceed, such as a sales target, but sometimes it functions as a point that the measure should stay below, such as an expense target. Here is a series of bullet graphs, which are designed in the typical manner:

Bullet Graphs for Not-to-Exceed Targets 1.jpg

Two of the measures—expenses and defects—work the opposite of the others in that the goal is to remain below the target. The background fill colors on these bullet graphs, which vary from dark gray to indicate “poor performance” through to the lightest gray to indicate “good performance,” are arranged from poor on the left to good on the right for revenue, average order size, and new customers, but in reverse for expenses and defects. The reversed sequence serves as a visual cue that expenses and defects should remain below the target. This cue, however, is not strong. It would be useful if something that stood out more signaled this difference.

We might be tempted to replace the varying intensities of a single color—in this case varying intensities of gray—with distinct hues, to make the reversal of the qualitative scale more apparent, such as by using the traditional traffic light colors that are so popular on dashboards.

Bullet Graphs for Not-to-Exceed Targets 2.jpg

This does cause expenses and defects to more clearly stand out as different from the other measures, but at what cost? Even if we ignore the fact that most people who are colorblind (10% of males and 1% of females) cannot distinguish green and red, we are still left with an overuse of color that makes the dashboard appear cluttered and visually overwhelming, as well as a dramatically weakened ability to use color to draw viewers’ eyes to particular areas that need attention. Is there a better way to make certain bullet graphs look different without introducing other more troubling problems?

Here’s a suggestion: not only reverse the sequence of the qualitative scale, but also the direction of the quantitative scale. Using expenses as an example, the quantitative scale could run from 0 at the right of the bullet graph with values increasing leftwards. The bar that encodes the expense measure would then also run from the right edge of the bullet graph leftwards. The bar running from right to left serves as a stronger visual cue that the target works differently, as you can see below:

Bullet Graphs for Not-to-Exceed Targets 3.jpg

Although it is not conventional for a quantitative scale to run from right to left, except in the case of negative values, this is easy to read and the unconventionality actually causes it to pop out more clearly. In fact, expenses and manufacturing defects are measures that we can easily think of as negative values (for example, expenses reduce profit and defects reduce manufacturing productivity).

I would like to encourage all the vendors out there that support bullet graphs to support this functionality and for those who use them to take advantage of it.

Take care,

Signature

Picturing the Inauguration: The Readers’ Album (NY Times)

Monday, January 26th, 2009

[Editor's note: Several hundred readers at the New York Times site submitted photos to a live photo wall commemorating last Tuesday's historic inauguration of Barack Obama as the United State's 44th president.]

Republished from The New York Times. January 18, 2009. Reader submitted.

NYTimes.com readers sent in their photographs from Washington and around the world. Images are organized in the order they were received.

Screenshots below. View interactive version.

Jon Huang, Ben Koski, Andrew Kueneman, Thomas Lin, Gabriel Dance, Whitney Dangerfield Elisabeth Goodridge, John McGrath, Jacob Harris, Tyson Evans, Alan McLean, and Hamilton Boardman/The New York Times