Links

Build a dashboard with a local CSV file

Context

In this tutorial we are going to showcase how to upload a local CSV file to your CARTO Data Warehouse and then use it to build an interactive dashboard with our map-making tool, Builder.
As a local CSV file in this example we are going to use a dataset with a sample of CARTO Spatial Features dataset in Las Vegas. You can download this file from here.

Steps To Reproduce

  1. 1.
    Go to the CARTO signup page.
    • Click on Log in.
    • Enter your email address and password. You can also log in with your existing Google account by clicking Continue with Google.
    • Once you have entered your credentials: click Continue.
  2. 2.
    From the Navigation Menu in the left panel, select Data Explorer.
  3. 3.
    Click on the icon for uploading a local file that you can find at the top of the Connections tab.
  4. 4.
    In the modal screen, select the local file you want to upload and give a name to the imported table. The file will be uploaded to the CARTO Data Warehouse, and as mentioned in the introduction of this tutorial, we are going to use a dataset with a sample of CARTO Spatial Features that you can download from here. Once you have selected your file, lick on Continue.
    Note:
    When you import a file, the Auto-guessing option is always enabled by default. This option allows you to automatically guess column data types in the imported table.
  5. 5.
    Set the location and name of the output table. Once you have completed this configuration, click on Save here.
  6. 6.
    Review the details before starting the importing process and then click on Import. This will start the importing process, you can minimise the modal screen and continue working in CARTO while the file is being imported.
  7. 7.
    When the import process completes, we can click on Access Dataset from the process window, and it will take you to the page of the imported table in the Data Explorer.
  8. 8.
    We click on Create map in order to start a map in CARTO Builder with the table loaded as a first layer.
  9. 9.
    We can change the layer name to something like “Spatial Features - Las Vegas”.
  10. 10.
    We can also then start styling the layer. We click on Layer style and we are going to start by styling the hexagons based on one attribute. For that we click on the “three dots” icon in the Color section and we select that “Color Based On” the field population.
  11. 11.
    We change the Opacity to 0,6 to be able to visualize the information from the basemap (which we will change on a later step).
  12. 12.
    We are going to activate the “Height” option and define “Height Based On” the field elevation. We configure the “Elevation Scale” to be 20 and the “Height Range” between 0 and 500.
  13. 13.
    We can modify the visualization to be a map in 3D by modifying the “Map view” options.
  14. 14.
    We are now going to add some widgets to the map in order to be able to filter out the data and get some insights. Let’s now move to the “Widgets” section.
  15. 15.
    We are going to first add a Formula widget that sums the total population. We modify the “Formatting” to the “12.3k” format.
  16. 16.
    We change the widget name to “Total Population”.
  17. 17.
    We add a second widget to the map, now based on the “Histogram” type. We select the field elevation and modify the number of buckets to 12. We rename the widget to “Elevation”.
  18. 18.
    Let’s add a third widget to the map! We will now select the type “Category” and select the field urbanity from our table, leaving the operation to “Count”. We change the widget name to “Urbanity level”.
  19. 19.
    We are going to add a final “Histogram” widget. For this one, we are going to pick the field prec_apr from our table and change the number of buckets to 12. We change the name of the widget to “Avg. Precipitation April”.
  20. 20.
    We are now going to design the popup/info-windows that appear when we hover over the hexagon cells from the H3 grid. For that we move to the “Interactions” section.
  21. 21.
    In the Tooltip we are going to select the following fields: population, urbanity, elevation and prec_apr.
  22. 22.
    Check that now when we hover our cursor over the cells we see the information from the selected fields in the previous step.
  23. 23.
    We are now going to select the type of basemap that we want for our map. We move to the “Base maps” section.
  24. 24.
    We can pick basemaps from different providers, such as CARTO, Google Maps and Amazon Location. For example we are going to modify the default basemap by CARTO’s Voyager edition.
  25. 25.
    Another cool functionality of CARTO Builder is the ability to have a dual map configuration. We can switch to this mode by selecting it from the “Map view” options.
  26. 26.
    In order to have a different visualization in each of the maps. We are going to duplicate our current layer.
  27. 27.
    We rename the layer as “B Layer”.
  28. 28.
    We now ensure that each of the 2 maps is visualizing a different layer. For this we click on the button Show layer panel.
  29. 29.
    In each of the maps we make visible only one of the layers.
  30. 30.
    We are going to modify the second layer. For that we click on Layer style in one of the options for the layer named “B Layer”.
  31. 31.
    We are going to style the color of the layer based on the field tavg_apr (i.e. average temperature in the months of April over a period of 20 years). We can pick a different color palette.
  32. 32.
    We are going to use the attribute prec_apr (i.e. average precipitation in the months of April over a period of 20 years) as the Height.
  33. 33.
    Now that we are done styling our layers, we can hide the editor panel by clicking on the icon below and start operating the dashboard through the widgets.
  34. 34.
    For example we can filter the layers in order to analyse the Rural and Remote areas with higher precipitations in April.
  35. 35.
    Or we can filter the Very high density urban, High density urban and Medium density urban areas at higher elevations.
  36. 36.
    We can finally change the privacy settings of the map or even publishing it online by clicking on the “Share” options.
  37. 37.
    We select the option to make this a “Public map”, which we then can share by providing an URL.
  38. 38.
    Finally, we can visualize the result.