Stately - A US state map in a font

Stately - A US state map in a font(intridea.github.com)

132 points by petewarden 13 years ago | 29 comments

zaius 13 years ago |

I like the idea of styling a map properly with CSS. I love the sheer WTF factor.

The fact we're seeing fonts (ab)used in this manner (and for icon fonts) says that we're sorely missing a good technical solution.

T-hawk 13 years ago | |

Amazing indeed. So what is this font abuse really getting at? It's a means to introduce semantic information into vector graphics. Defining the semantics of a state, its shape and name, allows us to treat the state as an abstraction that can have formatting applied to it.

So how did web fonts end up as the approach? Because that's where browsers first acquired the notion of confluencing semantics and vector graphics. Fonts demand all the advantages of those entities: semantic information to define characters suitable for mapping to glyphs, the ability to apply styling to those glyphs (bold/italic/etc), and raster-independent scalability.

Could SVG do something like this, include semantic hooks in a file for applying styles? (I'm not too familiar with the format.)

salvadors 13 years ago | | |

I'm not sure if I'm missing something in the question, but SVG plays very nicely with CSS. I frequently download SVG map files from Wikipedia, add new, more suitable, IDs to the relevant <path> elements, and then add a CSS section at the top for shading individual countries or regions or whatever.

The complex part is usually simply working out which country/region/whatever corresponds to which <path> in the first place; but this is a complaint more about the quality of the markup of the underlying SVG of an average map on Wikipedia, than about SVG itself.

Camillo 13 years ago | |

Wikipedia (technically Wikimedia Commons, or whatever it's called) has lots of maps in SVG. I've used those before.

mnicole 13 years ago | |

http://kartograph.org/ (and other such libs) exists, but I'm not sure it's as "designer-friendly" as a pure CSS solution, despite being able to style them in your stylesheet all the same.

b42 13 years ago | |

There's CSS-inspired map styling language for OpenStreetMap:http://www.mapcss.org/

shinynewmac 13 years ago |

You'll all regret adding -ly to anything eventually. Still really awesome, can't wait to see the rest of the world.

ianstormtaylor 13 years ago | |

Seeing as stately is a real word this will never matter for this specific case.

StacyC 13 years ago | |

Wellly that’s justly your opinionly.

dangrossman 13 years ago | |

Does Flickr regret dropping a vowel in its name? There have been lots of naming trends and they don't seem to have had much effect on long-term success. What's wrong with -ly?

shinynewmac 13 years ago | | |

It's not a bad thing at all. Flickr works because it is still pronounced Flicker. Personally anything with -ly irks me the wrong way and it feels like a branding cop-out at times. Just imagine if Google was called Searchly or if Basecamp was named Managely. From a branding perspective in 5-10 years time adding -ly will look dated. You'll think back to web 2.0 as if you were looking at a geocities page (or worse Homestead). Not to say this project should be aware of its branding at all.

I have to say Improvely looks solid by the way.

afandian 13 years ago | | |

I think the general case is that it might have been innovative for one name, but the rest sound derivative, unoriginal, repetitive, derivative, unoriginal and repetitive. And many abuse the Lybian TLD.

afandian 13 years ago | |

Hear hear. It sounds ridiculous.

shmerl 13 years ago |

Hm, why can't this be done with simply using SVG instead of using fonts in such manner?

atestu 13 years ago | |

It can, but not every browser supports SVG sadly. :( This however, works in IE8

shmerl 13 years ago | | |

I see. But I think it's not a preferable solution if one wants to support crippled browsers like IE <= 8. But it's an interesting proof of concept still. Some approach like Raphaël JS is probably better for such cases. Or one just needs to ignore any crippled browsers, which might not be ideal.

salvadors 13 years ago | | |

Surely it's relatively easy to convert SVG to, say, .jpg on the fly, though, no? </handwave>

paddy_m 13 years ago |

What about old fashioned https://developer.mozilla.org/en-US/docs/HTML/Element/map and area tag? They are built specifically for this.

bluetidepro 13 years ago | |

That can be a huge mess, though, if you need to do a lot of dynamic color changing of specific states and/or groups of states.

ldayley 13 years ago |

Stateface is another good font if you'd simply like images of the individual states. https://github.com/propublica/stateface

It doesn't display the entire map like this (so the use case is different), but it's pretty cool all the same.

travisp 13 years ago |

I love the idea, but they've made an odd choice in the way they've styled the page: I can't scroll down to read all the text. Page scrolling is jerky and the text disappears for me before I reach the bottom of the text. I had to inspect the page source to finish reading "How does it work?"

tnorthcutt 13 years ago | |

What browser/OS? Working fine on Chrome stable/Mac 10.8

travisp 13 years ago | | |

I was also using chrome stable, Mac OS 10.8. The left column doesn't disappear when I scroll down in Firefox (although also much more jumpy than I'm used to). But, I guess it seems to only affect me. I do have a retina display and they are using javascript to serve me retina images, which might have something to do with it.

sheraz 13 years ago |

Wow. very cool. But that 3d-rotation on the hero graphic gives me a little vertigo -- it's almost too good :-)

Camillo 13 years ago |

This is great, but I'm really looking forward to support for animated fonts in Firefox.

wickeand000 13 years ago | |

The return of the blink tag?

Mizza 13 years ago |

Looks like Washington and Maine get cut off at the top!