Skip to content

Instantly share code, notes, and snippets.

@makella
Created July 3, 2018 13:24
Show Gist options
  • Save makella/20e5ef1bab333d559e67e3d81ed9df69 to your computer and use it in GitHub Desktop.
Save makella/20e5ef1bab333d559e67e3d81ed9df69 to your computer and use it in GitHub Desktop.
CARTO VL Examples

Animations

Animated Storm tracks

CARTO Locations Madrid 2018 Attendee Map

Hightlights

This map shows where attendees came from to CARTO Locations 2018 in Madrid.

  • Animated lines!
  • Custom colors (Locations colors) with interpolation

Denver parcel development over time

Detroit buildings over time

Highlights

  • Animated polygons!
  • Metadata operator (globalpercentile)
  • Bivariate: time = year built, color = price/sqft or sqmt (?)

NYC Taxi Pickup/Dropoff colored by dropoff and pickup

Multi-variate Taxi pickups

Ocean bathymetry with movement effect

Highlights

This map symbolizes ocean bathymetery. Since the ocean is forever active, and moving, we wanted to demonstrate how we could animate the points to give that sense of movement.

Hurricane Harvey rainfall animation

Highlights

Animated rainfall data from Hurrican Harvey between August 24 - August 29.

Hurricane Harvey sum of rainfall by county + value-by-alpha of pop/sqmi

Highlights

Rainfall totals from Hurricane Harvey aggregated to counties. The animation is based on total rainfall (would be better with day). Counties with more rain draw first to lower rainfall totals. The opacity is based off population density (total pop / area). The "brighter" polygons have higher populations.

Historic state boundaries over time (1780-present)

Also, can try:
color: ramp(buckets($terr_type,"Territory","Unorganized Territory","District of Columbia","State"),[#E43872,#F8CA00,#3969AC,#9bbd4d,#994E95])

Multi-scale animation with color interpolation

Multi-scale animation by time of day and top category

Metadata Operators

United States of Diversity

US Population by County

This map uses viewportMAX to draw symbol sizes proportional to population values in the current viewport and also applies the same to the color and outline width. When you zoom in, you will see the map update all of its symbology with the values in the current viewport

World population with globalMIN, globalMAX

zoom()

Size symbols proportionate to zoom

Linear interpolation of symbol size based on a zoom range

Linear interpolation of color based on zoom range

Hightlights

This map demonstrates how you can change symbology through zoom.

  • at zooms <= 10 points are colored red
  • at zoom >=14 points are colored yellow
  • between the zooms, the colors are interpolated

Interpolate color and marker width based on a zoom range

+MAP

Zoom, color, metadata

Good example of introducing detail about the thematic layer through zoom

Other

United States of Ethnicity

Four color therom tester by @alrocar

Percent poverty by US County animated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment