S
+
S
L
G
A
V
C
-
N
M
S

    import React, { Component } from 'react';
    import { Axis, AxisBottom, Circle, Collection, Group, Svg } from 'number-picture'
    import itsSet from 'its-set';
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class S extends Component {
  
      constructor() {
        super();
        this.displayName = 'S';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
        const scale = scaleLinear()
          .domain([0, max(nodes, node => node.value)])
          .range([0, width - 40]);
  
        return (
          <Svg height={height} width={width}>
            <Group x={20} y={300}>
              <g>
                <AxisBottom scale={scale} />
              </g>
            </Group>
            <Group x={20}>
              <Collection data={nodes}>
                <Circle
                  enterDuration={3000}
                  enterEase='easeLinear'
                  enterDatum={() => ({ value: 0, opacity: 0 })}
                  updateDuration={3000}
                  updateEase='easeLinear'
                  exitDuration={3000}
                  exitEase='easeLinear'
                  exitDatum={() => ({ value: 0, opacity: 0 })}
  
                  cx={ownProps => scale(ownProps.datum.value)}
                  cy={200}
                  r={10}
                  style={ownProps => ({
                    opacity: itsSet(ownProps.datum.opacity) ? ownProps.datum.opacity : 1,
                  })}
                  fill={({ index }) =>
                    this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                  }
                  onMouseEnter={({ index }) => {
                    this.setState({ hoveredNodeIndex: index });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNodeIndex: null });
                  }}
                />
              </Collection>
            </Group>
          </Svg>
        );
      }
    }