Wednesday, November 30, 2016

analysis VIZJSON and odyssey.js, cartoDB.js: story map

VizJSON is a markup language for describing charts to a rendering engine such that the engine can interpret the associated data and display it in a chart. It is similar in concept to HTML in that HTML is a common markup language that browsers can interpret and use to display web pages. Think of it this way: VizJSON is for visualization renderers as HTML is for browsers. This article describes the advantages of an open language (such as VizJSON) for describing visualization. This language can serve as the foundation of new open-source software that produces and consumes VizJSON as the descriptive language of visualization.
VizJSON is a language-based specification of a visualization data model based on The Grammar of Graphics (see Resources) and expressed in JavaScript Object Notation (JSON). The Grammar of Graphics describes the rules that connect data and graphics. The ideas behind this book have influenced statistical software such as R and SPSS. (See Resources to more about R and SPSS.)


For map

A viz.json is a file that contains all the data needed to reproduce the visualization you created in CartoDB.
The CARTO's viz.json file tells CARTO.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The viz.json file is served with each map you create in your CARTO account.
Although the viz.json file stores all your map settings, all these settings can be easily customized with CARTO.js. If you want to modify the result after instantiating your map with the viz.json, reference the CARTO.js API available methods. For example, you can also use the returned layer to build more functionality (show/hide, click, hover, custom infowindows):

Now the CARTO Builder does not have the option to share the viz.json URL due to the current version of CARTO.js (v3.15), is not compatible with the Builder. 
The new version of CARTO.js (v4) will be released by March/April 2017 and it will be compatible with the CARTO builder...

Best tutorial for cartoDB and odyssey.js

only with maps 

viz.json files are related with Maps (visualizations) but not with tables (datasets):

some codes:

An HTML template that takes a viz.json and displays the map, SQL, and CartoCSS in a neat embeddable iframe
"builder" with the old: "api/v2/viz/ "

Carto Builder<->Carto.js->viz.json URL -> odyssey

a page produced by odyssey.js:
a map produced with the old builder "":
its viz..JSON URL:
idem pour 
viz.json est la même structure cartoDB. L'information entrée pour les pop-up et hover... reste associée à la carte et son dataset. 
Un viz.json est un fichier qui contient toutes les structures (et pas les données comme un texte dans info-windows qui est dans une cellule du dataset) nécessaire à la reproduction de la visualisation créée dans cartoDB. 
viz.JSON and SQL:

cartodb.createLayer(, vizjson)
n'intervient qu'une fois dans chacun des 3 templates:
  • sandbox/scroll.html 
  • sandbox/slides.html 
  • sandbox/torque.html 
 cartodb.createLayer(, vizjson)
               .done(function(layer) {


Odyssey is a simple FSM (
- states
- outputs
- triggers
Each state has multiple outputs To change state a trigger should be raised When the state machine is doing a switch between states no trigger is taken into account Each state have internal states.

  • timeline
    • time in range [0, 1]
  • trigger
  • action
  • when a trigger moves the timeline other triggers don't take affect
  • trigger can be continous or fixed
    • actions can be:
    • undo/redo
    • once


cartodb.createVis(map_id, vizjson_url[, options] [, callback])
Creates a visualization inside the map_id DOM object.
cartodb.createVis(map_id, vizjson_url[, options] [, callback])
Creates a visualization inside the map_id DOM object.

cartodb.createLayer(map, layerSource [, options] [, callback])
With visualizations already created through the CARTO console, you can simply use the createLayer function to add them into your web pages. Unlike createVis, this method requires an already activated map object and it does not load a basemap for you.


In CARTO, there are two main methods to bring your maps into custom webpages, createVis and createLayer.

The first method, createVis allows for quick and easy maps with a large degree of customization. It gives two map layers in an array: layer 0 is the base map; layer 1 is the CARTO data layer.

The second method, createLayer, allows for much more customization, including the combining of layers from separate maps, each with its own levels of customization. createLayer also allows client-side control over basemaps.

Both methods allow custom CartoCSS styling, SQL queries, and overlay options (zoom controls, a search box, a share button, etc.). Before showing these methods, we need to be introduced to these methods’ main sources of information.

No comments:

Post a Comment