# Data Driven Visualization

**URL:** <https://discourse.threejs.org/t/data-driven-visualization/31486>\
**Category:** Questions\
**Tags:** infoviz\
**Created:** [November 5, 2021, 2:08pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486 "2021-11-05T14:08:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waqar\_Haider](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waqar_haider/32/21901_2.png) [@Waqar\_Haider](https://discourse.threejs.org/u/Waqar_Haider)\
**Post date:** [November 5, 2021, 2:08pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/1 "2021-11-05T14:08:06Z")

</div>

I want to make 3D heatmaps and 3D radar charts using ddv class in three.js but I am not able to find any reference material for this ddv class. I am new to three.js please help me in this regard. Thank you

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [November 5, 2021, 4:50pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/2 "2021-11-05T16:50:15Z")

</div>

Do you mean something like this?

From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[RenderEdgesShader2](https://hofk.de/main/discourse.threejs/2019/RenderEdgesShader2/RenderEdgesShader2.html)

[ColorHeightmap](https://hofk.de/main/discourse.threejs/2020/ColorHeightmap/ColorHeightmap.html)  
[NormalsFromHeightmap(vertex shader)](https://hofk.de/main/discourse.threejs/2020/NormalsFromHeightmap(vertex%20shader)/NormalsFromHeightmap(vertex%20shader).html)  
[CloudOfPointsMesh](https://hofk.de/main/discourse.threejs/2020/CloudOfPointsMesh/CloudOfPointsMesh.html)  
[displacementMap](https://hofk.de/main/discourse.threejs/2020/displacementMap/displacementMap.html)

[InstancedMeshDataInfoColors](https://hofk.de/main/discourse.threejs/2021/InstancedMeshDataInfoColors/InstancedMeshDataInfoColors.html)  
[ColoredBoxGrid](https://hofk.de/main/discourse.threejs/2021/ColoredBoxGrid/ColoredBoxGrid.html)  
[SortAndRearrange](https://hofk.de/main/discourse.threejs/2021/SortAndRearrange/SortAndRearrange.html)

See links at top in source code.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 5, 2021, 7:10pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/3 "2021-11-05T19:10:56Z")

</div>

> [@Waqar\_Haider](#):
>
> using ddv class in three.js

There is no such class in the library. Do you mind sharing the resource that says something like this would exist?

---

<div class="post-metadata">

**Author:** ![Waqar\_Haider](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waqar_haider/32/21901_2.png) [@Waqar\_Haider](https://discourse.threejs.org/u/Waqar_Haider)\
**Post date:** [November 6, 2021, 3:34pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/4 "2021-11-06T15:34:18Z")

</div>

To keep it simple is there any way in three.js through which I can make heatmaps or radar charts ? If so, please share some resources. Thank you for your time.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 6, 2021, 4:12pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/5 "2021-11-06T16:12:57Z")

</div>

Can you explain a little more what you mean by heat maps / radar charts, you want to visualise where a cursor on screen moves to / clicks?

---

<div class="post-metadata">

**Author:** ![Waqar\_Haider](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waqar_haider/32/21901_2.png) [@Waqar\_Haider](https://discourse.threejs.org/u/Waqar_Haider)\
**Post date:** [November 6, 2021, 4:39pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/6 "2021-11-06T16:39:56Z")

</div>

I am sharing a link of 3d heatmap using python.[geeksforgeeks](https://www.geeksforgeeks.org/3d-heatmap-in-python/)

---

<div class="post-metadata">

**Author:** ![Waqar\_Haider](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waqar_haider/32/21901_2.png) [@Waqar\_Haider](https://discourse.threejs.org/u/Waqar_Haider)\
**Post date:** [November 6, 2021, 4:41pm UTC](https://discourse.threejs.org/t/data-driven-visualization/31486/7 "2021-11-06T16:41:51Z")

</div>

And this is a radar chart ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/76c37196bbecf3463c037463b628b8458da5bb8a.png)