D3 Examples - Mapa de Actores e Iniciativas v.1

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
        <title>Mapa de Actores y Proyectos en Territorio</title>
​
        <script src="https://d3js.org/d3.v4.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
        <script src="d3-tip.js"></script>
​
        <style type="text/css">
            .link {
                fill: none;
            stroke: #a0a0a0;
            stroke-opacity: 0.8;
            stroke-width: 2;
            opacity: 0;
            }
​
            .nodos:hover{
                cursor: pointer;
            }
​
            .nodos.iniciativa {
                fill: #fff05f;
                stroke-width: 3px;
            }
​
            .nodos.iniciativa_juvenil {
                fill: #ffad5f;
                stroke-width: 3px;
            }
​
            .nodos.gestion{
                fill: #b9def9;
            }
​
            .nodos.acompañamiento{
                fill: #68b3ff;
            }
​
            .nodos.investigacion{
                fill: #336cc5;
            }
​
            .nodos.judicializacion{
                fill: #202b3f;
            }
​
            .nodos.internacional{
                fill: #3881bf;
            }
​
            .nodos.civil{
                fill: #243f78;
            }
​
            .nodos.gestion_nuevos{
                fill: #fafafa;
                stroke: #b9def9;
                stroke-width: 3px;
            }
​
            .nodos.acompañamiento_nuevos{
                fill: #fafafa;
                stroke: #68b3ff;
                stroke-width: 3px;
            }
​
            .nodos.investigacion_nuevos{
                fill: #fafafa;
                stroke: #336cc5;
                stroke-width: 3px;
            }
​
            .nodos.judicializacion_nuevos{
                fill: #fafafa;
                stroke: #202b3f;
                stroke-width: 3px;
            }
​
            .nodos.internacional_nuevos{
                fill: #fafafa;
                stroke: #3881bf;
                stroke-width: 3px;
            }
​
            .nodos.civil_nuevos{
                fill: #fafafa;
                stroke: #243f78;
                stroke-width: 3px;
            }
​
            .leaflet-pane {
            z-index: 98;
            }
​
            .text{
                font-family: 'Poppins', sans-serif;
                fill: black;
            }
​
            h2 {
            display: block;
            font-size: 1.5em;
            margin-top: 0.1em;
            margin-bottom: 0.1em;
            margin-left: 0;
            margin-right: 0;
            font-weight: bold;
            }
​
            h3 {
            display: block;
            font-size: 1.17em;
            margin-top: 0.05em;
            margin-bottom: 0.05em;
            margin-left: 0;
            margin-right: 0;
            font-weight: bold;
            }
​
            .tooltip {
            position: absolute;
                z-index: 99;
                width: 300px;
                height: 500px;
                border: 2px dashed #bbbbbb;
            background-color: white;
                font-family: 'Poppins', sans-serif;
            font-size: 11px;
            padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
            }
​
            .tooltip_1 {
                position: absolute;
                font-family: 'Poppins', sans-serif;
                text-align: center;
                color: white;
                font-size: 15px;
                text-align: center;
                width: 120px;
                height: 30px;
                z-index: 99;
            }
​
            .tooltip_2 {
                position: absolute;
                font-family: 'Poppins', sans-serif;
                text-align: center;
                color: white;
                font-size: 15px;
                text-align: center;
                width: 150px;
                height: 30px;
                z-index: 99;
            }
​
            .tooltip_logo {
                position: absolute;
                width: 100px;
                height: 100px;
                z-index: 99;
            }
​
            .d3-tip {
                width: 250px;
            height: 170px;
            line-height: 1.4;
                font-family: 'Poppins', sans-serif;
                font-size: 10px;
                color: #000;
                padding: 7px;
            background: rgba(255, 255, 255, 1);
            border-radius: 10px;
                z-index: 99;
            }
​
            /* 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(255, 255, 255, 1);
              position: absolute;
              pointer-events: none;
            }
​
            /* Westward tooltips */
            .d3-tip.w:after {
            content: "\25B6";
            margin: -4px 0 0 -1px;
            top: 50%;
            left: 100%;
            }
​
            .convenciones{
                position: absolute;
                z-index: 99;
            }
​
            .logos{
                z-index:99
            }
​
            br {
            display: block;
                margin: 3px 0;
            }
​
            html, body, #map {
        height: 100%;
        width: 100%;
      }
​
        </style>
    </head>
    <body>
        <div id="map" ></div>
        <script src="casita_proyectos_14.js"></script>
    </body>
</html>
​
    