oxfordcomma.github.io/treemap.js at master · OxfordComma/oxfordcomma.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import {
  hierarchy,
  cluster,
  select,
	linkHorizontal
} from 'd3';

export const treemap = (selection, props) => {
  const {
    jsonData,
    deepestGenresByArtist,
    totalPlaysArtist,
    topArtists,
    width,
    height,
    colorScale,
    selectedLegendList,
    onClickArtist,
    onClickGenre
  } = props;

  //console.log(jsonData);

  // const topArtistsTrimmed = topArtists.slice(0, numArtists);
  // console.log(topArtistsTrimmed)
  const topGenresTrimmed = topArtists.map(a => deepestGenresByArtist[a])
  var maxGenreDepth = 0;

  const treeLayout = cluster()
    .size([height, 0.75*width])
    .separation((a, b) => {
      return (a.parent == b.parent ? 1 : 1);
    })


  var root = hierarchy(jsonData);

  root.descendants().forEach(d => {
  //   const genre = d.data.id;
    maxGenreDepth = d.depth > maxGenreDepth ? d.depth : maxGenreDepth;
  //   Object.keys(deepestGenresByArtist).filter(a => deepestGenresByArtist[a] === genre).forEach(f => {
  //     if (!topArtistsTrimmed.includes(f))
  //       return;

  //     var newNode = hierarchy({
  //       id: f,
  //       artist: f,
  //       plays: totalPlaysArtist[f]
  //     });

  //     newNode.parent = d;
  //     if (d.children === undefined)
  //       d.children = [];

  //     d.children.push(newNode);
  //   })
  })

  root.sort((a,b) => {
    var aLen = a.children === undefined ? -1 : a.children.length;
    var bLen = b.children === undefined ? -1 : b.children.length;
    return(bLen - aLen);
    // console.log(a)
    // return (b.depth - a.depth)
  });
  console.log(root)

  const tree = treeLayout(root);
  var links = tree.links();

  const linkPathGenerator = linkHorizontal()
    .x(d => d.y)
    .y(d => d.x);

  const treeSpread = d3.max([width/7, 95]);
  selection.width = treeSpread * maxGenreDepth

  // links.forEach(d => {
  //   if (d.target.data.artist)
  //     d.target.y = (maxGenreDepth) * treeSpread;
  //   else
  // 		d.target.y = (d.target.depth) * treeSpread;
  // });


  selection.selectAll('path').data(links)
    .enter().append('path')
      .attr('d', linkPathGenerator)

  const treeText = selection.selectAll('text').data(root.descendants());
  const treeTextEnter = treeText.enter().append('text')
    .attr('class', d => d.data.artist ? 'artist' : 'genre')
    .attr('x', d => d.y)
    .attr('y', d => d.x)
    .attr('dy', '0.32em')
    .attr('text-anchor', d => d.data.artist ? 'start' : 'start')
    .attr('fill', d => d.data.artist ? colorScale(d.data.id) : 'black')
    // .attr('font-size', d => d.data.artist ? 2.1*Math.log(d.data.plays) * 2 : '1.1em')
    .text(d => d.data.id);

  treeText.merge(treeTextEnter)
    // .on('click', d => d.data.artist ? onClickArtist(d.data.id) : true)
    .on('click', d => {
      var artists = d.leaves()
      return d.data.artist ?
        artists.forEach(l => onClickArtist(l.data.id)) :
        onClickGenre(artists.map(l => l.data.id))


      // console.log(d.leaves())
      // (d.data.artist ? onClickArtist(d.data.id) : d.descendants().forEach(l => onClickArtist(l.data.id)))
    })
    .transition(200)
      .attr('opacity', d => {
        const path = root.path(d).map(p => p.data.id)

        // console.log(d.descendants());
        var childNames = d.descendants().map(c => c.data.id)
        // console.log(childNames)
        return (
          selectedLegendList.length == 0 ||
          // selectedLegendList.includes(d.data.id)
          selectedLegendList.some(r=> childNames.indexOf(r) >= 0)
          ? 1 : 0.2
        )})

};