D3.geo: Putting D3 on the Map

maptime_d3_1

Along with baby spinach and pastels, TopoJSON is becoming one of my favorite things. When I first heard the term “TopoJSON”, the word “topography” immediately came to mind. But what the “Topo” actually refers to is geospatial topology, which has more to do with relationships between geographic features than the shape of the earth. When we’re making maps, we’re often representing geography as a series of points (for instance, grocery store locations), polygons (country boundaries), and polylines (roadway networks). TopoJSON is a file format that can be used to organize these representations as they relate to each other spatially.

Why all of this talk about TopoJSON? Aside from being one of the most creative and efficient methods of organizing spatial information that I’ve come across, it goes hand in hand with D3.geo, a JavaScript library for visualizing and interacting with geographic data. At the recent Maptime SF, “D3.geo: Putting D3 on the Map“, Ian Johnson, along with wonderful folks from Stamen and Mapbox, introduced us to the library and got us started making some maps with D3 and TopoJSON.

Ok, seriously I’ll stop talking about TopoJSON now…

Many thanks to Ian + Stamen + Mapbox for their generous spirits and encouragement to dive in, regardless of skill level or experience. I really can’t imagine a more welcoming environment in which to learn about the D3 library, see where others are going with it, and get inspired to start using it.

Here’s what we learned!

  • Examples! Look at them, learn from them, share them. Ian put together a great compilation.
  • TopoJSON/GeoJSON/JSON: Become friends with them! Check out the datasets Ian provided for his tutorial.
  • SVG and Canvas are the two main standards for representing spatial data with D3.geo.
  • The API: It’s fairly technical, but there’s a lot of great documentation on projections, paths, graticules, geolocation…
  • After lots of examples and a quick overview, we started to dig in, following Ian’s instructions on the d3.geo reference page he set up for Maptime. If you’re new to d3.geo, I encourage you to check it out – it’s a great way to get a feel for how things work, and there are neat sliders you can use to adjust inputs. Just click on an input value (in green), and you’ll see a slider pop up. Drag it around, and you can quickly see how things change on the map.

Additional Handy Tips from Ian: 

  • Don’t be afraid to copy + paste to learn
  • Don’t be afraid to ask for help on the mailing list or on stackoverflow
  • Be sure to post your code to bl.ocks.org to make it super easy for people to help
  • Ian talks about datavis + d3 on twitter: https://twitter.com/enjalot
  • Check out these tutorial videos!

And finally, I was so inspired after Maptime, that I built my very first D3 map showing Maptime locations around the world.

Here’s how I did it:

  • I visited Mike Bostock’s let’s make a map tutorial
  • And then downloaded some data from the Maptime Github and Natural Earth
  • From there, I converted Shapefiles to GeoJSON, and consolidated the GeoJSON as TopoJSON (just following the steps in the tutorial)
  • Using a combo of the tutorial examples, and the fancy new skills I picked up from Ian and the Maptime crew, I made a map!

If I can do it, you can too. :)

Bulleted Hyperlink Madness (in no logical order):

Maptime Show & Tell Night

turnip

In the second grade, I was assigned a vegetable plot in my elementary school’s garden. There I planted turnip seeds (I don’t think I was particularly fond of turnips, but my guess is that they’re easy enough for a second-grader to grow). To everyone’s surprise, on harvest day it was discovered that my tiny garden plot had yielded a GIANT TURNIP, approximately the size of my 8-year-old head. You can probably guess what I brought to show & tell that week.*

Maptime Show & Tell night  (June 4th, 2014) was FULL of giant turnips, not in the tuber sense, but more so in the uncommon degree of quality and thought put into every project and idea that was shared. It was certainly a memorable Maptime! Here are some of the nuggets:

Oakland Ring Map

Made by Nick using ArcGIS. Nick works at the Urban Strategies Council.

ringmap

An Interactive Map of Outkast References to Atlanta

Sheffield Hale had this idea. Track him down if you want to help!

sheffield

Berkeley Street Name Project

Michael Arnold demoed his map of unresolved street name mismatches between OpenStreetMaps and Berkeley centerline data.

osm

Bo’s 3D OSM Map

Bo Huang showed a 3D interactive map using OSM.

bo

A Through Hike of the Pacific Crest Trail

Chris Henrick demoed an interactive map that traces an epic hike along the Pacific Crest Trail.

chrishenrick

Random But Equal

Random but Equal is an Urban Strategies interactive map visualizing the margin of error in ACS data by randomizing poverty distributions in Oakland. Clicking on the “Randomate” button produces a new map that shows a likely distribution based on the ACS estimates and MOEs.

randombutequal

Matt’s Bl.ocks

Matt makes lots of neat maps!

mattsblocks

Getting Lost and Exploring Place

Ramune Rastonis talked about her thesis project on navigation and getting lost. As part of her project, she created navigation and mapping devices to experiment with sense of direction and exploration, include a compass that always points toward home and a map that lets you “erase” the city by traveling along new routes.

gettinglost

Origins and Destinations

Amy Smith and Pam Dalal from Fehr & Peers showed some maps of origin and destination data for a transportation planning study in Orange County and asked for ideas on different ways to visualize the data interactively, such as using Shiny and D3.

 

Handy Links that Came Up in Conversation

Natural Earth Data

Leaflet Marker Cluster

Shiny

NACIS 2014 Annual Meeting

 

Thanks to The Noun Project and Oleg Frolov for the turnip icon.

 

*Note: The relevance of the turnip story is debatable. I’m not sure if the reason behind this particular turnip’s major impact on my life was because I’m from a small town or if the turnip was really that impressive…

State of the Maptime!

beth-lyzi
Beth & Lyzi gathering info from the Maptime community at State of the Map

State of the Map came and went in a blur (as did the past few weeks). I flew in on a redeye on Saturday night, then operated solely on caffeine and adrenaline on Sunday. Even with the sleep dep and the neck cramps from plane sleeping, it was totally worth it for one big reason: finally getting to meet many of the Maptime organizers and enthusiasts from all over the country, in person, and actually talk face-to-face about Maptime. (OMG!)

This face time thing might seem like no big deal, but for me it really was. When I first started Maptime almost a year ago, I never in a million years would have imagined that it would blossom into a community that spans multiple cities. Seriously, all I was thinking about was making maps with my friends. (Important note: I’m endlessly humbled and amazed to learn that a whole network of people just want to make maps with their friends just like I do.) Anyway, organizational systems or guidelines or manifestos or codes of conduct weren’t exactly top of mind. As a result, I’ve found myself kind of stumped when suddenly new friends from all over the country started to ask about those things. Plus, since it’s really all of us who have made the thing together, those are questions that are not just for me to answer. I may have started the thing, but Maptime as a movement is a phenomenon that happened all on its own.

Meeting face-to-face allowed for at least the beginnings of that conversation to happen in a way that is simply impossible to do via hangout / Skype / phone. Technology, I love you, but no, you can’t replace the feeling of being with actual people in actual space. Not yet.

So have we come up with definitive answers? That hasn’t happened yet either, but we’re on our way. That said, we’re starting to get an idea. Lyzi, before the meeting, had a great idea of collecting answers to the following question from all Maptime organizers:

What does Maptime mean to you?

maptime-2

From the answers she collected, and from our open discussion at State of the Map, here’s the shape of what we’re thinking.

Maptime is about…
Helping each other
Learning from and teaching together
Making a safe space for learning
Making maps more democratic
Making the learning process for maps easier
Bringing the Geo community together

An important flip side to this is what Maptime is not, which we started to flesh out as well.

maptime-not

Based on our discussions, Maptime is not about:
pyramid schemes
jargon
judgement
getting other people to do your work for free <–NO
being too technical
advertising
heckling
sales pitches
arguing
violence

(These are also just good guidelines for life.)

Next step here is to create a Maptime Manifesto and a code of conduct, all based on this community input. One thing we are all solid on: within the business landscape of the online geo community, Maptime is neutral ground. We’ll likely always have sponsorship and support from great companies like Stamen and Mapbox and ESRI and others, but we want to remain an independent entity to keep the focus on learning and bringing people from all of these organizations (and more!) together in pursuit of open source geo education.

Organizers are also now really rallying behind getting content on this site (maptime.io) and on github.com/maptime, so keep an eye on these spots for more materials than even I can keep track of! Not to mention updates on how to create your own Maptime and more.

People creating their own Maptimes is probably the most exciting part of all of this. We are now popping up in more cities than ever! The pics above show all of the cities represented at the SOTM Maptime meeting, and here are all the cities that are currently getting started:

Atlanta // MY HOMETOWN! YEAH DIRTY SOUTH! *coughs*
Baltimore
Cape Cod
Chicago
DC
Toronto
Salt Lake City
Windsor-Ontario

This means we’re officially international (even if just in North America). In well under a year. Mind. Blown

I’m excited to see where we this experiment in teaching and learning together goes next. Thanks to everyone who has supported us so far.

Maptime Bites

Examples, examples, examples. When a good example comes along, we like to share. Here’s a short list of some ideas MaptimePDX has cooking with the Leaflet and Mapbox JavaScript API. Note that each of these examples comes from a short snippet of code in a GitHub repo we call bites. Each bite is a standalone example written in basic HTML, CSS, and JavaScript and links directly to the repo. Most of these are implementations of the Mapbox JavaScript API examples but any example will work. You can contribute to the repo by making pull request and include your example.

1. Basic Map – you get the picture.

2. A basic Mapbox map centered on pdx with gridlayers and gridcontrols.

3. Foursquare Powered Map – great for morning Maptime locating.

4. Maptimes All Over the World

5. Firebase and Mapbox Example

6. Embedding iFrames in Tooltips w/ Mapbox.js – clean the code before it gets to the tooltip.

7. Shaky Circle Markers – because earthquakes.

State of the Maptime at State of the Map

2014 State of the Map Logo

State of the Map! Next weekend! We’re excited to join hundreds of people who love maps just as much as we do.

We’re also excited to engage in an open discussion about Maptime, inspired by the many questions that our community is asking us. How does it run? How can I get involved? What if I want to start a Maptime in my city? Even people organizing have questions. What are the goals? Where will we go next?

The discussion will happen during a Birds of a Feather session, aimed to happen at 4pm on Sunday. We’ll take some time to talk about what we’ve all learned doing Maptime, and to think about the map we want to make for the future. To kick things off, fabulous geo lady and MaptimePDX founder Lyzi Diamond will be giving a lighting talk about Maptime on Saturday at 5pm.

Maptime organizer & teacher Alan McConchie will be talking too:

Along with many friends of Maptime including (but not limited to) Eric Theise, John Firebaugh of Mapbox & Eric Rodenbeck of Stamen.

So many things to learn and talk about – we look forward to seeing you there! For those who can’t be there, look for our discussion recap shortly after.

Getting ready for State of the Map!

In just under a month, hundreds of OpenStreetMap users, contributors, community members, and leaders will convene in Washington DC for State of the Map US…and Maptimers will be among them! A bunch of us are even on the schedule. We’ll also be putting together a Birds of a Feather session on Sunday, April 13. Stay tuned for more info!

(Note: Maptime was conceived at State of the Map last year, in 2013, so this is kind of like an anniversary.)

Anatomy of a Web Map

Screen Shot 2014-01-23 at 12.03.30 PM

Are you brand new to web mapping? Want to learn the very basic fundamentals about how web maps work? Excited to dive into coding but need a framework to get started?

[Read more...]

Ok seriously, we need a logo and stickers.

One of the first things that needs to happen this year is, MapTime needs some stickers! Here are a couple of things I threw together last year:

Screen Shot 2013-11-12 at 2.14.20 PM

maptime world equatored

Most people at Stamen like the rainbow one, but I like the one with the world. What do you think? Have another idea? I’d love to see it! Help us make this happen this year!

New Year, New Blog

It was State of the Map US 2013 when I had the idea for MapTime: just time for people to get together, once a week, to learn how to make maps. In the months that followed, MapTime kind of exploded: in San Francisco, our weekly meetings fill up the Stamen studio, and there is often a waiting list. More MapTimes have sprung up in cities around the country, including Portland, New York, DC, and Cleveland. In Portland, in  a group started by now Code For America fellow Lyzi Diamond, there is now a second group. There may be an Oakland group springing up in the Bay Area. Clearly there is a demand for better resources to learn digital mapmaking, and it’s exciting that MapTime is helping to meet it!

With more meetups come more questions: where should we put our lessons? How can we best share resources? Is there a template for people who want to start their own MapTime?

While answers to these questions are still in formation, it does seem like there needs to be a better hub for sharing these resources, and that’s what this website is for. The idea is, if nothing else, to post everything here, link to GitHub for projects, perhaps aggregate Twitter or any other feeds that may be emerging. Like all of MapTime, it’s an experiment, and like all things in the universe, it is subject to change.

In the meantime, keep your eye on this site! If you have ideas, leave us a comment or Tweet at @maptimeSF.

Happy Mapping!
Beth