# Time series in vtkjs
**URL:** https://discourse.paraview.org/t/time-series-in-vtkjs/7757
**Category:** Web Support
**Created:** [August 4, 2021, 7:38am UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757 "2021-08-04T07:38:57Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@devngc](https://discourse.paraview.org/u/devngc)
#### Post date: [August 4, 2021, 7:38am UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/1 "2021-08-04T07:38:57Z")
Hi all,
We use the vtk (python) to generate .vtkjs file that we load in a viewer using the vtkjs library.
I am interested in understanding how I can use time series in the above-mentioned workflow. I see in [this](http://kitware.github.io/vtk-js/examples/TimeSeries.html) example that a series of .vtp files are necessary for a time series animation. Is this the only way to have a time series animation?
**Our use case**
We use scalars of celldata to mount simulation data. In one particular case, we have 8760 arrays of simulation data. In this case, the geometry data (celldata) remains the same and only the scalar gets updated at each time step. If we produce 8760 .vtp files, the geometry data will be duplicated and it will unnecessarily increase storage needs. Is there a way to avoid this?
In my search for an answer, I do see objects such as vtkMultiBlockDataSet and vtkTemporalDataset. Can I use any of those objects to achieve what I have mentioned above?
---
### Author:  [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 4, 2021, 3:26pm UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/2 "2021-08-04T15:26:08Z")
The way things get solved to prevent duplication with the vtkjs format is that we have all the native arrays in a same directory which are named with a hash. So even if we create a lot of polydata they actually point to the same memory space and therefore no duplication really happen.
Another approach could be to handle manually the swap of the scalar field on the JS side while keep a single polydata.
Also the most relevant example could be [that one](https://kitware.github.io/vtk-js/examples/TimeStepBasedAnimationHandler.html).
---
### Author:  [@devngc](https://discourse.paraview.org/u/devngc)
#### Post date: [August 5, 2021, 2:22pm UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/3 "2021-08-05T14:22:45Z")
This is good and I can create a workflow to write time steps into a .vtkjs file. I spent some time trying to understand the structure of the .vtkjs file by looking into the timesteps.vtkjs used in the example pointed by you.
These are the questions I have;
1. Why there’s a “1” folder in the .vtkjs? Is it necessary to name time steps in decimals such as 0.1, 0.2, etc?
2. I see that a new object named “animation” is added to the index.json shown in the picture above. Is there a script some where that I can use?
3. Does following folder structure make sense for my use case?
```auto
gridbased.vtkjs
0
0 (This is time step zero. All the sub-folders are for each datasets in the model.
The index.jsons points to the data folder.)
Aperture
index.json
Floor
index.json
Grid
index.json
RoofCeiling
index.json
Shade
index.json
Wall
index.json
1 (This is time step one. All the subfolders are for each datasets in the model.
The index.jsons poin to the data folder.)
Aperture
index.json
Floor
index.json
Grid
index.json
RoofCeiling
index.json
Shade
index.json
Wall
index.json
index.json
This file maps folders 0 and 1 to time steps 0 and 1
data
all the unique binary files for all the time steps
index.json
```
In my case, only the values in a scalar in the dataset name “Grid” changes.
I am trying to learn the folder structure of this vtkjs file with time series data so that I can write a script to automate this.
---
### Author:  [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 5, 2021, 3:25pm UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/4 "2021-08-05T15:25:11Z")
The folder structure is really up to you. What matter is how you describe your various index.json to point to the right data.
To some extent I think you should be able to structure your data like so (did not validate my assumption)
```auto
/index.json
/data/*all binary *
/datasets/Aperture_000.json
/datasets/Aperture_001.json
...
```
---
### Author:  [@timothee.chabat](https://discourse.paraview.org/u/timothee.chabat)
#### Post date: [August 5, 2021, 3:59pm UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/5 "2021-08-05T15:59:05Z")
The current format is:
- index.json : should contains an array named `scene` containing all of your objects in your scene. These objects are defined by their `name`, `mapper`, … and their `vtkHttpDataSetSeriesReader::url`, that is the name of the subfolder containing all of their data for all timesteps
- in these subfolders you’ll find :
- another `index.json` that maps an `url` (ie the name of a folder on the same level) to a timestep value,
- a list of folder, one per timestep. In these folders you’ll see yet another `index.json` telling which data to use to construct the dataset (points cells, data arrays, etc)
So basically you can name your folders by whatever the name you want, however you cannot change the global form of the hierarchy (`ROOT/DataSetName/TimeStepName/index.json`).
As for a script generating the `animation` object in the root index.json, check `Web/Python/vtkmodules/web/vtkjs_helper.py` and `Remoting/Animation/vtkSMAnimationSceneWebWriter.cxx`, this should lead you to the right direction.
---
### Author:  [@devngc](https://discourse.paraview.org/u/devngc)
#### Post date: [August 6, 2021, 9:57am UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/6 "2021-08-06T09:57:27Z")
The zipAllTimeSteps function takes which directory\_path as an input? I believe this function does some of the automation I planned to do.
I am not sure if I can use vtkSMAnimationSceneWebWriter object. I am only using vtk python not paraview python.
---
### Author:  [@devngc](https://discourse.paraview.org/u/devngc)
#### Post date: [August 14, 2021, 5:06am UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/8 "2021-08-14T05:06:35Z")
Hi @timothee.chabat,
Can you please help?
---
### Author:  [@timothee.chabat](https://discourse.paraview.org/u/timothee.chabat)
#### Post date: [August 15, 2021, 4:49pm UTC](https://discourse.paraview.org/t/time-series-in-vtkjs/7757/9 "2021-08-15T16:49:52Z")
Indeed you cannot use `vtkSMAnimationSceneWebWriter` if you want to only depend on VTK.
This is `vtkSMAnimationSceneWebWriter` algorithm :
- create a place-holder `index.json` at the root of a folder with all necessary keys,
- for each timestep:
- use the `vtkJSONSceneExporter` class to export each frame in its own folder, at the same level of `index.json`
- add the current timestep time to the root `index.json` (see index.json below)
- at this point we have a folder, let’s say `/home/user/somewhere/`, containing :
- [index.json](https://discourse.paraview.org/uploads/short-url/97yy1d9YswSWycLbU25NaOJVky0.json)
- scene\_timestep1/
- scene\_timestep2/
- […]
- call `zipAllTimeSteps('/home/user/somewhere/myFinalExport.vtkjs')`. After that `/home/user/somewhere/` will only contain `myFinalExport.vtkjs`.
If you wish to reimplement this algorithm you can pretty much copy paste the `zipAllTimeSteps` function (keep in mind the license though 🙂 ) and reimplement `vtkSMAnimationSceneWebWriter` algorithm.