Archive for the ‘Flash’ Category

Embeddable US Demographics Map (ESRI via FreeGeoTools)

Thursday, October 22nd, 2009

[Editor's note: This was demo'd at NACIS earlier this month. Raster thematic map tiles delivered via Flash API that are still interactive. ESRI's solution to Google mashups.]

Republished from Free Geography Tools.

As a demo of the ArcGIS API for Flex, ESRI has a new page that lets you create an embeddable/shareable map of demographic data by US county. Only seven datasets available now:

  • Median Household Income
  • Population Change 2000-2009
  • Population Density (per sq. mile)
  • Median Home Value
  • Unemployment Rate
  • Average Household Size
  • Median Age

Map creation is trivially easy – select the demographic dataset from a dropdown, zoom the map to the desired extents, set a map size in pixels, and you’re done; links to a map with your parameters, and code for an embeddable map, are generated automatically. Here’s an embedded map, scrollable and zoomable; unemployment rate is the default dataset, but you can choose other sets with the dropdown menu at upper right:

More datasets would be nice, as would control over colors and ranges …

Interact with the original at Free Geography Tools . . .


Wasting Away: The Squandering of D.C.’s AIDS Dollars (Wash Post)

Monday, October 19th, 2009


[Editor's note: Great interactive map from Kat Downs and Mary Kate Cannistra at The Washington Post for our 3-part investigative series on the District's widespread waste and mismanagement to overwhelm the city's AIDS services. Map allows several ways for the user to group (all/active) and filter (amount of award, year of award, and funding source) their analysis of groups receiving city money and calls out the 6 groups highlighted in the series. A popup menu allows the user to jump alphabetically to the group name they already know rather than wading through the map.]

Republished from The Washington Post.

Between 2004 and 2008, the D.C. Department of Health awarded approximately $80 million in grants to about 90 specialized AIDS groups, which along with medical clinics make up the front lines in the District’s fight against the disease. But while some provided a critically needed lifeline to the sick, others were wracked by questionable spending, practices and services. During those five years, one in three dollars earmarked for local AIDS groups went to these troubled programs, a total of more than $25 million.

SOURCE: D.C. Department of Health HIV/AIDS Administration, D.C. Department of Health fact sheet, 2009
GRAPHIC: Kat Downs, Meg Smith, Debbie Cenziper, Lauren Keane and Mary Kate Cannistra

(screenshot above) Interact with the original at The Washington Post . . .

FXG: Illustrator and Dreamweaver Integration!?

Friday, October 16th, 2009

[Editor's note: I've known about the FXG format for exchanging content between Illustrator and Flash via Flash Catalyst for a while now but have never been excited about it until seeing this video from Adobe's MAX Sneaks session last week. It previews how FXG might one day (CS5?) allow live data binding (read automatically updating charting, etc) based on a design mocked up in Illustrator but deployed via Dreamweaver as HTML 5 (and iPhone compatible) or Flash via SWF.]

Republished from Mordy’s Real World Illustrator blog.
Another take at: //commentedout and video source at YouTube.

So take a look at this video that someone captured from this year’s Adobe MAX Sneaks session — a demo of technology showing integration between Illustrator and Dreamweaver. If it isn’t clear in the video clip below what is happening, I’ll spell it out for you: He starts by taking art drawn in Illustrator and copies it to the clipboard. Then he goes into Dreamweaver, selects a DIV and chooses a function called Smart Paste. Dreamweaver then pastes an FXG conversion of the Illustrator art directly into the page. If you aren’t familiar with FXG, it’s basically a better SVG (you can get more information on the open source FXG spec here). In other words, you draw in Illustrator, copy and paste into Dreamweaver (which converts it to code), and the art displays as vector art in a web browser. What’s more, the engineer proceed to actually bind XML data to the chart.

As I mentioned, I think this is probably something that is way way off in the future, but it’s still quite incredible. Maybe there’s some hope for us all, after all :)

Continue reading at Mordy’s Real World Illustrator . . .

Visualizing Indieprojector (AxisMaps)

Friday, September 18th, 2009


[Editor's note: IndieProjector lets users approach map projection as a Web 2.0 task. Anyone can upload data and reproject into a number of useful presets. This visualization shows the geographies popular with users, their data coverage. Most users are mapping the US and parts there of. But a few things stand out to me. Iran, a couple places in Africa, and the surprising number of people who think the world ends at the Rio de la Plata, Capetown, Melbourne, and Fairbanks. Are people using a cylindrical projection for their world maps, ahem, and it's just getting too tall for the page? None the less, a neat tool. Keep up the good work!]

Republished from IndieMapper / AxisMaps.

After a few months of indieprojector, we thought it’d be interesting to see how it’s being used. Two questions sounded particularly fun to visualize: what geographic areas being mapped with indieprojector, and what projections are the most/least popular? So I grabbed some data and generated some maps, which Mark turned into snazzy visualizations.

Continue reading at IndieMapper . . .

News Dots (Slate)

Wednesday, September 9th, 2009


[Editor's note: This is one of the first tools I've seen that links topics, people & places into a network of graduated circles based on their ranking in the news. The circles are arranged based on their edge connections within the overall topology using the Flare visualization package in Flash AS3. As seen in the above screenshot, Germany is linked to Afghanistan, NATO, the Taliban, The Washington Post, and 20 other nodes. This project is one step forward in the vision I outlined in Topology and Projections: 21st Century Cartography. Disclosure: Slate is owned by the Washington Post Company, my employer, but I was not involved in this project.]

Republished from Slate.

Introducing News DotsAn interactive map of how every story in the news is related, updated daily.

Like Kevin Bacon’s co-stars, topics in the news are all connected by degrees of separation. To examine how every story fits together, News Dots visualizes the most recent topics in the news as a giant social network. Subjects—represented by the circles below—are connected to one another if they appear together in at least two stories, and the size of the dot is proportional to the total number of times the subject is mentioned.

Like a human social network, the news tends to cluster around popular topics. One clump of dots might relate to a flavor-of-the-week tabloid story (the Jaycee Dugard kidnapping) while another might center on Afghanistan, Iraq, and the military. Most stories are more closely related that you think. The Dugard kidnapping, for example, connects to California Gov. Arnold Schwarzenegger, who connects to the White House, which connects to Afghanistan.

To use this interactive tool, just click on a circle to see which stories mention that topic and which other topics it connects to in the network. You can use the magnifying glass icons to zoom in and out. You can also drag the dots around if they overlap. A more detailed description of how News Dots works is available below the graphic.

Interact with the original and learn more at Slate . . .

Send Colors from InDesign and Illustrator to Flash (Ajar Productions)

Tuesday, September 1st, 2009


[Editor's note: This handy JSX based script for Illustrator and InDesign from Ajar Productions will transfer spot and process color swatches of all varieties (RGB, CMYK, LAB, HSB) to RGB in Flash using Adobe's built-in color conversion routines to preserve color fidelity. Requires CS3 or CS4 (works best with CS4).]

Republished from Ajar Productions. Dec. 5, 2009

Following the merge text extensions for Flash, Illustrator, and InDesign, Keith Gilbert wrote me wondering about getting swatch information from InDesign to Flash via XFL or by way of importing an Adobe Swatch Exchange (ASE) file into the Flash swatches panel. There are several stumbling blocks in the way of such an extension. First, finding a way for extendscript or JSFL to read the contents of an ASE file (which is not open source and not plaintext) proves to be quite difficult. Second, JSFL (the Flash scripting language) doesn’t have any access (currently) to the swatches panel.

BREAKING NEWS (12/6/08): I noticed that the new Kuler extension for Flash CS4 has an “add to swatches” button, and it actually adds swatches to the swatches panel. After some decompiling and a lot of detective work, I found an undocumented JSFL call that was added to CS4. The feature is undocumented for a reason: it sends encoded XML data, and if the data is faulty, it crashes Flash. I have a few test cases working and I’m confident that I can add it to this extension, so the swatches will go right in the Flash swatches panel, rather than onto the stage, though it will only work in CS4. Be on the lookout for an update in the next few days.

UPDATE (12/7/08): Updated to version 1.1.0. If you have Flash CS4, the swatches will now go right into your Flash Swatches panel. Hooray!

There does seem to be a lot usefulness to such an extension, since XFL creates a new workflow between InDesign and Flash, and the Illustrator importer for Flash is fantastic, but neither one loads any of the swatches from the original document. I’ve certainly spent my fair share of time opening up the swatch properties, making sure the swatch is RGB or hex and copying all three fields one at a time.

So, I decided to plow ahead and see what I could come up with. The results are below. This extension takes the swatches from your current InDesign or Illustrator document and sends them to a new layer on the Flash stage. You can then use the eyedropper to pick up the colors, or you can add them to your swatches panel individually (similar to this demo of the Kuler panel).
UPDATE (12/7/08): If you have Flash CS4, you can skip the step above. Version 1.1.0 of this extension will send the Illustrator or InDesign swatches right to your swatches panel in Flash.

This extension will transfer spot and process colors of all varieties (RGB, CMYK, LAB, HSB). Rather than converting the CMYK with my own function, I used the applications themselves to convert the colors to RGB for Flash, so the transfer fidelity is quite good. It will ignore gradients, tints, patterns and fancy stuff like that. If you want to get your gradients into Flash see the bonus tip below.

Continue reading at Ajar Productions and download files . . .

Scents and the City or “I -smell- NY” (NY Times)

Monday, August 31st, 2009


[Editor's note: Jason Logan contributes to the resurgent field of experiential cartography by recounting his travel, by smell, across the isle of Manhattan. The semi-interactive map published in the New York Times brings to life "smell stops" in each neighborhood both as one would experience them in the daytime and at night. The piece reminds me of the 1985 historical novel Perfume: The Story of a Murderer, lent to me in university by Judy Walton. I recently posted on Edible Landscape Maps and John has a post on psychogeography maps.]

Republished from the New York Times. August 29, 2009
By JASON LOGAN, an illustrator and the author of “If We Ever Break Up, This Is My Book.” Produced by Jon Huang and Snigdha Koirala.

New York secretes its fullest range of smells in the summer; disgusting or enticing, delicate or overpowering, they are liberated by the heat. So one sweltering weekend, I set out to navigate the city by nose. As my nostrils led me from Manhattan’s northernmost end to its southern tip, some prosaic scents recurred (cigarette butts; suntan lotion; fried foods); some were singular and sublime (a delicate trail of flowers mingling with Indian curry around 34th Street); while others proved revoltingly unique (the garbage outside a nail salon). Some smells reminded me of other places, and some will forever remind me of New York.

Interact with the original at New York Times . . .

POTUS Tracker: Analyzing Obama’s Schedule (Kelso via Wash Post)

Monday, August 24th, 2009

[Editor's note: I'm proud to present POTUS Tracker: Analyzing Obama's schedule, a new tool from The Washington Post that keeps tabs on President Obama, whom he's meeting with (over 3,000 people so far), and what they're discussing (with 17 issue categories and 13 event type codes). It is the second in our Obama Accountability series. The first, Head Count: Tracking Obama's Appointments, has enjoyed a million visits since launch in April 2009. Data for this project available in RSS and JSON data dump.

I did the Flash interactive (using the Flare visualization package for the opening treemap isue view) and coordinated the project with Karen Yourish. Madonna Lebling and Ryan O'Neil are the genius behind the schedule information and online data presentation. POTUS Tracker was featured on CNN's State of the Nation (YouTube video) on Sunday, 23 August. With the project out of the way, I can turn my attention back to Natural Earth Vector.]

(Screenshot below) Interact with POTUS Tracker at The Washington Post . . .


CREDIT: Nathaniel Vaughn Kelso, Madonna Lebling, Karen Yourish, Ryan O’Neil, Wilson Andrews, Jacqueline Kazil, Todd Lindeman, Lucy Shackelford, Paul Volpe

3D Perspective in the Maps API for Flash! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: This seems kinda odd given the poor image resolution, but I'm sure there's a use for it and someone will figure out how to sample higher res tiles. Thanks Laris!]


2-D maps are great, but sometimes it’s cool to gaze into the distance. Today we’re happy to announce support for perspective in the Maps API for Flash. We’ve taken the regular API, added pitch and yaw, borrowed the look-around control from Google Earth, and thrown in some nifty camera trajectory support. The opportunity to see the world from a chosen point of view is now in the hands of a user!


Here’s a perspective map in action. Sit back and watch or dive in and drag the view. Try holding down the zoom plus (+) or minus (-) buttons to see the new smooth continuous zoom.

Play with demos and the possibilities emerge. Shadows stretch out as the land tilts back. Foreground detail blends with background context. Movement through the world becomes first-person in nature and distant features can rapidly be dragged to the fore. On a regular map a cluster of markers might only confuse. Spin a perspective map and their pattern becomes clear as nearer markers pass in front of their more remote partners.

A key strength of Flash is its ubiquitous nature and we’ve taken care to develop an API that preserves this advantage. While supporting the latest, greatest Flash players, the API requires only Flash 9. Build a single target and API runtime code matches implementation library to player version. Flash 10 users gain the benefits of the native 3-D graphics support–rendering speed and accuracy–but Flash 9 users won’t be left out.

So how do you create a 3-D map? If you’ve not used the Maps API for Flash before here we’ve got lots of documentation to help you get up and running. For those who’ve used the API and have an existing map to hand, three quick changes should suffice:

  • Replace Map with Map3D
  • Turn on perspective:
    Map3D.viewMode = View.VIEWMODE_PERSPECTIVE;
  • Replace the old position and zoom controls with the new navigation control:

While this new functionality is aimed at Flash developers, we also have the Earth plugin and API for those of you working with JavaScript and the JS-based Maps API. For developers using the Maps API for Flash, today’s release is just an extension of the existing Flash API; where it makes sense, we have borrowed some learnings from the Earth API (and will continue to do so). From a user’s viewpoint, if you’ve used the Earth plugin or Google Earth, the controls will all be familiar. We’ve kept the same basic key mappings. Add SHIFT to tilt the map, or CTRL to tilt your view and you’re ready to go. More features are hidden just under the surface. Animate a flight from A to B, or apply perspective scaling to your markers. See the new API reference documentation for details.

As always, for those of us working on APIs, the most rewarding aspect is of seeing what developers do with it. Here’s what some of our trusted testers have done to date:

UK Weather Tour ArcGIS Services PaperVision3D Scene
Ian Watkins Nianwei Liu Satoshi Ueyama
Eiffel Tower KMZ 3D Driving Simulator Weather Radar GroundOverlay
Masashi K Katsuomi.K Andrew Trice

Check out some more demos, have a play, make some maps, and let us know what you think!

MarkerClusterer in an All New Flavor – ActionScript! (GoogleGeoDev)

Friday, August 14th, 2009

[Editor's note: An AS3 Flash / Flex library for auto-clustering near map location markers into groups symbols. This speeds map rendering and groups points all within the same neighborhood, avoiding "red dot fever" marker overload. An AS3 implementation of existing JavaScript extension. Still needs to account for geographic region clustering (not just within a grid). Thanks Laris!]

Republished from Google Geo Developer Blog.
Monday, July 27, 200. 

My name is XIAO Juguang – just call me Juguang. I am a freelance software developer based in Beijing, China. Technically speaking, I’m double sided. On one side, I specialize in knowledge management and business modeling, traditionally using LAMP and now experimenting with offerings like Google App Engine. On the other side, I love visualization in time and space, with charts, trees, graphs, and maps, always using the power of ActionScript/Flex, with the help of open-source projects like Degrafa, Axiis, and Birdeye, and of course, APIs like the Google Maps API for Flash.

A few month ago, Xiaoxi Wu (also from China!) created the MarkerClusterer library for the Google Maps JavaScript API v2 and released it in their open source utility library. This library did automatic clustering of markers placed on a map, so that a large amount of markers wouldn’t overcrowd the map or overwhelm the user. This is a great technique for having a better performing map (see this talk for more tips on improving map performance), and the Flash map community immediately rushed to port the code to ActionScript. Developer Sean Toru posted the first port, a version that was only Flash-compatible, Ian Watkins modified that port to use Flex packages, and then I refactored the code to be more ActionScript-friendly and released it into the open-source library. It’s great when random strangers can collaborate together on a common code goal. :)

To see how the AS3 MarkerClusterer works, try out the demo (shown above). As you zoom and pan the map, you can witness how the markers are clustered and re-clustered. To learn how to use MarkerClusterer on your own map, view the source code of the demo. To use the library, check out the source code and import it into your project.

The current algorithm is quite simple, just clustering markers in a grid and using static images for the cluster markers. Future extensions could include support for regional clustering or using arbitrary DisplayObjects for the cluster markers. If you’re interested in extending the library, join the project.