How to select different visualizations with buttons

Question

I have created a few visualizations in cartodb, and I'm trying to create a html with some buttons to select each one.

I have seen some examples using createlayer and sublayers, but not using different viz.jon.

I am a rookie, and I would like that someone to give me a simple example to start developing.

Answer 1

I may be missing something, but you could simply have different buttons that trigger createVis() for different vis.json files

One hangup may be removing existing visualizations when a new button is clicked. The code here does this in a brute force way with a jQuery $.empty() on #map. There may be a built in CartoDB method for this (?) not sure. Have not tested any of this...

html

<button data-url="http://account.cartodb.com/yourvis1.json">vis #1</button>
<button data-url="http://account.cartodb.com/yourvis2.json">vis #2</button>
<button data-url="http://account.cartodb.com/yourvis3.json">vis #3</button>

javascript/jQuery

$(document).ready(function(){
 $('button').on('click', function(){
 $('#map').empty();
 var url = $(this).data().url;
 cartodb.createVis('map', url);
 });
});