🏠 back to Observable

Turn nested array into one array OR use nested array for creating a Heatmap

Hi all!
I would like your help with something if possible…

I’m trying to create a heatmap of this data:

Where i would choose either Types (Type 1 or 2) to represent each axis, and the heatmap would show like this (this is my heatmap so far):

I tried to look over many sources for a code that would fit my needs but i can’t seem to find any. They mostly just represent a heatmap of a data that has only an array of this style (for example):

data = Array(100) [
0: object {
t: “A”
n: 0
value: 17.315041417525244
1: Object {t: “B”, n: 0, value: 78.60887284793797}
2: Object {t: “C”, n: 0, value: 67.76621180487867} …]

So i tried to create a separate array but i ended up with a nested array which i didn’t know how to use/implement in the code for representing the heatmap

exp = Array(18) [
0: Object {
key: “Grass”
values: Array(11) [
0: Object {key: “Poison”, values: Array(15)}
1: Object {key: “Psychic”, values: Array(2)}
2: Object {key: “null”, values: Array(33)}
3: Object {key: “Flying”, values: Array(5)}
4: Object {key: “Dragon”, values: Array(1)}
5: Object {key: “Dark”, values: Array(3)}
6: Object {key: “Fighting”, values: Array(3)}
7: Object {key: “Ground”, values: Array(1)}
8: Object {key: “Ice”, values: Array(3)}
9: Object {key: “Fairy”, values: Array(2)}
10: Object {key: “Steel”, values: Array(2)}
1: Object {key: “Fire”, values: Array(10)}
2: Object {key: “Water”, values: Array(15)}
3: Object {key: “Bug”, values: Array(12)}
4: Object {key: “Normal”, values: Array(8)}
5: Object {key: “Poison”, values: Array(8)}
6: Object {key: “Electric”, values: Array(11)}
7: Object {key: “Ground”, values: Array(10)}
8: Object {key: “Fairy”, values: Array(2)}
9: Object {key: “Fighting”, values: Array(5)}
10: Object {key: “Psychic”, values: Array(8)}
11: Object {key: “Rock”, values: Array(13)}
12: Object {key: “Ghost”, values: Array(7)}
13: Object {key: “Ice”, values: Array(6)}
14: Object {key: “Dragon”, values: Array(8)}
15: Object {key: “Dark”, values: Array(9)}
16: Object {key: “Steel”, values: Array(9)}
17: Object {key: “Flying”, values: Array(2)}

What i’m aiming for is something like the heatmap in this code:


Where i can also show the amount of Pokemons over the cells according to each Type combination (in this case Type 1 and Type 2), so i thought that having a simple array where i can have an individual object of each combination (e.g.)

pokes = Array(18) [
0: object {
t1: “Grass”
t2: “Poison”
value: 15 >>> poke comb amount
1: Object {t1: “Grass”, t2: “Psychic”, value: 2}
2: Object {t1: “Grass”, t2: null, value: 33}…]

and so on instead of the nested array maybe it would be easier to use it for creating the heatmap as i have seen in many other examples!

Or is there a way at all to use the original data without even creating a completely new array for the heatmap? Because as i mentioned, i would need to also show the amount over the cells!

Also, is there a way to reorder the axis where the value NULL would be before BUG and not at the end after WATER? I did use .sort() but as you can see, it ordered everything but put the NULL (row without a text value) at the end…

I’m not really accustomed to coding yet so excuse my pretty long (and maybe unclear) request!

P.S: the color sequence is a complete mess as it doesn’t show the range of the amount of pokemons (min, max). I’m aware of that because it’s related to not knowing how to get the amount :frowning_face:

thanks to this code [https://observablehq.com/@nickawalsh/2017-mls-regular-season-scores-heatmap] i could solve this issue so thanks to everyone who might have taken the time to read this long help request :slight_smile:

1 Like