Beautiful maps in minutes: Meet Kepler.gl

SAN FRANCISCO — Shan He may hold Silicon Valley’s most meta job.

“When I started out, I was building maps. Then I moved on to build tools to build maps and now I’m doing tools to do tools that build maps.”

He, who dumped brick-and-mortar architecture studies for computational design, joined Uber as founding member of the data visualization team in 2014. She went on to construct Kepler.gl, a tool that helps make “beautiful maps in like 10 seconds” — without any coding. Built using the deck.gl WebGL data visualization framework, the ride-sharing company recently open-sourced the geospatial toolbox that can be used with QGIS, Carto and Mapbox Studio. Given its origins, it’s easy to see why Kepler excels at large-scale visualizations centering on geolocations.

She set the stage for a recent standing-room-only meetup hosted by Mapbox for two case studies on what the tool can do and how you can get involved.

Catching air inside Uber

Chris Gervang, software engineer at Uber, started playing around with Kepler.gl without alerting his data vis team colleagues to his tinkering. Gervang works on one of the Valley’s most (ahem) pie-in-the-sky initiatives: an urban air transportation project dubbed Elevate. The second Uber Elevate summit featured a keynote by the head of aviation, Eric Allison, that would’ve fallen flat if not bolstered with stunning maps.

Titled “Scaling Uber Air,” it featured data visualizations to show everything the company knows about how people move around in cities and how to use that to model the future Uber air network.

“We were extremely careful to use realistic data for our visualizations, to show what we think Uber Air can look like using our most current research,” Gervang says.

To produce the visuals, they used images captured from a cinematography app, on top of Kepler.gl. in a four-step process: planning the story, using Kepler.gl to visualize the data in motion, then a video editor to add effects that weren’t available in a browser and, finally, put them into a slide deck to add graphics. His team then repeated the process for all 17 visualizations in the keynote.

One of those maps showed an average weekday in Los Angeles and Orange counties, 45.8 million unique trips happen over a 24-hour period aggregated, into one kilometer by one kilometer tiles — here’s that bit from the keynote, it’s even more impressive with motion. The entire keynote or slides are also available.

Lime time

If Uber is hated enough to regularly station guards outside its Market Street headquarters, Lime has the distinction of being one of three scooter sharing companies recently booted from the streets of San Francisco.

Aash Anand, head of analytics at Lime, says the company started out in 2017 in a much less contentious space, just a “normal, not electric, bike sharing startup.” One of the visuals showed a Kepler-made map of bike patterns spidering around Greensboro, North Carolina, the first Lime town.

Anand says that speed is what gives Kepler an edge — he put together his presentation for the meetup together on the 40-minute Uber ride from Lime’s San Mateo headquarters.
“That’s actually the biggest value of Kepler has added to my life as someone who works with data,” he says. “When Lime started really growing there was no time to make things look pretty and perfect, some of these were done at lightning speed, at the request of someone in a crisis.”

What’s next

The team at Uber hopes mapmakers that will adopt Kepler — and provide feedback. As they’re planning out the next set of features —including making sharing a lot easier more visualization types, especially “cool things like flight paths” Shan He says— they are asking folks to take a survey and hashtag any projects with #keplergl. If you’re ready to try it out, try the demo or check out the GitHub repository and the tutorials on Vis Academy, a hub for visualization tutorials and classes prepared by the Uber Visualization team.

Spot the difference: The new Apple maps

As a kid, I had a total thing for those “spot the difference” cartoons.

Here’s a look at what I found with the new Apple Maps for San Francisco, want to play* along?

(*Every attempt was made to frame maps at same zoom level but no scientific-y methods were employed to do this.)

Driving directions from Cupertino to San Francisco

Click to expand. Old version on the left. In the new version the option to show traffic and 3D are always in frame.

Continue reading

Stories, Stats & Scatterplots: Inside data visualization at the Financial Times

Four years ago, John Burn-Murdoch was a journalist who had never written a line of code. These days, the senior data visualization journalist at the Financial Times says he rarely writes anything but code.

While what Burn-Murdoch dubs a “cool journey” sounds a little extreme (from zero to R, on the job, seriously?), he was never strictly a text journalist. He holds advanced degrees in data science and interactive journalism. Before landing at the FT, he worked as data journalist at The Guardian for two years.

On loan from the London headquarters to focus on bias in artificial intelligence and geographical inequality, the spiky-haired, elfin Burn-Murdoch offered a peek inside the workings of the FT data newsroom for about 50 members of the Bay Area d3 User Group.

Continue reading

Adventures in data cleaning: Did the New York Times undercount risky San Francisco skyscrapers?

It looks like the New York Times may have undercounted the number of risky skyscrapers in downtown San Francisco, 48 instead of 39. It’s a seemingly small difference – 20 percent if you do the math – but if it’s significant if you consider how many people work in these large buildings. A June 15 story focused on steel moment buildings cited in a USGS report.

I made a quick map using the addresses from the NYT story, then I wanted to make one that included photos of the buildings. This time I went directly to the report, noticing that the first address wasn’t listed in the story, it seemed like a good idea to see if there were any more discrepancies.

TL;DR

To check how I got them:

  • The USGS report, starting on page 360, in .PDF
  • The .KML file I made, for more fact-checking and map making (pretty please send links to your maps or put them in the comments – I’m a casual mapper, using new tools and working quickly!)
  • Here are the additional nine addresses from the report that weren’t in the NYT story:
  1. The Mills Building, 221 Montgomery Street
  2. 225 Bush Street
  3. 140 Montgomery Street
  4. 120 Montgomery Street
  5. 45 Fremont Street
  6. 55 2nd Street
  7. 555 Mission Street
  8. 611 Folsom Street
  9. 680 Folsom Street

The clumsy adventure

To start, I downloaded the 454-page .PDF, then extracted five pages with the buildings listed by using the >Print>Pages>Save as .PDF function in Preview for Mac. Then I converted the .PDF to .CSV with Sejda. After that, it was time for Terminal to merge the extracted data from those pages into one file with the command:

cat *.csv >merged.csv

Still too messy to be useful without a lot of tedious cleanup:

So I tried the quickest and dirtiest way I know: copy the table from the .PDF into Word, then from Word (where it’s recognized as a table) copy it into Excel.

There are a couple hundred buildings listed, but the ones cited in the story are steel moment frames. Erected before a 1994 building code outlawed a flawed welding technique, they harbor particular risk in a quake of magnitude seven or higher.

From the USGS report: Steel moment frame listed as “Steel MF,” “Steel moment frame” and “MF.”

From there it was a question of sorting the buildings listed as “Steel MF,” noting that a couple are listed alternatively as “Steel moment frame” and one as simply as “MF.” Messy messy messy: also, totally typical. (There were also about 15 more listed as Steel MF in combination with some other reinforcement, since it would require more reporting to figure out if they’re as risky, these were left out.)

Then I checked the addresses against the story, added polygons for the nine new addresses to the previous uMap, downloaded it as a .KML file and started playing around in Google Maps.

The resulting map is a little disappointing. For starters, the polygons from uMap (which uses OpenStreetMap) don’t jibe that well with Google. As for the images – since the real a-ha if you live or work in San Francisco is how many of these buildings you’re in or around – I always forget how bad these are in the noob version of Google Maps. When you’re editing in the map, they are Polaroid-style pop-ups that resize whatever pic you throw in. The published version looks nothing like that and the overall effect with these building shots (all vertical) is horrific. Ugh. There’s no way to resize the window from this version of Google Maps – the alternatives are Google Fusion tables (which wouldn’t solve the problem here since AFAIK it works with points, not polygons) or  programming via the Google Maps API.

Why this happened

So how did the New York Times undercount the number of especially shaky high rises? Going on my experience with newsrooms (long) and with data (short but painful) my first guess is that the USGS mistakenly gave the Times an Excel or .CSV file that was different from what ended up in the final report.

The reporter knew there were enough buildings to warrant a story, somewhere around 40, the graphics person had the file, made the map and those numbers were plugged into the story and fact checked without going back to the published report.

Or there was some glitch between the formats – given how annoying the process of getting information from .PDF into anything – it’s easy enough. Data cleaning is the least interesting, most tedious part of any project. In this case, if I’m right, there are 20 percent more risky buildings than originally reported.

A quickie map of San Francisco’s earthquake prone skyscrapers


See full screen

See full screen – search for San Francisco if you see a world map.

The New York Times recently ran a story about San Francisco high rises – mostly downtown and South of Market – with steel frames that harbor particular risk in a quake of magnitude seven or higher. About 40 of these skyscrapers, erected before a 1994 building code outlawed a flawed welding technique, were cited in an April USGS report.

It’s one of those stories that could’ve used in interactive map at its core, but instead (it’s the news business, kid!) the map was a small, static graphic (see below) and the story ended with a list of the addresses.

Image courtesy NYT.

So here’s a simple map of those 39 steel moment-frame buildings. A few necessary caveats: this is the handiwork of a casual mapper trying out a new tool. I’ve been looking for a way to use OpenStreetMap to make personalized maps and spotted some earthquake maps from the Japanese OSM community with uMap, so it seemed worth a try. It was heavy going for a map made on the fly – the polygon tool was clunky and importing the list as a cleaned up .CSV wasn’t happening.

Still, a few things pop out: A few of these risky buildings are also near construction sites. In OSM, these are shown in sage green. (The light green represents parks.)

The struggle to use the uMap polygon tool is real. This is a closeup of 550 California Street, with a 19-story office building under construction nearby.

The Folsom Bay Tower will be a 39-story, 422-foot (129 m) residential skyscraper.

Park Tower at Transbay will have 43 stories, First & Mission’s Oceanwide Center features 636-foot-tall tower on Mission at First Street and a 910-foot-tall tower on the opposite corner on First Street.

And much like the reporter, shocked to discover the NYT offices are in one of these buildings, there were a few a-ha moments. A family member works in one and I’ve been inside at least a handful recently – an event at Autodesk, a movie at Embarcadero Center, a Wikimedia meetup, met a friend staying at the Marriott, emerged from the Montgomery Street Station in front of one three or four times, etc.

It’s an unscientific sample size of one (well, two if you count the reporter) but would wager that most people who live or work in San Francisco are around, if not inside, these buildings frequently.

How to use mobile app Go Map!! to edit OpenStreetMap

Here’s a quick tutorial for the Go Map!! iPhone / iPad app (v1.5.3) created by Bryce Cogswell and available gratis in the app store.

The short video above shows how to edit in two scenarios – adding information to an entry and adding a point-of-interest. The text below is a mashup of my experience using it and the app’s help section.

Continue reading

Getting started with OpenStreetMap: Making your first edit

If you want to contribute but aren’t familiar with OpenStreetMap (OSM), here’s a tutorial to get you started. There are two quick ways to begin with OSM, you can edit the map with local information or armchair map for Humanitarian OpenStreetMap (HOT.) Either way, you’ll need to create a free account here. This LearningOSM guide is also worth a look.

Method one: Edit what you know

Once you’re logged in, choose your editor. The easiest one for beginners is iD. You’ll be asked if you want the walkthrough before editing – take it! There are more details on settings below in the humanitarian tutorial. Continue reading

Making digital maps with pen and paper: Meet Field Papers

Field Papers is a great low-tech solution for mapping. You chose an area to map, print it, walk outside with the paper copy and mark things up, then scan or take a pic of it with the QR code and it’s added as a layer to OpenStreetMap (OSM). From there you can add your data to the largest public, editable map in the world.

It’s the handiwork of venerable design firm Stamen, who later got together with U.S. Agency for International Development (USAID) for improvements. Because it’s an open-source project whose last major changes were made five years ago and many tutorials showed the previous interface, it seemed like a good idea to test drive it.

The quick slide show above shows how it works — even if you make rookie mistakes like leaving the clipboard in your photo, duh! — the test run taking about an hour total, from figuring out how to position the map to editing in OSM.

It’s been used around the world for large mapathons, where people don’t have smartphones or OSM knowledge — you hand them sheets, they go out mapping, then they hand in the sheets and they’re done. It can be a potential bottleneck for OSM data entry after collection, but surmountable. Potentially it’s also an advantage — you can get a lot of people out mapping but only need a few with OSM knowledge or who want to learn.

Geographer maps San Francisco’s bike politics

Copenhagen has a lot more in common with San Francisco than most people think, says San Francisco State geography professor Jason Henderson.

While many look to the capital of Denmark as a Nordic idyll where the drin of bicycle bells outnumbers the blare of car horns, Henderson says it went through the same political fights to get there. “It’s not a magical unique place, actually, and that opens up the doors to possibility,” says Henderson, who spent a 2016 research sabbatical in Copenhagen and has a forthcoming book about the two cities.

Speaking at a recent Nerd Nite, Henderson gave some gears to grind as San Francisco heads into June 5 elections. Politics matter – how streets are configured, how much car ownership is taxed, how much space is allocated and protected for car parking and who decides these issues – and the daily habits of politicians matter, too.

“It’s important if we’re going to have not just a bicycle city but a truly sustainable transportation city,” he says. The problem? Few San Francisco politicians are really behind the bike as a method of transportation. Continue reading

Why OpenStreetMap matters: Where did Dokdo go?

One of the rocky outcrops under dispute. Photo // CC BY NC

Battle lines have always been drawn over maps. Place names are political, cultural, temporal: from Constantinople to Istanbul and Burma to Myanmar what a place is called matters.
In the digital age, however, you have no idea who is behind the changes and why.  The companies that make the maps millions of people use every day change names following opaque processes that appear to depend on who lobbies loudest at the moment. It’s a strong argument for free, public, editable maps like OpenStreetMap where both the changes and the debate are transparent.

About a week ago, I spotted this poster petitioning Google to put Dokdo back on the map at San Francisco’s Korean American Community Center of San Francisco & Bay Area.

Continue reading