Shadow in Downtown NYC

You can download the data here to quickly run this example locally. Please refer to the GitHub repository for instructions on how to start the Urban Toolkit on your machine.

Step 0 – Open web editor

Step 1 – Adding background layer (water)

To start rendering our scene we are going to add a basic water layer containing the ocean.

The water layer as well as all other layers were previously generated using the Jupyter API. In order to load it we have to add:
– A knot that contains a pure physical layer (no thematic data). It specifies that we want to output the water layer on the objects level (we want the shapes not coordinates).
– A reference to that knot on the map component.
– The type of interaction we want to have with the knot (none in this case).

* All required changes are highlighted in red. Sections of the code where nothing changed have “…”. After adding them hit Apply Grammar.

Step 2 – Adding other background layers (parks and roads)

Just as we did in Step 1, we are going to define and render pure “knots” for parks and roads as well. The steps are analogous.

* All required changes are highlighted in red. Sections of the code where nothing changed have “…”. After adding them hit Apply Grammar.

Step 3 – Adding buildings

Adding a 3D layer with the buildings is as simple as adding water, parks, and roads. The data for this Step was retrieved from OpenStreetMap (OSM) and parsed by the JupyterAPI.

* All required changes are highlighted in red. Sections of the code where nothing changed have “…”. After adding them hit Apply Grammar.

Step 4 – Adding shadow data on top of the buildings

In all previous Steps we added pure “knots” that did not have thematic data. In this example, we are going to add the results of a shadow simulation on 03/20/2015 accumulated between 10:00 and 11:01 on top of the buildings. That requires some small changes to the knot definition:
– A new input layer for the thematic data.
– A spatial_relation to define the spatial join that will link physical and thematic layers.
– An operation to indicate how to aggregate the result of the spatial join (none, because we have a 1:1 relation).
– An abstract flag to indicate that thematic data is being joined with the physical.
– The geometry level of both layers is now “coordinates”. Since we want to have a heatmap we need a different scalar value for each coordinate of the buildings.

* All required changes are highlighted in red. All tweaks are highlighted in blue. Sections of the code where nothing changed have “…”. After adding them hit Apply Grammar.

Step 5 – Adding an embedded radial plot

To enhance the analytical capabilities of our system, UTK gives support to the use of customized Vega-Lite plots. To mitigate occlusion problems and minimize navigation we are going to add an embedded radial plot to our system. Notice that we are using plain vega with the difference that it is possible to use keywords to make references to the knots inside the specification. Each plot has four fields: plot (vega specification), knots (id of the knots to be used on the plot), arrangement (where the plot will be located), and interaction. In our case, the arrangement is “FOOT_EMBEDDED” as opposed to “SUR_EMBEDDED” or “LINKED” because we want the plots to follow the footprint of the building.

To access knot data inside the vega specification one can use the structure “knotId_keyword”. The keyword can be “abstract” (the thematic data), “index” (the index of the element on the knot), and “highlight” a boolean indicating if the element of the knot is highlighted. In Step 3 we configure our zip + noise layer to have a “PICKING” interaction which means that we can choose the building to embed the visualization by pressing “t” while hovering over a specific building and the “buildings_highlight” variable inside the vega specification will be true for that object. To change the height of the plot one can use the combination of keys “alt + mouse wheel”.

Final result