✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Announcing Dash VTK for 3d simulation graphics

Excited to announce Dash VTK, a collaboration with Kitware, and our first webinar of 2021!

To bring 3d simulation graphics to Dash for Python, R, and Julia users, we’ve partnered with Kitware, the legendary open-source scientific software developer.

Dash VTK is open-source and already installable from Python:

pip install dash-vtk

Get the full scoop at the Dash VTK Webinar on March 16th with Sebastien Jourdain from Kitware.


I love this integration so much. VTK.js is such a bada** library. I cannot wait to see apps come out of this from the community.


I’m really excited about this library. I feel like it could be a game changer for some of my projects. Thank you for bringing it in!

After some initial research, I feel like the biggest obstacle for me to start using the library will be getting my data into the right format for VTK to swallow it.

I would much appreciate some brief examples of how to visualise usual data structures (e.g. numpy arrays) with dash-vtk. In particular, I’m interested in using the Volume renderer to visualise scalar fields in rectilinear meshes (cartesian and cylindrical).

1 Like

For the volume rendering part of a rectilinear mesh you can see that example where you can drop a numpy array for the scalars if you prefer.

It is true, that we made some easy shortcut for VTK structure into dash_vtk, but you also have access the mesh structure yourself via dash and you just need to fill it with your own numpy arrays to match what you want to look at, assuming your structure match what vtk.js is expecting. Otherwise, you can rely on VTK (on the server side) to do data processing and conversion for your local rendering.



Hey guys, these look like amazing components!

I was wondering whether it’s possible to to hover / click interactions with points in a point cloud? After browsing through the examples both in dash-vtk and react-vtk-js I couldn’t find anything related to that.

I followed your suggestion @jourdain and modified the synthetic-volume-rendering example.

In principle, I managed to render my data. However, there is a number of things I can’t figure out:

  1. How can I use variables mesh_x, mesh_y, mesh_z to define the dimensions of the mesh? The spacing property of dash_vtk.VolumeDataRepresentation does not seem to help.
  2. Is it possible to hard-set the range for the legend/colour coding? The interactive tool is nice and useful for some situations but not so much for my use-case.
  3. How would I render similar data but in cylindrical mesh? E.i. instead of mesh_x,y,z I would have mesh_r,z,theta.

Is there any resource you could point me to? I feel a bit overwhelmed by all the VTK libraries available (vtk, vtk-js, react-vtk-js). For example, I was searching for ‘VolumeDataRepresentation’ in vtk-js API docs but could not find it.

Thanks for help!

Attaching my code…

import numpy as np
import dash
import dash_vtk
import dash_html_components as html

# scalar field to render
scalar_field = np.array([
    [[np.nan,           np.nan],
    [ np.nan,           np.nan],
    [ np.nan,           np.nan],
    [1.79262189e+11,    2.18837278e+11]],
    [[np.nan,           np.nan],
    [ np.nan,           np.nan],
    [1.64769069e+11,    2.45624800e+11],
    [1.32300079e+11,    2.02066001e+11]],
    [[np.nan,           np.nan],
    [ np.nan,           np.nan],
    [1.78280539e+11,    2.30927911e+11],
    [1.22644125e+11,    1.86903883e+11]],
    [[np.nan,           np.nan],
    [1.75734696e+11,    2.11878382e+11],
    [1.23296506e+11,    1.91324625e+11],
    [1.19355336e+11,    2.19288506e+11]],
    [[1.57526826e+11,   1.90905892e+11],
    [1.49056114e+11,    1.76250712e+11],
    [1.37917697e+11,    2.42316416e+11],
    [1.44338944e+11,    2.04583689e+11]],
    [[1.45091530e+11,   1.83404823e+11],
    [1.41719705e+11,    1.98748866e+11],
    [1.53608949e+11,    2.24170679e+11],
    [1.50438981e+11,    2.31340499e+11]]

# coordinates of mesh nodes in cm
mesh_x = np.array([-169.5, -166.7, -163.9, -161.0, -158.2, -155.4, -152.6])
mesh_y = np.array([-167.1, -164.4, -161.6, -158.8, -156.0])
mesh_z = np.array([792.5, 794.6, 796.7])

app = dash.Dash(__name__)
server = app.server

volume_view = dash_vtk.View(
        dimensions=[scalar_field.shape[2], scalar_field.shape[1], scalar_field.shape[0]],

app.layout = html.Div(
    style={"height": "calc(100vh - 16px)"},
        html.Div(children=volume_view, style={"height": "100%", "width": "100%"})

if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

@sislvacl it wont be perfect but fairly close for your first example, the ImageData settings would be:

  • spacing: [2.8, 2.8, 2.1]
  • origin: [-169.5, -167.1, 792.5]
  • dimensions: [7, 5, 3]

Also your field array should be ordered as followed (C order):

  • index:0 => x,y,z = origin
  • index:7-1 => x=xMax, y,z=origin
  • index:5*7-1 => x=xMax, y=yMax, z=origin
  • index: 573 - 1 => xyz=Max

For the cylindrical case, you won’t be able to render it as volume as-is unless you resample it via a uniform grid.
But you could do geometry rendering by converting the r,z,t to x,y,z.

In term of documentation the dash_vtk provide some helpers but under the cover the data types that we deal with are always the same vtkImageData and vtkPolyData. Those are just shorthand to remove most of the boiler plate.

You can start with the dash-vtk doc. It covers both the basic data structures and some of the shorthand that you can use.



It could be done, but that is not available right now. The dash-vtk library is fairly new and does not expose all the capabilities that are available in vtk.js. The first focus was mainly to enable rendering while keeping most the flexibility the vtk.js library has to offer. More work will be needed to enable 3D widgets and interactive feedback.

1 Like

Thanks for the explanation.

Looking at the CT scan example, I’m wondering - if I export my data to .vti file, then I could perhaps just use the vtk.vtkXMLImageDataReader() and all the problems described in my previous post would be solved? Would that work for the cylindrical mesh too?

And if I was supposed to export the data to .vti, what would be your recommendation? So far I came across the pyevtk library.

My data is stored in a HDF5 file with a proprietary inner structure. I’m using VisIt for rendering (Pseudocolor plot). I get the data to VisIt using an XDMF reader.

If you are using Visit, you might be able to write the data as vti directly (or any native vtk format). But technically, inside such format, we capture the same thing (origin, spacing, dimensions, scalars). Then you can used any vtk reader to import your data back so you can render it.

For the cylindrical, you will still need to convert to a cartesian grid and if you want to do volume rendering rather than geometry rendering, you will then have to resample to a uniform grid anyway (which vtk/c++/python) can do for you.

Just thinking about it, you might be able to use the xdmf reader of VTK directly (unless it is a custom visit reader), that way, you would not need to do anything at all. And just so you know Visit is based on VTK.

1 Like