an es2015 d3v4 iteration on the block network fade from @jalapic
mouse over a node to see that node and it's first-degree neighbors highlighted (along with the links that connect them)
see also graph neighbors on mouseover from @micahstubbs
Last active
March 8, 2017 23:06
-
-
Save micahstubbs/d2362886844cff427e797ff992cc23ec to your computer and use it in GitHub Desktop.
network fade | d3v4 es2015
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: MIT | |
| border: no | |
| height: 750 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| online.html | |
| offline.html | |
| d3.min.js | |
| d3.v4.js |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes": [ | |
| { | |
| "name": "A", | |
| "id": 0 | |
| }, | |
| { | |
| "name": "D", | |
| "id": 1 | |
| }, | |
| { | |
| "name": "K", | |
| "id": 2 | |
| }, | |
| { | |
| "name": "B", | |
| "id": 3 | |
| }, | |
| { | |
| "name": "G", | |
| "id": 4 | |
| }, | |
| { | |
| "name": "H", | |
| "id": 5 | |
| }, | |
| { | |
| "name": "C", | |
| "id": 6 | |
| }, | |
| { | |
| "name": "L", | |
| "id": 7 | |
| }, | |
| { | |
| "name": "E", | |
| "id": 8 | |
| }, | |
| { | |
| "name": "F", | |
| "id": 9 | |
| }, | |
| { | |
| "name": "J", | |
| "id": 10 | |
| }, | |
| { | |
| "name": "I", | |
| "id": 11 | |
| }, | |
| { | |
| "name": "M", | |
| "id": 12 | |
| } | |
| ], | |
| "links": [ | |
| { | |
| "source": 0, | |
| "target": 1, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 0, | |
| "target": 2, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 3, | |
| "target": 4, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 5, | |
| "target": 3, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 6, | |
| "target": 0, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 6, | |
| "target": 7, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 8, | |
| "target": 0, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 9, | |
| "target": 3, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 9, | |
| "target": 4, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 2, | |
| "target": 10, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 9, | |
| "target": 11, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 4, | |
| "target": 5, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 8, | |
| "target": 2, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 8, | |
| "target": 4, | |
| "type": "low" | |
| }, | |
| { | |
| "source": 8, | |
| "target": 9, | |
| "type": "high" | |
| }, | |
| { | |
| "source": 8, | |
| "target": 12, | |
| "type": "high" | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <script src='http://d3js.org/d3.v4.js'></script> | |
| <style> | |
| .node circle { | |
| fill: #DDD; | |
| stroke: #777; | |
| stroke-width: 2px; | |
| } | |
| .node text { | |
| font-family: sans-serif; | |
| text-anchor: middle; | |
| pointer-events: none; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .link { | |
| stroke: #88A; | |
| stroke-width: 4px; | |
| } | |
| text { | |
| font: 18px sans-serif; | |
| pointer-events: none; | |
| } | |
| #end-arrow { | |
| fill: #88A; | |
| } | |
| </style> | |
| <body> | |
| <script src='vis.js'></script> | |
| </body> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* global d3 */ | |
| d3.json('graph.json', (error, graph) => { | |
| const width = 960; | |
| const height = 700; | |
| const simulation = d3.forceSimulation() | |
| .nodes(graph.nodes) | |
| .force('link', d3.forceLink().id(d => d.id)) | |
| .force('charge', d3.forceManyBody().strength([-250])) | |
| .force('center', d3.forceCenter(width / 2, height / 2)) | |
| .on('tick', ticked); | |
| simulation.force('link') | |
| .links(graph.links) | |
| .distance([85]); | |
| const R = 18; | |
| const svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| // add defs-marker | |
| // add defs-markers | |
| svg.append('svg:defs').selectAll('marker') | |
| .data([{ id: 'end-arrow', opacity: 1 }, { id: 'end-arrow-fade', opacity: 0.1 }]) | |
| .enter().append('marker') | |
| .attr('id', d => d.id) | |
| .attr('viewBox', '0 0 10 10') | |
| .attr('refX', 2 + R) | |
| .attr('refY', 5) | |
| .attr('markerWidth', 4) | |
| .attr('markerHeight', 4) | |
| .attr('orient', 'auto') | |
| .append('svg:path') | |
| .attr('d', 'M0,0 L0,10 L10,5 z') | |
| .style('opacity', d => d.opacity); | |
| let link = svg.selectAll('line') | |
| .data(graph.links) | |
| .enter().append('line'); | |
| link | |
| .attr('class', 'link') | |
| .attr('marker-end', 'url(#end-arrow)') | |
| .on('mouseout', fade(1)); | |
| let node = svg.selectAll('.node') | |
| .data(graph.nodes) | |
| .enter().append('g') | |
| .attr('class', 'node'); | |
| node.append('circle') | |
| .attr('r', R) | |
| .on('mouseover', fade(0.1)) | |
| .on('mouseout', fade(1)) | |
| .call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| node.append('text') | |
| .attr('x', 0) | |
| .attr('dy', '.35em') | |
| .text(d => d.name); | |
| 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 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; | |
| } | |
| const linkedByIndex = {}; | |
| graph.links.forEach(d => { | |
| linkedByIndex[`${d.source.index},${d.target.index}`] = 1; | |
| }); | |
| function isConnected(a, b) { | |
| return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index; | |
| } | |
| function fade(opacity) { | |
| return d => { | |
| node.style('stroke-opacity', function (o) { | |
| const thisOpacity = isConnected(d, o) ? 1 : opacity; | |
| this.setAttribute('fill-opacity', thisOpacity); | |
| return thisOpacity; | |
| }); | |
| link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity)); | |
| link.attr('marker-end', o => (opacity === 1 || o.source === d || o.target === d ? 'url(#end-arrow)' : 'url(#end-arrow-fade)')); | |
| }; | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment