Making your own visualization of Project Sidewalk data

This is a (work in progress) guide showing some of the ways that you can make your own visualization of Project Sidewalk data.

To start, we'll show a simple example using the website kepler.gl because they make it easy to get started and make a nice looking map quickly! After following this guide, you should be able to make a map that looks something like this:

1. Go to the Project Sidewalk API page for the city you want to look at. For example, https://sidewalk-sea.cs.washington.edu/api.

2. Choose one of the API endpoints we provide and download the data. For this example, we'll use the 'Access Attributes' API endpoint, linked below. Feel free to edit the lat/lng values to cover the area you care about! Your browser may just open up the data in a new tab. Just hit "Ctrl-S" to save the data.

   https://sidewalk-sea.cs.washington.edu/v2/access/attributes?lat1=47.615&lng1=-122.307&lat2=47.623&lng2=-122.293

3. Head to https://kepler.gl/demo

4. Start by saving your map so that you don't lose progress if you refresh the page. To save...

   1. In the upper left corner, click on the 'Cloud Storage' icon and then click 'Save'

      

   2. It will ask you to log in to a dropbox account where you can save the map and data.

5. Click 'Add Data' on the left-hand side and upload the Project Sidewalk data you have. You should now see something like this:

   

6. Now let's make things look a bit nicer! Click on the layer you've added on the left hand side (mine is called 'attributes'). It should bring up menu with various things you can change about the look of the data. We can start by changing the radius from 10 to 3 so that they are more appropriately sized.

7. This last step is a bit annoying, but not terribly difficult. Let's make the colors match the colors of the appropriate label types in the Project Sidewalk data!

   1. On the left-hand size, click on 'Fill Color', and in the 'Color Based On' field, choose 'label_type'. Note that the default color palette does not match the Project Sidewalk color scheme!
   2. In the top-right corner of the map, click on the 'show legend' icon. This shows which label types are present in the data you've downloaded. Count how many label types there are, then click on the visual color palette on the left-hand side, and change the number of steps to be the number of label types.
   3. These don't actually match our colors, so turn on 'Custom Palette'.
   4. Now we can just match up the colors with the correct label type that you see in the legend (they are in alphabetical order)! Here are the hex codes for each label type (note that you might not need all of them):
      • CurbRamp: #3FDE24
      • NoCurbRamp: #E92771
      • NoSidewalk: #9983EF
      • Obstacle: #23A1CA
      • Occlusion: #B3B3B3
      • Other: #B3B3B3 (again)
      • SurfaceProblem: #F18D04

You should end up with a map that looks something like this!