3/20/2024 0 Comments San francisco parcel mapOverall, I found mapping in D3 to be surprisingly fun, with an interesting set of challenges that led to interesting insights and workarounds. In the end, I found that the best way to present high-detail maps in D3 is as static SVG visualizations, which allows the user to use the browser window to zoom in without pixelation. There isn’t a way to implement tiling or smooth zooming, both of which impact the usability of a map this detailed. Interestingly, landmarks can be seen as well - the Palace of Fine Arts, built for the 1915 World Fair, can be seen as a uniquely-shaped, magenta-colored parcel at the top of the map.ĭ3 isn’t particularly well-suited to making maps, and performance suffers when rendering large GeoJSON/TopoJSON files. Meanwhile the areas with a lot of recent construction, such as SoMa, have a lot of bright blue. Historic neighborhoods like Western Addition are full of red colored parcels, indicating older buildings. It’s obvious at a glance which neighborhoods were more residential and which were more commercial, and it’s easy to identify clusters of high density housing (corresponding with high rises near SoMa and, surprisingly, Lake Merced).Īdditionally, the building age patterns that I observed in the building-level visualization are further emphasized here. The final product was an interactive visualization that allowed users to see the year built, land use (zoning), and number of residential units for each parcel (see it live here: SF land use map). I decided to just visualize the parcels themselves without any buildings, since the parcel footprints fill more space. While the level of detail is fantastic, the irregular shapes of the buildings and the large amount of empty space actually make it harder to see trends across neighborhoods, so I wanted to try and make a version that showed this information more clearly. I also wanted to add an outline of San Francisco to the map, since the building footprints dataset did not include the coastline.īy using MapShaper, a handy tool I discovered when I made a map of Westeros a few years ago, I was able to combine the two GeoJSON files and re-export the combined file as a TopoJSON, which reduced the size to around 44mb.Ī screenshot of the final product can be seen below (or click the link to see a live version of the SF building ages map). This caused very long loading times, and I very much wanted to avoid the user having to download such a large dataset to view the visualization. The building footprints dataset contained detailed shapes of almost 180,000 buildings, and removing all the unnecessary columns only reduced it to 170mb from an original 230mb. Loading and displaying such a large dataset was a huge challenge. Using this method I was able to associate each building in the building footprints dataset to the year it was built, using data from the land use dataset. I came across a paper that described this precise dilemma and suggested a simple solution, which I ultimately adopted: assign each building to the parcel containing its centroid. Meanwhile, there is no direct mapping for which building corresponds to which parcel of land, since some buildings may not be contained within one parcel. Most of the useful information (such as the year built and the number of residential units) is associated with the parcel of land as opposed to the building itself. San Francisco’s open data sources are not suited for building-level visualizations, and as I soon discovered, this was the main reason why no San Francisco building age map had been created yet. The city I chose to map was San Francisco, because at the time of writing no one else had done it yet. Inspired by a recent Reddit post about visualizing building ages in Amsterdam, I decided to try my hand at creating this style of map using D3.js.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |