pips.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <style>
      @font-face {
        font-family: bryantreg;
        src: url(fonts/BryantPro-Regular.otf);
      }

      @font-face {
        font-family: bryantbold;
        src: url(fonts/BryantPro-Bold.otf);
      }
        body {
            /* font-family: museo-sans-rounded, sans-serif; */
            font-size: 1vmin;
            margin:   0;
            overflow-x: hidden;
            /* overflow: hidden; */
        }

        .ActionsSlice{
           stroke: #fff;
           stroke-width: 1px;
           cursor: pointer;
       }

       .EarnedSlice{
          stroke: #fff;
          stroke-width: 1px;
          cursor: pointer;
      }

        .slice .hidden-arc {
            fill: none;
        }

        .ActionsSlice text {
            pointer-events: none;
            dominant-baseline: middle;
            text-anchor: middle;
        }

        tspan:last-child {
          font-size: 1vmin;
          fill-opacity: 0.8;
        }
        .node rect {
          shape-rendering: crispEdges;
        }
        .node--hover rect {
          opacity: .5;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

        .browser text {
          text-anchor: end;
          font-family: museo-sans-rounded, sans-serif;
        }

        .axis {
          font-family: museo-sans-rounded, sans-serif;
          font-size: 2vmin;
          font-weight: 500;
        }

        .line {
          fill: none;
          stroke: steelblue;
          stroke-width: 2px;
        }

        .grid line {
          stroke: lightgrey;
          stroke-width: 2px;
          stroke-opacity: 0.7;
          shape-rendering: crispEdges;
        }

        .grid path {
          stroke-width: 0;
        }

        .tooltip {
           position: absolute;
                  width: 110px;
                  height: auto;
                  padding: 10px;

                  -webkit-border-radius: 10px;
                  -moz-border-radius: 10px;
                  border-radius: 10px;
                  /* -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); */
                  /* -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); */
                  /* box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); */
                  pointer-events: none;
                   line-height: 1;
            font-weight: bold;

            background: rgba(255, 255, 255, 0.8);

          }


    </style>
    <meta charset="utf-8"/>
    <script src='js/d3.v4.min.js' charset="UTF-8"></script>
    <link rel="stylesheet" href="https://use.typekit.net/jyh5xls.css">
</head>
<body>
  <div id="page1"></div>
  <div id="page2"></div>
  <div id="page3"></div>
  <div id="page4"></div>
  <div id="page5"></div>
  <div id="page6"></div>
  <div id="page7"></div>
  <div id="page8"></div>
  <div id="page9"></div>
  <div id="page10"></div>

  <script src='js/script.js' charset="UTF-8"></script>
</body>