cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reverted rebranded code, as instruted. Legacy cartodb code instead. Add applied ALL CAPS to rebranded name, as instructed

Browse Source
This commit is contained in:
csobier 2016-05-31 12:28:33 -04:00
parent 2628bcb9ff
commit 80293501e5
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
doc/getting_started.md
View File

@ -1,6 +1,6 @@
# Getting Started
Although the most straightforward way to use Torque is through either the Carto Editor, or by passing the layer's viz.json to [Carto.js](http://docs.carto.com/carto-engine/carto-js/getting-started/), many use cases work best with the standalone [Torque.js](https://github.com/CartoDB/torque/tree/master/dist). Assuming you have a public dataset with a `date` column, it is really simple to create an animated map with the library. First, you need to have a Leaflet map prepared in an HTML page:
Although the most straightforward way to use Torque is through either the CARTO Editor, or by passing the layer's viz.json to [CARTO.js](http://docs.carto.com/carto-engine/carto-js/getting-started/), many use cases work best with the standalone [Torque.js](https://github.com/CartoDB/torque/tree/master/dist). Assuming you have a public dataset with a `date` column, it is really simple to create an animated map with the library. First, you need to have a Leaflet map prepared in an HTML page:
```html
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
@ -15,7 +15,7 @@ Although the most straightforward way to use Torque is through either the Carto
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'Carto'
attribution: 'CartoDB'
}).addTo(map);
</script>
</body>
@ -28,7 +28,7 @@ This HTML file automatically generates the Torque.js library, which includes any
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "date";',
'-torque-aggregation-function: "count(carto_id)";',
'-torque-aggregation-function: "count(cartodb_id)";',
'-torque-frame-count: 760;',
'-torque-animation-duration: 15;',
'-torque-resolution: 2',
@ -51,7 +51,7 @@ This HTML file automatically generates the Torque.js library, which includes any
</script>
```
You can use any kind of tile source outside Carto, by specifying the location of a [valid TileJSON](https://github.com/mapbox/tilejson-spec) file:
You can use any kind of tile source outside CARTO, by specifying the location of a [valid TileJSON](https://github.com/mapbox/tilejson-spec) file:
```javascript
var torqueLayer = new L.TorqueLayer({
@ -85,9 +85,9 @@ The best way to start learning about the library is by taking a look at some of
The following links contain examples, and other public information, about using Torque maps.
- Torque [CartoCSS Reference page](https://github.com/cartodb/torque-reference), useful for building parsers, tests, compilers, and syntax highlighting/checking
- Carto repository of [examples](https://github.com/CartoDB/torque/tree/master/examples)
- A Carto [time example](http://cartodb.github.com/torque/) of a Torque map and data
- Carto wiki page describing [how spatial aggregration works](https://github.com/CartoDB/torque/wiki/How-spatial-aggregation-works)
- CARTO repository of [examples](https://github.com/CartoDB/torque/tree/master/examples)
- A CARTO [time example](http://cartodb.github.com/torque/) of a Torque map and data
- CARTO wiki page describing [how spatial aggregration works](https://github.com/CartoDB/torque/wiki/How-spatial-aggregation-works)
- The [Guardian's Data Blog](http://www.guardian.co.uk/news/datablog/interactive/2012/oct/01/first-world-war-royal-navy-ships-mapped) about Royal Navy ships in WWI using a Torque map
- An example of how to create a [simple Torque visualization](https://github.com/CartoDB/torque#getting-started) and the [source code](https://github.com/CartoDB/torque/blob/master/examples/navy_leaflet.html) used to create the example
- An example of how to use Carto.js to [add a Torque layer from a named map with auth_tokens enabled](https://gist.github.com/chriswhong/a4d1e6305ecaf2ad507a)
- An example of how to use CARTO.js to [add a Torque layer from a named map with auth_tokens enabled](https://gist.github.com/chriswhong/a4d1e6305ecaf2ad507a)

10
doc/torque_api.md
View File

@ -28,12 +28,12 @@ attribution | Attribution to be added in the bottom right of the map
maxZoom | Maximum zoom for the layer.
tileSize | Size, in pixels of the tiles
##### Using a Carto table directly
##### Using a CARTO table directly
Name | Description
--- | ---
user | A string object, your Carto [account name](/carto-editor/your-account/#account). Default value is ```null```
table | A string object, the Carto table name where data is found (also known as a dataset.) Default value is ```null```
user | A string object, your CARTO [account name](/carto-editor/your-account/#account). Default value is ```null```
table | A string object, the CARTO table name where data is found (also known as a dataset.) Default value is ```null```
##### Using a custom SQL query
@ -41,7 +41,7 @@ Name | Description
--- | ---
query | A string object, the SQL query to be performed to fetch the data. Default value is ```null```.<br/><br/>You must use this param or table, but not at the same time
**Tip:** For a Torque category layer that is created dynamically with `carto.createLayer`, the SQL query must explicitly include how to build the torque_category column. You must include both the `sql` and `table_name` parameters. See this [createLayer with torque category layer](https://gist.github.com/danicarrion/dcaf6f00a71aa55134b4) example.
**Tip:** For a Torque category layer that is created dynamically with `cartodb.createLayer`, the SQL query must explicitly include how to build the torque_category column. You must include both the `sql` and `table_name` parameters. See this [createLayer with torque category layer](https://gist.github.com/danicarrion/dcaf6f00a71aa55134b4) example.
##### Providing a TileJSON file
@ -88,7 +88,7 @@ This is how a minimal example of a stylesheet for a Torque visualisation would l
```css
Map {
-torque-time-attribute: "date";
-torque-aggregation-function: "count(carto_id)";
-torque-aggregation-function: "count(cartodb_id)";
-torque-frame-count: 760;
-torque-animation-duration: 15;
-torque-resolution: 2;

4
doc/torque_interaction_methods.md
View File

@ -29,7 +29,7 @@ This layer source object is used for Torque maps. Note that it does not allow su
Used to create an animated torque layer with customized settings.
```javascript
// initialize a torque layer that uses the Carto account details and SQL API to pull in data
// initialize a torque layer that uses the CARTO account details and SQL API to pull in data
var torqueLayer = new L.TorqueLayer({
user : 'viz2',
table : 'ow',
@ -120,7 +120,7 @@ var map = new L.Map('map', {
zoom: 3
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'Carto'
attribution: 'CartoDB'
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
user : 'viz2',

16
doc/torque_time_slider.md
View File

@ -1,6 +1,6 @@
# Torque Time Slider
You can use the `time_slider` option to show an animated time slider with Torque layers. This option is enabled by default when creating visualizations with [carto.createVis](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartocreatevis) and [createLayer](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartocreatelayermap-layersource--options--callback). Both require a map_id DOM object.
You can use the `time_slider` option to show an animated time slider with Torque layers. This option is enabled by default when creating visualizations with [cartodb.createVis](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatevis) and [createLayer](http://docs.carto.com/carto-engine/carto-js/api-methods/#cartodbcreatelayermap-layersource--options--callback). Both require a map_id DOM object.
**Enable / Disable the Torque Time Slider**
@ -10,16 +10,16 @@ Default Value | `true`, enabled by default.
Available Values | See [boolean](http://docs.carto.com/carto-engine/cartocss/properties/#boolean).
Related Examples | To disable the time slider option, use `time_slider: false`. See [No Torque Time Slider - Example Code](http://bl.ocks.org/michellechandra/081ca7160a8c782266d2).<br/><br/>For a code example about how to use the `time_slider` option to modify a Torque map, see [Torque with a Custom Time Slider](http://bl.ocks.org/csobier/cebdd47242d7ca98ec5e).
**Note:** The `time_slider` option is specific for Torque.js only. All the other Carto.js options are also supported for Torque.js. For the complete list of arguments, options, and returns, see [Carto.js API Methods](http://docs.carto.com/carto-engine/carto-js/api-methods/#api-methods).
**Note:** The `time_slider` option is specific for Torque.js only. All the other CARTO.js options are also supported for Torque.js. For the complete list of arguments, options, and returns, see [CARTO.js API Methods](http://docs.carto.com/carto-engine/carto-js/api-methods/#api-methods).
## Customize Animation for your Time Slider
You can customize the animation of your Torque time slider by editing the `-torque-frame-count` and `-torque-animation-duration` CartoCSS properties. (Optionally, you can create a [Carto.js](http://docs.carto.com/carto-engine/carto-js/api-methods/#api-methods) map to create a custom time slider). This section also describes how time interval data is aggregated, and describes the formula used to calculate time buckets.
You can customize the animation of your Torque time slider by editing the `-torque-frame-count` and `-torque-animation-duration` CartoCSS properties. (Optionally, you can create a [CARTO.js](http://docs.carto.com/carto-engine/carto-js/api-methods/#api-methods) map to create a custom time slider). This section also describes how time interval data is aggregated, and describes the formula used to calculate time buckets.
- [`-torque-frame-count`](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-frame-count-number) specifies the number of animation steps/frames in your torque animation. You can change the time slider timestamp by adjusting the number of steps.<br /><br />**Tip:** This is the _Steps_ option from the [Torque wizard](/carto-editor/maps/#torque) of the Carto Editor.
- [`-torque-frame-count`](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-frame-count-number) specifies the number of animation steps/frames in your torque animation. You can change the time slider timestamp by adjusting the number of steps.<br /><br />**Tip:** This is the _Steps_ option from the [Torque wizard](/carto-editor/maps/#torque) of the CARTO Editor.
- [`-torque-animation-duration`](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-animation-duration-number) specifies the length of time for your animation, in seconds. You can adjust the duration of the animation as needed.<br /><br />**Tip:** This is the _Duration (secs)_ option from the [Torque wizard](/carto-editor/maps/#torque) of the Carto Editor.
- [`-torque-animation-duration`](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-animation-duration-number) specifies the length of time for your animation, in seconds. You can adjust the duration of the animation as needed.<br /><br />**Tip:** This is the _Duration (secs)_ option from the [Torque wizard](/carto-editor/maps/#torque) of the CARTO Editor.
### Aggregating Time Interval Data
@ -34,7 +34,7 @@ Before customizing the time slider, you should understand how Torque time interv
Thus, the start and end time for each bucket depends on the number of divided steps (not a specific start time or end time that you entered).
**Note:** If you are creating Torque maps with the Carto Editor, the date format of the Torque time slider is automatically calculated by Carto and cannot be edited. See [Calculating the Time Slider in the Carto Editor](#calculating-the-time-slider-in-the-carto-editor) for more details.
**Note:** If you are creating Torque maps with the CARTO Editor, the date format of the Torque time slider is automatically calculated by CARTO and cannot be edited. See [Calculating the Time Slider in the CARTO Editor](#calculating-the-time-slider-in-the-carto-editor) for more details.
### Formula for Calculating Time Buckets
@ -50,9 +50,9 @@ Where:
The Torque time slider displays these buckets of time, animating the entire sequence of your dataset, and divides the time according to the number of specified steps. You can alter the [duration](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-animation-duration-number) of the animation, and adjust the time slider timestamp with the number of [Steps](http://docs.carto.com/carto-engine/cartocss/properties-for-torque/#torque-frame-count-number).
#### Calculating the Time Slider in the Carto Editor
#### Calculating the Time Slider in the CARTO Editor
When creating Torque maps with the Carto Editor, the date format of the Torque time slider is automatically calculated by Carto, depending on the range of time in your dataset. It cannot be edited. If your data contains the following range of time, the time slider displays as described:
When creating Torque maps with the CARTO Editor, the date format of the Torque time slider is automatically calculated by CARTO, depending on the range of time in your dataset. It cannot be edited. If your data contains the following range of time, the time slider displays as described:
- Time range is _less than one day_, the time slider displays the _time_
- Time range is _less than three days_, the time slider displays the _day and time_