Dealer Diagnostics
DIAGNOSTICISM: How to know your dealership in he blink of an eye

Archive for May, 2008

The Odds Are Stacked Against Us

The world is awash in numbers yet most people find it harder than ever to understand them. Cory Doctorow, writing the Guardian, focuses on rare events and people’s inability to estimate their probability. Whether it’s playing the lottery, investing in the market, or running a business, most people rely on their intuition and end up making terrible decisions. Doctorow argues, “We’re just not wired to have good intuition about things that happen with extreme infrequency.” To remedy the situation he goes on to suggest

You don’t get to understand the statistics of rare events by intuition. It’s something that has to be learned, through formal and informal instruction. If there’s one thing the government and our educational institutions could do to keep us safer, it’s this: teach us how statistics works. They should drill it into us with the same vigor with which they approached convincing us that property values would rise forever, make it the subject of reality TV shows and infuse every corner of our news and politics with it.

Infrequent events or not, a better grasp of the numbers would certainly make for a lot more restful nights and more profitable days for any managers.

Going the Extra Inch: Airlines with Legroom

A post in the Economist’s travel blog, Gulliver, and a story in the New York Times had me thinking about legroom on airlines. According to UK-Air.net, one of the few ways to forecast your leg cramping comfort is by looking at seat pitch, which is “the distance between the rows of seats and is measured from the back of one seat to the back of the seat behind.” I began charging through a few sites which graciously list the data in tables. Tables are fine for listing data but for making quick comparisons or any type of analysis, visualizing the data is much more effective. A picture says a thousand words after all. People absorb a picture in an instant while taking several minutes to digest evan a few paragraphs or tables. Wanting to share what I’d learned about legroom with others I put together a quick graphic.

Below, I’ve charted the minimum seat pitch you can expect on a particular airline. (A lot of airlines vary seat pitch by aircraft or level of service, such as economy or economy premium/plus.) A seat pitch of 28 inches is the minimum required by UK regulations. For simplicity and for a little further insight into the airlines that I tend to fly, I organized the list of world airlines to those in the big three alliances. Enjoy.

Seat Pitch by Airline

Create Bullet Graphs with Google Charts in 7 Easy Steps

UPDATE: We have taken this a step further with a gadget which will allow you to build these using data from a spreadsheet. Check it out!

Stephen Few’s bullet graph, was a welcome addition to the data visualization scene in 2005. Up until that point, displaying a single measure graphically usually involved the dial, gauge or traffic light metaphor. Since then, more visualization tools and business intelligence vendors have started to support bullet graphs. We’ll take take a look at how to create your own bullet graphs using the Google Charts API, using nothing but your browser, in 7 easy steps.

(For those of you who don’t care how they’re made and want instant gratification, you can build your own bullet graph in the form below)

Step 1: Meet the Google Chart API

The Google Chart API allows anyone to create a chart image by calling a specifically formated URL. For the purposes of this demo, all you need to know is that when you give the Google Chart API a URL, it gives you back a png image.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1&chxt=x&chxl=0:|0|50|100&chxs=0,000000,9

returns this image:

bullet graph

Step 2: Deciphering the URL

That’s a long and confusing URL. Let’s break it down to see the pieces.

The URL has parameters. These specify size, color, labels, etc. Here’s the important part: each parameter is separated by an ampersand character (&). The URL looks a little more manageable when we isolate the parameters. (Here’s a picture of how the URL breaks down.)

chs=100x40
cht=bhs
chco=000000
chd=t:65
chbh=15
chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1
chxt=x
chxl=0:|0|50|100
chxs=0,000000,9

Don’t worry about what each means at this point (at the end of the page, I have described each of them). For now, simply recognize that a long URL can be easily broken down into a bunch of parameters.

Step 3: Build a Simple Bar Chart

Let’s start with the base of our URL: http://chart.apis.google.com/chart? and add on our parameters

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15

Now we have a simple horizontal bar chart that will be the performance measure in our bullet graph.

simple bullet graph

Step 4: Set the Symbol Marker

The thin vertical bar displays the comparative measure. Start with the base URL from step three and add the comparative measure.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1

bullet graph with symbol marker

Chart markers operate by separating a chart into a range from 0, on the left, to 1, on the right. I wanted a thin red line, but not too thin, so I made it stretch from 0.49 to 0.51.

Finally, did you notice the “1” on the end? That “1” tells Google that I want the red marker to show up on top of everything else I have in the graph; that is, I want the red marker to be placed on top of the black bar, not below it where I won’t see it.

Step 5: Set the Bands

The colored bands are the qualitative ranges to show if your measure is good, bad, above target, below target or whatever you prefer.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1

Note the pipe symbol “|” that separates the two bands.

bullet graph with bands

Step 6: Set the Scale

Google Charts makes scales easy by treating them like labels, allowing you to set them however you please. I’m going to keep it simple and use an easy scale.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1&chxt=x&chxl=0:|0|50|100&chxs=0,000000,9

The chxt parameter specifies that you want to label the x axis. The chxl parameter supplies the values for each label, and chxs specifies the first label (0), the text color (in hex: 000000), and size in points.

bullet graph with scale

Step 7: View

A bullet graph is born. Thanks to the Google Charts API, you can embed the png image through the URL into your web site, document or application (check out the terms of service). Don’t forget to add a text label to your bullet graph so that people know what you’re presenting.

Conclusion

In closing, you should have a pretty clear idea for how a bullet graph can be created using the Google Charts API. For this demo, we wrote the URL by hand, but library support is widely available, although no libraries support bullet graphs out of the box.

Try it Yourself

We whipped up a quick javascript form to generate bullet graphs (hat tip to Bas Wenneker whose library we modified). If people find it useful enough, we could clean the code up a bit so it fully supports bullet graph creation. Let us know.






Your bullet graph:

Parameter Description (and usage in demo)
chs chart size, width x height in pixels
cht chart type, bhs = bar horizontal stacked
chco chart color, 000000 is html hex code for black
chd chart data
chbh chart horizontal bar height, value in pixels
chm chart marker
marker r (for horizontal range)
color html hex code
any value this is a dummy value that is always ignored
start point where the marker starts, 0 is the left, 0.5 is the middle
end point where the marker ends, 1 is the right
chxt chart axis type, to set labels on the x axis
chxl chart axis label, 0 is the data index (there is only one set of data we’re graphing) and 0,50,100 are the labels.
chxs chart axis style, 0 is the axis index we’re referring to, html hex for color and “9” is the font size

Additional Examples

bullet graph example 1
bullet graph example 2

Hopefully this demo gave you enough to get started and get the wheels turning in your head. There’s a lot more that can be done with this type of information graphic; we’re looking forward to seeing what people come up with: drop us a line (or URL) and show us your chops.

NADA 2008

Three weeks after Vizthink, we were back in San Francisco for NADA 2008, the retail auto industry’s largest annual convention. Based on the positive feedback from the dealerships involved in our pilot and what we heard from some of the best minds in the visualization community, we thought it was the perfect time to announce the reports to a larger audience.

Massive General Motors booth at NADA 2008

And what an audience it was: 24,000 people, 700 exhibitors, 5 halls. We spent a lot of time meeting up with people in the business so we didn’t get to see some of the more interesting sessions. By all accounts the conversation was well-developed with a lot of dealers working through the issues of making the most of their technology investments and looking for opportunities to work better and smarter (read excellent summaries of 3 of these sessions at The Light is Green).

Where ever we went in San Francisco there were dealers swapping ideas and making the most of their time on the coast. We had a chance to meet up with several important people in the industry, including DMS vendors, CRM providers, OEMs plus a mass of dealers, and went quite a bit further than we thought we were going to go.

I’d like to tell you more about how those went, but they’re in progress/on-going, so you’ll have to wait for the full story.

The convention ended with an oustanding speech from Tom Brokaw. He challenged the dealers and industry people in attendence to focus on our duties, to never rest and to seek out innovation and new ideas, building upon what was left by those who preceded us, and leaving something greater for those who follow. The room fell silent for a few moments before erupting in a standing ovation.

VizThink 2008

The idea to start to a blog was always on our mind. There was a lot going on for us and a lot of news to share but when faced with a limited amount of time and the decision of writing news or developing reports, the choice was pretty easy.

First, there was VizThink 2008, held in San Francisco in February. The inaugural conference brought together people to discover, create and share ideas on how visualization could help them in their endevours. They came from every where you could imagine, public, private and not-for-profit; from Fortune 50 to one person start-ups. Everyone was there to learn how to convey information more effectively through an image and within an hour of attending a few of the talks and workshops, you could almost see the light bulbs turning on over people’s heads. In fact, within the first 10 minutes when Dave Gray, of Xplane, led entire conference through a five minute exercise on how to draw what you do, it was like putting two hundred fireflies into a jar and shaking it up. If you have any interest in the emerging community of visual thinkers, VizThink is definitely worth a visit. Anyway, on with the show….

Over the next month, we’ll mention some specific nuggets of wisdom that popped up during the two days; for now, here’s a personal/professional highlight: meeting renowned visual communications guru Karl Gude. Karl managed information graphics for Newsweek magazine for over a decade, and at the Associated Press prior to that, he’s currently putting together an Information Graphics program at Michigan State University’s School of Journalism. Karl was generous enough to give our reports a twice over and had some good suggestions right off the bat, as you’d expect from someone with his level of experience. In email exchanges after the conference we were quite humbled by some of his comments (quoted with permission):

Your well designed and useful report provides a clear visual snapshot
of a dealerships complete financial picture on a single page, from a
broad-brush performance review of overall earnings and vehicle
category sales to a detailed horse race of each individual sales
associate’s fiscal contribution. The amount of data that has been
pulled from the record books and packaged here so nicely is really
quite amazing. Your graphics rocks.

Now there’s a Dealer Diagnostics’ milestone that will become etched into office lore.

Beyond the feedback on the reports, which included thoughts from people in as diverse industry’s as finance (CIBC Global Markets), print (Wired) and government (the CIA), a lot of ideas fell out of the event. Here’s what came of Dave Gray’s 10 minute drawing exercise.

dealer diagnostics business card back

It also proved to be a hit with everyone we showed it to; so much so, it became the back of our business card. Any idea what we do?

Dealer Diagnostics on Twitter

For those who know what it is, no explanation is necessary; for those who don’t, no explanation is sufficient.

Follow all the ddr action in a much more informal and painfully detailed way.

Follow us on Twitter.

©2008 Dealer Diagnostics Inc. All rights reserved | Entries (rss) | Comments (rss)