CARTO makes D3 maps a breeze

Anybody who loves maps and data can’t help but notice all the beautiful visualizations people are making with D3 right now. Huge thanks to Mike Bostock for such a cool technology.

We have done a lot of client-side rendering expirements over the past year or so and have to say, D3 is totally awesome. This is why we felt it might be helpful to show you how easy it is to use D3 with CARTO. In the near future, we’ll be adding a few tutorials for D3 to our developer pages, but for now, let’s have a look.

Creating your first map

Using CARTO’s SQL API, you can load GeoJSON straight from your CARTO table into your D3 application. CARTO will turn any of your geometries into valid GeoJSON on the fly through the SQL API. All you have to do is include the format=geojson parameter on your requests. From there, making maps is simple and you can use D3’s Ajax support to directly access your data from CARTO as follows,

d3.json(" * FROM table_name WHERE the_geom IS NOT NULL&format=geojson&dp=5", function(collection) {"#layer_id")
    .attr("fill", "violet")
    .attr("d", path.projection(xy));

Paired with d3.geo, you can quickly develop maps. If you are eager to dive in, take a look at a few code examples: basic Choropleth, Bubble map, and Earthquakes.

3D map of new york subway

TopoJSON support

We are actively working on supporting TopoJSON in CARTO and when deployed, this will open the door to even faster D3 maps. There are a few good TopoJSON based tutorials on the web already, and as soon as we add support in CARTO we will add a couple more.

Client-side simplification

Many of you have probably seen some of the cool client-side simplification work that is being done. We want to make these sorts of capabilities available easily to CARTO users as well. To do so will take a bit of work on our end, but in the end we think it will help you create even more amazing maps.

d3 geo map

Use the above examples or any of our HTML5 experiments to get started with CARTO for client-side rendering. You’ll have a blast and certainly learn a thing or two. As always, we’d love to see what you come up with, so don’t forget to post it over on the CARTO user thread. Of course, if you need to support the browsers that D3 doesn’t, you can still always rely on our tiling services.

Related Posts

Ready to optimize your territories with Location Intelligence?

Close circle icon

Contact us

Please fill out the below form and we'll be in touch real soon.