We have just released a 3D graph visualization javascript tool for visualizing position based height data incapsulated in a webpage.
At construction time an array of longitude, latitude and altitude is passed to the tool, which generates the basic graph. In an additional argument static markers can be added to the graph. These markings can be interval markings placed several times along the distance the graph represent or just once. Markings can be a custom image or a default dot if no image is set. Another static feature is segments, which can be used to highlight parts of the graph with another color.
After constructing the graph dynamic markings can be added and modified when needed. These marking is in the example meant to represent runners or bikers and are updated based on time and speed of the runner.
It is possible to register for events triggered when pressing dynamic markings or segments.
You can find an interactive demo here.
The visualization is crafted using THREE.JS and works in both canvas and webGL mode.
The tool was created for Sportstiming and funded by Forsknings og Innovationsstyrelsen.
