D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
magnuseide
Full window
Github gist
parliamentary motion radial network diagram
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .node { font: 300 .8em "Berlingske Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; fill: #444; } .link { fill: none; stroke-opacity: 0.6; stroke-linecap: round; } .color_A { stop-color: rgb(255, 0, 0); fill: rgb(255, 0, 0) } .color_H { stop-color: rgb(0, 89, 255); fill: rgb(0, 89, 255); } .color_FrP { stop-color: rgb(4, 22, 105); fill: rgb(4, 22, 105); } .color_TF { stop-color: #f50; fill: #f50; } .color_V { stop-color: rgb(0, 255, 191); fill: rgb(0, 255, 191); } .color_SV { stop-color: rgb(255, 0, 191); fill: rgb(255, 0, 191); } .color_KrF { stop-color: rgb(255, 215, 115); fill: rgb(255, 215, 115); } .color_Sp { stop-color: green; fill: green; } .color_MDG { stop-color: rgb(108, 189, 108); fill: rgb(108, 189, 108); } .color_R { stop-color: rgb(146, 18, 18); fill: rgb(146, 18, 18); } .invisible { opacity: 0; } .link--inactive { stroke: #ccc !important; opacity: .3; z-index: 0; } #singleviz_containter:hover .link:not(.link--active) { stroke: #ccc; opacity: .3; } .link--active { z-index:200; opacity: 1; } .node--target { fill: #f60; font-weight: bold; } .node--source { font-weight: bold; } .blink { /* animation: blink 1s ease-in; */ } @keyframes blink { 0%, 100% { font-size: .8em; } 50% { font-size: 1.2em; } } .blink::before { content: " "; display: block; background: #f60; width: 2em; height: 2em;; } #FS_animate { position: fixed; bottom: 30px; right:30px; } </style> </head> <body> <div id="reptest" style="position: relative;"></div> <script src="/repforslag.js"></script> </body>
https://d3js.org/d3.v4.min.js