S
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Axis, AxisBottom, Circle, Collection, Group, Svg } from '@potion/element'
    import itsSet from 'its-set';
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class S extends Component {
  
      static displayName = 'S';
      state = {};

      render() {
        const { nodes, width, height } = this.props;
        const scale = scaleLinear()
          .domain([0, max(nodes, node => node.value)])
          .range([40, width - 40]);

        return (
          <Svg height={height} width={width}>
            <Group x={20}>
              <Collection
                data={nodes}
                animate
                nodeEnter={d => ({ ...d, value: 0 })}
              >{nodes => nodes.map(({ value, key }) => (
                <Circle
                  cx={scale(value)}
                  cy={200}
                  r={10}
                  fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
                  onMouseEnter={() => {
                    this.setState({ hoveredNode: key });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNode: null });
                  }}
                />
              ))}</Collection>
            </Group>
          </Svg>
        );
      }
    }