D3 Examples - Good People to Follow

Good People to Follow

Pictures are a scrollable ul; select "All" in the select box to scroll thru all people.

demonstrates:

genning a canvas globe with topojson

creating a circle from an object with lat-lon coords

and spinning the globe to it via transition, interpolation

canvas is partially responsive

smooth scrolling of ul via transition, interpolation

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Good People to Follow</title>
  <link rel="shortcut icon" type="image/png" href="d3.png">
  <link rel="stylesheet" href="globe-list.css">
</head>
<body>
  <div class="peeps-box">
    <div class="select-box"></div>
    <p>Select:</p>
    <div class="list-box"></div>
  </div>
  <div class="globe-box">
    <h2>Good People to Follow</h2>
    <h3>Click or Select Person to Rotate</h2>
    <div class="canvas-box">
      <div class="slug" style="opacity: 0">
        <div class="slug-img"></div>
        <p>
          <span class="name"></span>
          <a href="" target="_blank"><span class="twitter"></span></a>
        </p>
        <p>
          <span class="city"></span>
          <span class="loc"></span>
        </p>
      </div>
    </div>
  </div>
  <div id="templates" style="display:none">
    <article class="peep-box">
      <p class="peep-name"></p>
      <img src="" alt="">
      <p class="peep-tweet">
        <a href="" target="_blank">
          <svg class="twitter-icon" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" width="1.363em" height="1.108em" version="1.1" viewBox="0 0 171.505 139.378">
            <g transform="translate(-282.32053,-396.30734)">
              <path fill="#2aa9e0" d="m453.826 412.806c-6.31 2.799-13.092 4.69-20.209 5.54 7.264-4.355 12.844-11.25 15.471-19.467-6.799 4.033-14.329 6.961-22.345 8.538-6.418-6.839-15.562-11.111-25.683-11.111-19.432 0-35.187 15.754-35.187 35.185 0 2.758 0.311 5.444 0.912 8.019-29.243-1.467-55.17-15.476-72.525-36.764-3.029 5.197-4.764 11.24-4.764 17.689 0 12.208 6.212 22.977 15.653 29.287-5.768-0.183-11.193-1.766-15.937-4.401-0.004 0.147-0.004 0.294-0.004 0.442 0 17.048 12.129 31.268 28.226 34.503-2.952 0.804-6.061 1.234-9.27 1.234-2.267 0-4.471-0.221-6.62-0.631 4.478 13.979 17.472 24.151 32.87 24.434-12.042 9.438-27.214 15.063-43.7 15.063-2.84 0-5.641-0.167-8.393-0.492 15.572 9.984 34.067 15.809 53.938 15.809 64.72 0 100.113-53.615 100.113-100.114 0-1.526-0.034-3.043-0.102-4.553 6.874-4.96 12.839-11.156 17.556-18.213z"/>
            </g>
          </svg>
        <span class="twitter"></span>
        </a>
      </p>
    </article>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
  <script src="globe-list.js"></script>
</body>
</html>
​
    