Creating custom legend to map to custom css torque heatmap

Question

I'm hoping someone can help me with html to create a legend that maps to a custom heatmap I made using the style CSS. When I try using the default legend, it neither maps to the right custom colors, nor does it have values from my torque-aggregate-function.

Picture of map + legend here: https://cl.ly/1l1v062Q3K11

Custom CSS here:

Map {
  -torque-frame-count: 1;
  -torque-animation-duration: 30;
  -torque-time-attribute: "cartodb_id";
  -torque-aggregation-function: "sum(total_visits)";
  -torque-resolution: 3;
  -torque-data-aggregation: linear;
}
#layer {
  marker-width: 12;
  marker-fill: white;
  marker-fill-opacity: 1;
  marker-file: url(https://cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/alphamarker.png);
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
  image-filters: colorize-alpha(blue, cyan, lightgreen, yellow , orange, red);
}

Answer 1

Replacing count(1) with another Torque aggregation function is a hack. Because what aggregation by pixel is doing is just that aggregating dots within pixels. But if you want to make the operation "works", you need to normalize your total_visits field because Torque only accepts a range of values between 0 and 255.

Regarding the legend issue, you can pass the hexcolor codes instead of the color names:

image-filters: colorize-alpha(#4b2991,#872ca2,#c0369d,#ea4f88,#fa7876,#f6a97a,#edd9a3);