D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bejucoo
Full window
Github gist
nodes circle again
Built with
blockbuilder.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mapa Panamá</title> <script src="https://d3js.org/d3.v4.js"></script> <script src="d3-tip.js"></script> <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> <style type="text/css"> .link.politica { fill: none; stroke: green; stroke-opacity: .1; } .link.social { fill: none; stroke: blue; stroke-opacity: .1; } .link.economica { fill: none; stroke: red; stroke-opacity: .1; } .link.politica-social{ fill: none; stroke: aqua; stroke-opacity: .1; } .link.politica-economica{ fill: none; stroke: yellow; stroke-opacity: .1; } .link.social-economica{ fill: none; stroke: purple; stroke-opacity: .1; } .link.politica-social-economica{ fill: none; stroke: black; stroke-opacity: .1; } .nodos.gobierno { fill: #4f8c9d; } .nodos.patrimonio { fill: #a7dcf9; } .nodos.planeacion{ fill: #154975; } .nodos.ong{ fill: #1cf1a3; } .nodos.gremios{ fill: #0b5313; } .nodos.academia{ fill: #99d683; } .nodos.comunidad{ fill: #359721; } .nodos.privado{ fill: #1ceaf9; } .nodos.medios{ fill: #5f4ac2; } .nodos.otros{ fill: #ccabf0; } text{ font-size: 9px; font-family: "Varela Round", sans-serif; opacity: 0.5; } .d3-tip { line-height: 1; font-weight: bold; font-family: 'Varela Round', sans-serif; text-align: center; font-size: 10px; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 1px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; } /* Style northward tooltips specifically */ .d3-tip.n:after { margin: -2px 0 0 0; top: 100%; left: 0; } </style> </head> <body> <script src="panama_nodos_circulo_6.js"></script> </body> </html>
https://d3js.org/d3.v4.js