oxfordcomma.github.io/colorLegend.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
export const colorLegend = (selection, props) => {
  const {
    colorScale,
    circleRadius,
    spacing,
    textOffset,
    backgroundRectWidth,
    onClick,
    selectedLegendList,
    numArtists
  } = props;

  const backgroundRect = selection.selectAll('rect')
    .data([null]);

  const n = colorScale.domain().length;

  backgroundRect.enter().append('rect')
    .merge(backgroundRect)
      .attr('x', -circleRadius * 2)
      .attr('y', -circleRadius * 2)
      .attr('rx', circleRadius * 2)
      .attr('width', backgroundRectWidth)
      .attr('height', spacing * n + circleRadius * 2)
      .attr('fill', 'white')
      .attr('opacity', 0);

  const groups = selection.selectAll('.legend')
    .data(colorScale.domain().slice(0, numArtists));

  const groupsEnter = groups
    .enter().append('g')
      .attr('class', 'legend');

  groupsEnter
    .merge(groups)
      .attr('transform', (d, i) => `translate(0, ${i * spacing})`)
      .on('click', onClick);

  groupsEnter
    .merge(groups)
      .transition().duration(200)
      .attr('transform', (d, i) => `translate(0, ${i * spacing})`)
      .attr('opacity', d => (selectedLegendList.length == 0 || selectedLegendList.includes(d)) ? 1 : 0.2)

  groups.exit().remove();

  groupsEnter.append('circle')
    .merge(groups.select('circle'))
      .attr('r', circleRadius)
      .attr('fill', colorScale);

  groupsEnter.append('text')
    .merge(groups.select('text'))
      .text(d => d)
      .attr('dy', '0.32em')
      .attr('x', textOffset)
}