block by micahstubbs 04df008db0b12474a726a7986d73ad14

counter with d3-component | es2015

Full Screen

an es2015 iteration on the block Counter from @currankelleher


A counter app that demonstrates usage of d3-component. Inspired by Redux Counter Example.

The following components are defined and used to construct the app:

Built with blockbuilder.org

forked from curran‘s block: Stopwatch

index.html

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://unpkg.com/d3@4'></script>
  <script src='https://unpkg.com/d3-component@3'></script>
  <script src='https://unpkg.com/redux@3/dist/redux.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
  <style>
    body {
      text-align: center;
      margin-top: 75px;
    }
    .count-display {
      color: #3d3d3d;
      font-size: 10em;
      font-family: sans;
      cursor: default;
    }
    button {
      background-color: #7c7c7c;
      border: solid 3px #7c7c7c;
      border-radius: 11px;
      color: white;
      padding: 20px 60px;
      margin: 20px;
      font-size: 58px;
      cursor: pointer;
    }
    button:hover {
      border: solid 3px black;
    }
    button:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <script src='vis.js'></script>
</body>

lebab.sh

# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template

preview.xcf

gimp xcf file��B�B�gimp-image-grid(style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
(xspacing 10.000000)
(yspacing 10.000000)
(spacing-unit inches)
(xoffset 0.000000)
(yoffset 0.000000)
(offset-unit inches)
���)Screen Shot 2017-03-18 at 2.43.24 PM.png�	

\���C�C�C�C���l|��������,<L\l|�����
Y
i
y
�
�
�
�
�
�
�
�	)e���#3CScs����%P%�%�%�%�%�%�%�&&&,&<(�(�),%,A,].�.�/////?/O/_/o2�3"3�6�7�;N>m>}>�>�>�>�>�>�>�?�?�@
A[AwA�BlB|B�B�B�B�B�B�B�B�CCC,C<CLC\ClC|C�����������������������������������������������������������������������������������������^��������1����špC==�Px����)���ݜC==�k���$����N==���� ����==�������C=
=�@w���V==�������w=	=�C��������}=	=�V�����H==�@���	���w=	=������=	=�d��
���=	=������=	=�}�����=	=������=	=�v�����=	=������=	=�X�����==�@��
���H==�C�����==�H�����d=	=������P==�~��
���=	=�X�����=	=���	���=
=������g==�C�����[=	=�e�����=	=�w�����=
=������[=	=������N=	=�K�����=	=�H���^��������1����špC==�Px����)���ݜC==�k���$����N==���� ����==�������C=
=�@w���V==�������w=	=�C��������}=	=�V�����H==�@���	���w=	=������=	=�d��
���=	=������=	=�}�����=	=������=	=�v�����=	=������=	=�X�����==�@��
���H==�C�����==�H�����d=	=������P==�~��
���=	=�X�����=	=���	���=
=������g==�C�����[=	=�e�����=	=�w�����=
=������[=	=������N=	=�K�����=	=�H���^��������1����špC==�Px����)���ݜC==�k���$����N==���� ����==�������C=
=�@w���V==�������w=	=�C��������}=	=�V�����H==�@���	���w=	=������=	=�d��
���=	=������=	=�}�����=	=������=	=�v�����=	=������=	=�X�����==�@��
���H==�C�����==�H�����d=	=������P==�~��
���=	=�X�����=	=���	���=
=������g==�C�����[=	=�e�����=	=�w�����=
=������[=	=������N=	=�K�����=	=�H�������������������������������������������������������������=����=����<�����<���P�<���=�<���=�;����=�;���g=�;���N=�;���==�;���==�;���==�;���==�:���}==�:���u==�:���N==�:���P==�:���P==�:���N==�:���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���P==�:���P==�:���P==�:���P==�:���N==�:���u==�:���}==�;���==�;���==�;���==�;���C=�;���P=�;���w=�<���=�<���=�<���=�<���P�<�����=����=����=����>������=����=����<�����<���P�<���=�<���=�;����=�;���g=�;���N=�;���==�;���==�;���==�;���==�:���}==�:���u==�:���N==�:���P==�:���P==�:���N==�:���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���P==�:���P==�:���P==�:���P==�:���N==�:���u==�:���}==�;���==�;���==�;���==�;���C=�;���P=�;���w=�<���=�<���=�<���=�<���P�<�����=����=����=����>������=����=����<�����<���P�<���=�<���=�;����=�;���g=�;���N=�;���==�;���==�;���==�;���==�:���}==�:���u==�:���N==�:���P==�:���P==�:���N==�:���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���==;���P==�:���P==�:���P==�:���P==�:���N==�:���u==�:���}==�;���==�;���==�;���==�;���C=�;���P=�;���w=�<���=�<���=�<���=�<���P�<�����=����=����=����>�����=
=������H=	=������H=	=�@������=	=�C�����=
=�e�����=
=������C=
=������H=	=�C����==������}=
=����T=
=�K�����=
=�H��==�������==���==��� ���P=
=��P=
=�@�� ����=
=��==�K��!���=
=��==�~��!���=
=�X==���"���C==���"���N==���"���u==�C��"���}==�H��#���==�m��#���==�w��#���==���$���==���$���H==���$���N==���$���w==�C��$���==�C��$���==�C��$���}==�H��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==���&���==���&���==���&���==���&���==���&���==���&���==���&���==�e��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==�X��$���}==�C��$���==�C��$���==�F��$���T==���$���N==���$���P==���$���==���$���==�e��#���==�Z��#���==�C��"����==�@��"���w=	=�g==���"���P=	=��==���"���C=	=���=
=������H=	=������H=	=�@������=	=�C�����=
=�e�����=
=������C=
=������H=	=�C����==������}=
=����T=
=�K�����=
=�H��==�������==���==��� ���P=
=��P=
=�@�� ����=
=��==�K��!���=
=��==�~��!���=
=�X==���"���C==���"���N==���"���u==�C��"���}==�H��#���==�m��#���==�w��#���==���$���==���$���H==���$���N==���$���w==�C��$���==�C��$���==�C��$���}==�H��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==���&���==���&���==���&���==���&���==���&���==���&���==���&���==�e��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==�X��$���}==�C��$���==�C��$���==�F��$���T==���$���N==���$���P==���$���==���$���==�e��#���==�Z��#���==�C��"����==�@��"���w=	=�g==���"���P=	=��==���"���C=	=���=
=������H=	=������H=	=�@������=	=�C�����=
=�e�����=
=������C=
=������H=	=�C����==������}=
=����T=
=�K�����=
=�H��==�������==���==��� ���P=
=��P=
=�@�� ����=
=��==�K��!���=
=��==�~��!���=
=�X==���"���C==���"���N==���"���u==�C��"���}==�H��#���==�m��#���==�w��#���==���$���==���$���H==���$���N==���$���w==�C��$���==�C��$���==�C��$���}==�H��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==���&���==���&���==���&���==���&���==���&���==���&���==���&���==�e��%���==�m��%���==�e��%���==�e��%���==�e��%���==�e��%���==�e��%���==�m��%���==�X��$���}==�C��$���==�C��$���==�F��$���T==���$���N==���$���P==���$���==���$���==�e��#���==�Z��#���==�C��"����==�@��"���w=	=�g==���"���P=	=��==���"���C=	=�@����=����=��~��<��C��<��=��<��=~��;��=F��;�=���;�=���;�=�X��:�=�@��:�=���:�=����9�=�X��9�=�C��9�=���9�=���9�=���9�=�n��8�=�e��8�=�F��8�=�C��8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=�F��8�=�C��8�=�d��8�=�e��8�=���9�=���9�=���9�=�C��9�=�H��9�=�w��9�=���:�=���:�=�C��:�=�Z��:�=���;�=���;��=C��;��=m��;��=��<�@����=����=��~��<��C��<��=��<��=~��;��=F��;�=���;�=���;�=�X��:�=�@��:�=���:�=����9�=�X��9�=�C��9�=���9�=���9�=���9�=�n��8�=�e��8�=�F��8�=�C��8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=�F��8�=�C��8�=�d��8�=�e��8�=���9�=���9�=���9�=�C��9�=�H��9�=�w��9�=���:�=���:�=�C��:�=�Z��:�=���;�=���;��=C��;��=m��;��=��<�@����=����=��~��<��C��<��=��<��=~��;��=F��;�=���;�=���;�=�X��:�=�@��:�=���:�=����9�=�X��9�=�C��9�=���9�=���9�=���9�=�n��8�=�e��8�=�F��8�=�C��8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=���8�=�F��8�=�C��8�=�d��8�=�e��8�=���9�=���9�=���9�=�C��9�=�H��9�=�w��9�=���:�=���:�=�C��:�=�Z��:�=���;�=���;��=C��;��=m��;��=��<��������������������������������������������������������==�~��!���=
=��[=
=�K��!���=
=���==��� ����=
=���C=
=��� ���g=	=�H���=
=�v�����H=	=�����=
=�C�����=
=�����}=
=������=	=�w�����=
=�~�����u=	=������=	=�C�����H==�e�����=
=������=	=������=	=�X�����j==�m�����N=	=������=	=������=	=�K�����==���	���=	=������C==�K��	���[==�C�����==������H==�~�����==���
���=	=������T==�~�����=	=�������==�d�����=	=�������==�H�����=	=�������x==�H�����=	=�a������==�m�����H=	=�u������H==��������==�m������n=	=�C�����N==��������[==����#��ڎ==�_���'���ԛZ=
=�a����.��������������	���==�~��!���=
=��[=
=�K��!���=
=���==��� ����=
=���C=
=��� ���g=	=�H���=
=�v�����H=	=�����=
=�C�����=
=�����}=
=������=	=�w�����=
=�~�����u=	=������=	=�C�����H==�e�����=
=������=	=������=	=�X�����j==�m�����N=	=������=	=������=	=�K�����==���	���=	=������C==�K��	���[==�C�����==������H==�~�����==���
���=	=������T==�~�����=	=�������==�d�����=	=�������==�H�����=	=�������x==�H�����=	=�a������==�m�����H=	=�u������H==��������==�m������n=	=�C�����N==��������[==����#��ڎ==�_���'���ԛZ=
=�a����.��������������	���==�~��!���=
=��[=
=�K��!���=
=���==��� ����=
=���C=
=��� ���g=	=�H���=
=�v�����H=	=�����=
=�C�����=
=�����}=
=������=	=�w�����=
=�~�����u=	=������=	=�C�����H==�e�����=
=������=	=������=	=�X�����j==�m�����N=	=������=	=������=	=�K�����==���	���=	=������C==�K��	���[==�C�����==������H==�~�����==���
���=	=������T==�~�����=	=�������==�d�����=	=�������==�H�����=	=�������x==�H�����=	=�a������==�m�����H=	=�u������H==��������==�m������n=	=�C�����N==��������[==����#��ڎ==�_���'���ԛZ=
=�a����.��������������	���@��<��n��<����=����>��@��<��n��<����=����>��@��<��n��<����=����>����������������������������������������������ǣ�~|�7���~||6���||5���||5���||4���||�{||3���~||3���|	|3���|	|3���|	|3��~|	|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|����ǣ�~|�7���~||6���||5���||5���||4���||�{||3���~||3���|	|3���|	|3���|	|3��~|	|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|����ǣ�~|�7���~||6���||5���||5���||4���||�{||3���~||3���|	|3���|	|3���|	|3��~|	|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|���
�|��
�|��
�|���>|�~|
?|��>|�~|
?|��>|�~|
?|���������2���ǣ�~||�~��0���~|
|����,���|
|����*���||���*���|
|�{||���(���||�{||�~��&���~||���&���||���&���||���&���||�~�&��~||'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�
|��������2���ǣ�~||�~��0���~|
|����,���|
|����*���||���*���|
|�{||���(���||�{||�~��&���~||���&���||���&���||���&���||�~�&��~||'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�
|��������2���ǣ�~||�~��0���~|
|����,���|
|����*���||���*���|
|�{||���(���||�{||�~��&���~||���&���||���&���||���&���||�~�&��~||'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�
|���
�|��
�|��
�|���
�|��
�|��
�|���|�~�����1�|�~��0�
|����.�|����-�|���-�|�{||���,�|�~��+�|���+�|���+�|���+�|�~�+�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,���|�~�����1�|�~��0�
|����.�|����-�|���-�|�{||���,�|�~��+�|���+�|���+�|���+�|�~�+�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,���|�~�����1�|�~��0�
|����.�|����-�|���-�|�{||���,�|�~��+�|���+�|���+�|���+�|�~�+�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,����������������������������������3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3��~|	|3���|	|3���|	|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3��~|	|3���|	|3���|	|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3�|3��~|	|3���|	|3���|	|��|����4|����4|����4|����4|����4|����
|�|����4|����4|����4|����4|����4|����
|�|����4|����4|����4|����4|����4|����
|��|���|5|���|5|���|5|���|5|���|5|���|
6|�|���|5|���|5|���|5|���|5|���|5|���|
6|�|���|5|���|5|���|5|���|5|���|5|���|
6|�	|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|�~�&��~||���&���||���&���||	|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|�~�&��~||���&���||���&���||	|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|'�|�~�&��~||���&���||���&���||��|���	�3|���	�3|���	�3|���	�3|���	�3|������|	�|�|���	�3|���	�3|���	�3|���	�3|���	�3|������|	�|�|���	�3|���	�3|���	�3|���	�3|���	�3|������|	�|�@|�������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|���|,|���|,|���|,|���|,|���|,|���������|,|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|�|@|�������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|���|,|���|,|���|,|���|,|���|,|���������|,|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|�|@|�������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|���|,|���|,|���|,|���|,|���|,|���������|,|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|8|������|�|�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|�~�+�|���+�|���+�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|�~�+�|���+�|���+�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|,�|�~�+�|���+�|���+����������������������������������3���|	|3���~||4���||�{||5���||5���||6���||8���~||9���ǣ�~|�
��3���|	|3���~||4���||�{||5���||5���||6���||8���~||9���ǣ�~|�
��3���|	|3���~||4���||�{||5���||5���||6���||8���~||9���ǣ�~|�
���|�|�|���|�~�
���|�~�
���|�~�
���|���&���||�~��&���~||�{||���(���||�{|
|���*���||����*���|
|����,���|
|�~��0���~||������2���ǣ�~||�|���&���||�~��&���~||�{||���(���||�{|
|���*���||����*���|
|����,���|
|�~��0���~||������2���ǣ�~||�|���&���||�~��&���~||�{||���(���||�{|
|���*���||����*���|
|����,���|
|�~��0���~||������2���ǣ�~||��|�|�|��|�|�|��|���+�|�~��+�|�{||���,�|���-�|����-�
|����.�|�~��0�|�~�����2�|���+�|�~��+�|�{||���,�|���-�|����-�
|����.�|�~��0�|�~�����2�|���+�|�~��+�|�{||���,�|���-�|����-�
|����.�|�~��0�|�~�����2������������������
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
����}x><

vis.js

/* global d3 Redux */

// A component that renders the count.
const countDisplay = d3.component('div', 'count-display')
  .render(function (selection, d) {
    selection.text(d.count);
  });

// A generic Button component.
const button = d3.component('button')
  .render(function (selection, d) {
    selection
      .text(d.text)
      .on('click', d.onClick);
  });

// The panel that contains the two buttons.
const buttonPanel = d3.component('div', 'button-panel')
  .render(function (selection, d) {
    selection.call(button, [
      {
        text: '-',
        onClick: d.actions.decrement,
      },
      {
        text: '+',
        onClick: d.actions.increment,
      }, 
    ]);
  });

// The top-level app component.
const app = d3.component('div')
  .render(function (selection, d) {
    selection
      .call(countDisplay, d)
      .call(buttonPanel, d);
  });

function main() {
  const store = Redux.createStore(reducer);
  const actions = actionsFromDispatch(store.dispatch);

  render();
  store.subscribe(render);

  function reducer(state, action) {
    const count = state || 0;
    switch (action.type) {
      case 'INCREMENT': return count + 1;
      case 'DECREMENT': return count - 1;
      default: return count;
    }
  }

  function actionsFromDispatch(dispatch) {
    return {
      increment() {
        dispatch({ type: 'INCREMENT' });
      },
      decrement() {
        dispatch({ type: 'DECREMENT' });
      },
    };
  }

  function render() {
    d3.select('body').call(app, {
      count: store.getState(),
      actions,
    });
  }
}

// call main() to run the app
main();