CARTO VL Cluster Workshop

Introduction

This is the content for the CARTO VL Webinar "Discover the Power of CARTO VL for Visual and Interactive Analysis". Through these seven steps, you'll understand how cluster aggregation works and how to create an interactive map.

Data

We're using a dataset based on the Police Department Incident Reports of San Francisco for 2019. They have a great map visualization. You can take a look to it in order to understand the data we're going to be working with.

Workshop Steps

1. Create the basic structure from an example

• CARTO VL examples
• Source

2. Add your credentials and change settings

• Getting Started Guide
• Source

Notes:

• For this visualization, we have decided to use the darkmatter basemap.
• You can get the center and the zoom of your map by going to the console and accessing the map object.

3. Style by using cluster count

• clusterCount Expression
• Source

Notes:

• We use sqrt(@cluster_count) in order to decrease each feature size proportionally.
• Try change the resolution value and see what happens.
• Let's change the styles: remove the stroke, change the color, add opacity.

4. Add labels using Mapbox

• Points labels CARTO VL example
• Label Cluster Count
• Mapbox label documentation
• Source

Notes:

• First, let's use the viewport features expression to get the cluster count of each cluster feature present in the viewport.
• Second, copy the code from the Label Cluster Count example above to set up the labels layer when the layer is loaded.
• Understand the how the filter style property works.
• Zoom in and zoom out to see the changes.

5. Use clusterMode expression to color the clusters

• clusterMode expression
• Source

Notes:

• If we would like to change the width depending on the $incident_category column instead of the cluster count, we'd have to use it along with clusterMode because it has been already aggregated.
• Filter labels: difference between string and number

6. Visualize incidents by day using an interactive based filter

• Interactive based filter CARTO VL example
• Source

Notes:

• We're coloring now the clusters based on the $incident_day_of_week column (from 'Monday' to 'Sunday')
• To improve the visualization style, we're adding a border to the features with the stroke style properties.
• Let's use buckets in the color ramp to sort the legend by day of the week, which is saved in the days array.

<section>
  <div id="controls">
    <ul id="content"></ul>
  </div>
</section>

7. Use a dropdown to filter by categories

• Source

Notes:

• We set an initial filter of 0 in the viz style to avoid a flickering effect when updating the map at the beginning
• We're adding a new method generateSelectors that we're using after generateLegend.
• We're also adding updateFilter method to reuse it.

<ul class="dataview">
  <li>
    <label class="label"><p>Incident Category<p></label>
    <select id="js-incident-selector" class="select"></select>
  </li>
</ul>