block by micahstubbs e5d0c64e487a8920e6b775f1244f8486

graph neighbors on mouseover

Full Screen

an es2015 d3v4 iteration on the block Force layout graph with colour-coded node neighbours from @samuelleach


First attempt at making a colour-coded graph, with code snippets inspired from the D3 community.

Green => Friend and follower.

Red => Follower

Blue => Friend.

Improvements needed:

1) Smooth transition on the arrow head.

2) Better positioning of the arrow heads.

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<style>

.node circle {
  stroke: white;
  stroke-width: 1.5px;
  opacity: 1.0;
}

line {
  stroke: black;
  stroke-width: 1.5px;
  stroke-opacity: 1.0;
}

</style>
<body>
<script src='//d3js.org/d3.v4.js'></script>
<script src='vis.js'></script>
</body>

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'lint' ]
2 info using npm@3.10.9
3 info using node@v7.1.0
4 verbose stack Error: missing script: lint
4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:151:19)
4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:61:5
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:356:5
4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:320:45)
4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:354:3)
4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:5)
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:243:12
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16
4 verbose stack     at tryToString (fs.js:425:3)
4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:412:12)
5 verbose cwd /Users/m/workspace/graph-neighbors/02
6 error Darwin 15.6.0
7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
8 error node v7.1.0
9 error npm  v3.10.9
10 error missing script: lint
11 error If you need help, you may report this error at:
11 error     <https://github.com/npm/npm/issues>
12 verbose exit [ 1, true ]

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)
�>�w�)Screen Shot 2017-03-07 at 4.20.58 PM.png�	

$Xw�|>�>�>�>�w�HXhx��������(8HXhx�����br��������


"
2��������CScs����������.>N^n~9#�(A0<6e7�7�7�7�7�7�7�8	88):=<�<�=5=g=w=�=�=�=�=�=�=�=�>>>'>7>G>W>g>w>�>�����������������������������������������������������
��
��
��
������������������������������������������Z�����������0��������������������*����������������������&��������
���������"����������� ����������������������������������������������������$���������%����������'����������(�����������*������
������*�����
�����+�����������-����������-�����
�����/�����	����1����	����1����������1����������1����������2��������2�����������1������������2�����������2�����������2�����������2����������2����������1�����������1����������2���������1���������1���������1����	�����0����
�����.�����
�����-����������,����������+�����
������)�������Z�����������0��������������������*����������������������&��������
���������"����������� ����������������������������������������������������$���������%����������'����������(�����������*������
������*�����
�����+�����������-����������-�����
�����/�����	����1����	����1����������1����������1����������2��������2�����������1������������2�����������2�����������2�����������2����������2����������1�����������1����������2���������1���������1���������1����	�����0����
�����.�����
�����-����������,����������+�����
������)�������Z�����������0��������������������*����������������������&��������
���������"����������� ����������������������������������������������������$���������%����������'����������(�����������*������
������*�����
�����+�����������-����������-�����
�����/�����	����1����	����1����������1����������1����������2��������2�����������1������������2�����������2�����������2�����������2����������2����������1�����������1����������2���������1���������1���������1����	�����0����
�����.�����
�����-����������,����������+�����
������)����������������
��
��
��
�����������������������������������������������)����������(��������'�����������#������������!������������������������������������������������������!���������������#������������������'����������������������.���������������������)����������(��������'�����������#������������!������������������������������������������������������!���������������#������������������'����������������������.���������������������)����������(��������'�����������#������������!������������������������������������������������������!���������������#������������������'����������������������.�������������������������
��
��
��
��������������������������������������6�������������6���������������������������
��
��
��
����������������������=�����<����9����t�:����9���:��{
:��<9���+9���'9���*9���7:��j	:���;��t�;��J�<��^�<��������=����<����<����;�����;���S�;����;����;����;��T�;���:���;���;��N�:��
,�9���V�9�����9��X��8���1"��8���9��8��}�P�8���(�X�7���r�T�7����H�7��,�>��5����5��4����,��3���K�#��3������2���4���1���~���1���
���1��;	���0���
�t�/���

�d�0��_
�S�/�������Q�B�4���@�7
#�4��l���̻��4��7��8���$2��8���M�9�����8���\��8���9���=�����<����9����r�:���:���:��y:��69���&9���!9���%9���1:��f:���;��s<��H�<��\�<��������=����<����<����;�����;���S�;����;����;����;��T�;���:���;���;��N�:��
,�9���V�9�����9��X��8���1"��8���9��8��}�P�8���(�X�7���r�T�7����H�7��,�>��5����5��4����,��3���K�#��3������2���4���1���~���1���
���1��;	���0���
�t�/���

�d�0��_
�S�/�������Q�B�4���@�7
#�4��l���̻��4��7��8���$2��8���M�9�����8���\��8���9������=����<����<����;�����;���S�;����;����;����;��T�;���:���;���;��N�:��
,�9���V�9�����9��X��8���1"��8���9��8��}�P�8���(�X�7���r�T�7����H�7��,�>��5����5��4����,��3���K�#��3������2���4���1���~���1���
���1��;	���0���
�t�/���

�d�0��_
�S�/�������Q�B�4���@�7
#�4��l���̻��4��7��8���$2��8���M�9�����8���\��8���9�����u"�1���5���)���3����3����2�	�;�2�
���1�
�f�1�
�2�1��!�1�
�,�1�
�Y�1�
���1�	�'��1�	���2��{��2���x��3��J�Z���4���Ͳ������9��z������;��+c�;��\�;����;����;���<��d�<����<����<��)��<��d��<�����<����=����=����~����=����=����=����=����=�������s�.���5��$���3����3�
���2�
�8�2����1��e�1��,�1���1��%�1��X�1����1�
�#��1�
���2�	�z��2��u��3��F�V���4���Ͱ������9��z������;��+c�;��\�;����;����;���<��d�<����<����<��)��<��d��<�����<����=����=����~����=����=����=����=����=������������;��+c�;��\�;����;����;���<��d�<����<����<��)��<��d��<�����<����=����=����~����=����=����=����=����=�������������������������������
��
��
��
����������?����=����=����=����=����=����=����=����=����=����=����?�?����=����=����=����=����=����=����=����=����=����=����?�?����=����=����=����=����=����=����=����=����=����=����?��P��������������������+����������������������'������������������$��������������!����������������������������������������������������� ������������"����������$���������%�����������%�����������'�����������(�����������)����������)����������+�����
�����+�����
�����+�����
�����,����
�����-����������������������������ǩ���������
������������������������
�������������������������������������������������������������������½�������������������������������������������������������������ƽ�����������������������"������������������������������%������ļ��������������������(����������������������*����������������������)������������������(�����������'����������&�����������$������P��������������������+����������������������'������������������$��������������!����������������������������������������������������� ������������"����������$���������%�����������%�����������'�����������(�����������)����������)����������+�����
�����+�����
�����+�����
�����,����
�����-����������������������������ǩ���������
������������������������
�������������������������������������������������������������������½�������������������������������������������������������������ƽ�����������������������"������������������������������%������ļ��������������������(����������������������*����������������������)������������������(�����������'����������&�����������$������P��������������������+����������������������'������������������$��������������!����������������������������������������������������� ������������"����������$���������%�����������%�����������'�����������(�����������)����������)����������+�����
�����+�����
�����+�����
�����,����
�����-����������������������������ǩ���������
������������������������
�������������������������������������������������������������������½�������������������������������������������������������������ƽ�����������������������"������������������������������%������ļ��������������������(����������������������*����������������������)������������������(�����������'����������&�����������$�������������;���s�9����#���̴����
���/"���>

	w�����1����!	�t������i�}����������u�)������\����������������S�������U������������������\������)�������������������	��������:�����������������������������|��������������������������l�+��������������������������������������������q���������;���s�9����#���������
���/"��֢�������������1���ڔ}������������i�}�������������	��z�������\���������������������}�������U�������������������
��������)�������������������	�����������:�����������������������������������������������������������������������������������������������������������������݋���|����������;���s�9����#���̴����
���/"���>

	w�����1����!	�t������i�}����������u�)������\����������������S�������U������������������\������)�������������������	��������:�����������������������������|��������������������������l�+��������������������������������������������q����3���5�9����y�8���w���8���6:����@4�<����������;���s'��9�����,��������;���*��������u���)���G1������$�}����'���Z�����w8�O��+��h�x+����(�����}�	h�'�������b�L����&���7
�
��*���
���,��P���,����	���-�������*���O���*���A
�K�)���
�[�����(��.���.��
.G2���/��o������0��X����x��1���������;����5�3���5�9����y�8���w���8���6:����@4�<�����u��������5�����}}�����0���mifddee�dehi���,����^ce
e�dc���)��ކ`ee�_t��'���taee�ak��%���mbee�ch��#���ocee�l��"���bee�d{�� ���dee�b������ee�cr����mee�^�����bee�b����cee���sdee���dee���]ee���]ee���]ee���cee���qdee���cee����aee�b����kee�_����ee�dk��������dee�b�����s'�����bee�du����������idee�g��
��������;������adee���
��������u������jcee�cg��
���G1������$�}�������|`ee�`n��
���Z�����w8�O������\ae
e�c_�����h�x+����	����bbdee�c^���������}�	h���mlkklmz���
�������b�L������������
���7
�
��*���
���,��P���,����	���-�������*���O���*���A
�K�)���
�[�����(��.���.��
.G2���/��o������0��X����x��1���������;����5�3���5�9����y�8���w���8���6:����@4�<�����u��������5���������������0���ϸ���������-��ذ��
������)���ı�������'��黲�������%������������#�����������"��ʳ������ �����������Ĵ�������渴������ҳ��������ų����𻳴�������簴���尴���簴���곴���ﺳ�����ó�����ϲ�������㷴��������������������ݳ���������s'����ų���������������������
��������;�����貴����
��������u�����ᷳ�������
���G1������$�}����������������
���Z�����w8�O�����Ѱ��
���������h�x+����	����ɲ���������������}�	h�����ĸ���������
�������b�L������������
���7
�
��*���
���,��P���,����	���-�������*���O���*���A
�K�)���
�[�����(��.���.��
.G2���/��o������0��X����x��1���������;����5���������:���D,����8���!h���5���c�1���3����?�k��4���\	�Dh~��������������%���}0�(<Nbu���&���[�B�(����u���+���
�<�-������,�����$
���/���L	�2u���-���j�J��.��{����,����uA�o���(������K���j%�U���)��� 
����ߓK�8���(���0
�����p�P���&���;b��������6���7z�9���\!��;��Ԟ�������=����=�����<�����<��Y��<��]��<��_��<��a��<��a��<��a��<��`��<��^��<��Y��<��}��<����������7������D,����5������!h���5���c�1���3����?�k��4���\	�Dh~��������������%���}0�(<Nbu���&���[�B�(����u���+���
�<�-������,�����$
���/���L	�2u���-���j�J��.��{����,����uA�o��������������������K���j%�U���	���P
�U���� 
����ߓK�8�������0���0
�����p�P�����w���;b����������	(���7z����
*���\!���� 
,��Ԟ����
1��L0���10���'0���%0���+1��71��n
1���
2��T
2���)	3���$����=����=�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<����������7������D,����5������!h���5���c�1���3����?�k��4���\	�Dh~��������������%���}0�(<Nbu���&���[�B�(����u���+���
�<�-������,�����$
���/���L	�2u���-���j�J��.��{����,����uA�o��������������������K���j%�U���	���P
�U���� 
����ߓK�8�������0���0
�����p�P�����w���;b����������	(���7z����
*���\!���� 
,��Ԟ����
1��L0���10���'0���%0���+1��71��n
1���
2��S
2���)	3���$��@����=�����<��4��;��
v�:��}�9����8��I��7����7�����6��L��6��+��6��$��6��7��6��b��6�����6��"��7��w��7��8��8����9�@����=�����<��4��;��
v�:��|�9����8��I��7����7�����6��L��6��+��6��$��6��7��6��b��6�����6��"��7��w��7��8��8����9����������������������
��
��
��
�������������������#�����������!���������� ������������������������������������������ �����������#��������������&��������������������)���������������������.����������������
`������#�����������!���������� ������������������������������������������ �����������#��������������&��������������������)���������������������.����������������
`������#�����������!���������� ������������������������������������������ �����������#��������������&��������������������)���������������������.����������������
`����������������J��#��s�2��#��h�*��#��r�2��#����I��#����o��#���%���%��g�*��%���
�s�'����$��'���X���)���F���+���X���-����9�k��0���^�?����3�������������������������Ȅ���~���#���������#����������#���������#��Ȅ���~���#��܊���}���#����������%����������%��������'���y������'����{���|��)�����
�����+������������-���Ϟ||����~{����0���ܰ�zyy�������3���������������������������J��#��s�2��#��h�*��#��r�1��#����I��#����o��#���%���%��g�*��%����s�'����#��'���X���)���F���+���X���-����9�k��0���^�>����3�������������������4���05���{��6���[>=AZ��?�4���05���{��6���[>=AY��?����9��:����<����~��9��:����<����~����������������������
��
��
��
��
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�,�,�,�,����}n>7��Layer�	

?���?�II)I5IA��A�A�A�A�A�A�A�B
BB-B=BMB]BmB}B�B�B�B�B�B�B�B�C
CC-C=CMC]CmC}C�C�C�C�C�C�C�C�D
DD-D=DMD]DmD}D�D�D�D�D�D�D�D�E
EE-E=EME]EmE}E�E�E�E�E�E�E�E�F
FF-F=FMF]FmF}F�F�F�F�F�F�F�F�G
GG-G=GMG]GmG}G�G�G�G�G�G�G�G�H
HH-H=HMH]HmH}H�H�H�H�H�H�H�H�I
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
�
����}x><

vis.js

/* global d3 */

const graph = {
  nodes: [
    { id: 0, size: 10 },
    { id: 1, size: 5 },
    { id: 2, size: 2 },
    { id: 3, size: 3 },
    { id: 4, size: 30 },
    { id: 5, size: 40 },
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 0 },
    { source: 3, target: 0 },
    { source: 4, target: 1 },
  ],
};

const width = 960;
const height = 500;

const mouseOverFunction = function (d) {
  const circle = d3.select(this);

  node
    .transition(500)
      .style('opacity', o => {
        const isConnectedValue = isConnected(o, d);
        if (isConnectedValue) {
          return 1.0;
        }
        return 0.2
      })
      .style('fill', (o) => {
        let fillColor;
        if (isConnectedAsTarget(o, d) && isConnectedAsSource(o, d)) {
          fillColor = 'green';
        } else if (isConnectedAsSource(o, d)) {
          fillColor = 'red';
        } else if (isConnectedAsTarget(o, d)) {
          fillColor = 'blue';
        } else if (isEqual(o, d)) {
          fillColor = 'hotpink';
        } else {
          fillColor = '#000';
        }
        return fillColor;
      });

  link
    .transition(500)
      .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0.2))
      .transition(500)
      .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()'));

  circle
    .transition(500)
      .attr('r', () => 1.4 * nodeRadius(d));
};

const mouseOutFunction = function () {
  const circle = d3.select(this);

  node
    .transition(500);

  link
    .transition(500);

  circle
    .transition(500)
      .attr('r', nodeRadius);
};

const nodes = graph.nodes;
const links = graph.links;

const simulation = d3.forceSimulation()
  .force('link', d3.forceLink().id(d => d.id))
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter(width / 2, height / 2));

  // const simulation = d3.forceSimulation()
  //   .nodes(nodes)
  // .links(links)
  // .charge(-3000)
  // .friction(0.6)
  // .gravity(0.6)
  // .size([width, height])
  // .start();

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

let link = svg.selectAll('line')
  .data(graph.links)
  .enter().append('line');

let node = svg.selectAll('.node')
  .data(graph.nodes)
  .enter().append("g")
    .attr('class', 'node');

node
  .append('circle')
    .attr("r", nodeRadius)
    .on('mouseover', mouseOverFunction)
    .on('mouseout', mouseOutFunction)
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

svg
  .append('marker')
  .attr('id', 'arrowhead')
  .attr('refX', 6 + 7) // Controls the shift of the arrow head along the path
  .attr('refY', 2)
  .attr('markerWidth', 6)
  .attr('markerHeight', 4)
  .attr('orient', 'auto')
  .append('path')
    .attr('d', 'M 0,0 V 4 L6,2 Z');

link
  .attr('marker-end', 'url()');

simulation
  .nodes(graph.nodes)
  .on('tick', ticked);

simulation.force('link')
  .links(graph.links);

let linkedByIndex = {};
links.forEach((d) => {
  linkedByIndex[`${d.source.index},${d.target.index}`] = true;
});

function isConnected(a, b) {
  return isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a.index === b.index;
}

function isConnectedAsSource(a, b) {
  return linkedByIndex[`${a.index},${b.index}`];
}

function isConnectedAsTarget(a, b) {
  return linkedByIndex[`${b.index},${a.index}`];
}

function isEqual(a, b) {
  return a.index === b.index;
}

function ticked() {
  link
    .attr('x1', d => d.source.x)
    .attr('y1', d => d.source.y)
    .attr('x2', d => d.target.x)
    .attr('y2', d => d.target.y);

  node
    .attr('transform', d => `translate(${d.x},${d.y})`);
  }

function nodeRadius(d) { return Math.pow(40.0 * d.size, 1 / 3); }

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}