carto.js | CartoDB javascript library

You need to get that info using SQL API and PostGIS functions, in general the easy approach is to center the map in the bounding box of your data so that would be sending this query

Apparently Google Maps API provides drawing tools so you can approach the task in a similar way as described in this old (but still valid) blog post.

At the end is all about converting those frontend geometries into INSERT statements and use CARTO SQL API, or more likely put some middelware in between to manage authentication and so on.

There's not much room to improve your styles, the donut chart is needing de-aggregated data which you don't have in an aggregated visualization. And on top of that, CartoCSS is not capable of rendering easily the "donut parts" because that would very likely involve quite a lot of trigonometry computation to set angles to start/stop the different parts of the chart. SalesQuest uses a leaflet plugin and traditional marker rendering directly in the browser loading GeoJSON data, instead of using CARTO Maps API. So to achieve that visualization you need to render the proper data using SQL API and then use pure Leaflet coding to render it as markers.

A quick google search gave me at least this and this to inspire yourself.

Does same SQL work in Builder? From where did you get it? Without seeing actual data one can only speculate what can be done, also your field names are not very helpful here. Or is it auto-generated SQL from Builder? I'm not sure if it is good idea to hack around that one, even if it works now, then these internal structures can change anytime. In general there are following scenarios how you get data to map:

• Importer tries some heuristics from table structure to add it to map. For example if you have column names latitude and longitude, then the table will automatically geocoded, i.e. geom fields are filled and the table just works. Or if there is column city with English city names, then there is good chance also that it will be on map. So the easiest way is to use these field names, if you already have it in your data.
• You can persistently geocode table using Carto SQL API, with something like UPDATE {tablename} SET the_geom = cdb_geocode_namedplace_point({city_column}, {province_column}, {country_column}) in the case of named places, or if you have wgs lat/lon fields then UPDATE {tablename} SET the_geom = st_setsrid(st_point({lon_column}, {lat_column}),4326). This way the the_geom will be filled. To make it sure I would also do UPDATE {tablename} SET the_geom_webercator = st_transform(the_geom, 3857). Of course you can use here st_buffer etc.
• you can do also live geocoding query as you seem to try now, just be sure that there is unique cartodb_id, proper the_geom (in wgs84) and the_geom_webmercator (in epsg3857 projection, just as you have). This makes more sense if your data is somehow dynamically updated, otherwise I would do one-time UPDATE to the table.
• use Builder geocoding analysis. This creates another 'virtual' live dataset with geocoded data, and this can be used in map view or further analyses. I'm afraid this cannot be done/shown in carto.js maps, this is within Builder only.

p.s. you can find more carto-related posts in https://gis.stackexchange.com/questions/tagged/carto

The confusion here is that documentation at https://carto.com/docs/carto-engine/carto-js/ refers to version 3 while the React example you saw is using version 4 which documentation is now living here https://carto.com/developers/carto-js/

We are in the process of deprecating /docs, sorry for the inconvenience.

Regarding your question the answer is that nowadays we don't have a way to instantiate Builder maps wich CARTO.js. That may change in the future but at this moment we don't support viz.json.

Disclaimer: I work at CARTO

The problem line is