JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="d3/d3.v2.js"></script>
<!--<script type="text/javascript" src="d3/d3.geo.js"></script>    
<script src="javascript/dnd.js"></script>-->
<script src="javascript/vis.js"></script>
<script type="text/javascript" src="javascript/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.qtip.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css"/>
<link type="text/css" rel="stylesheet" href="colorbrewer/colorbrewer.css"/>
    <div id="wrapper-earth">
      <div id="header">
        d3.geo.azimuthal
        <div><label for="proj">Projection: </label><select id="proj">
          <option value="equalarea">equalarea</option>
          <option value="equidistant">equidistant</option>
          <option value="gnomonic">gnomonic</option>
          <option value="orthographic" selected>orthographic</option>
          <option value="stereographic">stereographic</option>
        </select></div>
        <div class="tip">drag to rotate the origin</div>
        <div><label for="animate">animate:</label>
          <input id="animate" type="checkbox" checked>
        </div>
      </div>
    </div>
    <div id='test' title='this works'>test</div>

CSS

#header {
  top: 7px;
  left: 685px;
  text-align: right;
  width: auto;
}

#header div {
  font-size: 12px;
}

.tip { color: #999; }

#header { display: none;}

JavaScript

$(function(){
    
    function start() {
        var feature // eventually: all svg paths (countries) of the world
  , countries
  , toggle; // animation on/off control

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([400, 400]);

var circle = d3.geo.greatCircle()
    .origin(projection.origin());

// TODO fix d3.geo.azimuthal to be consistent with scale
var scale =
{ orthographic: 380
, stereographic: 380
, gnomonic: 380
, equidistant: 380 / Math.PI * 2
, equalarea: 380 / Math.SQRT2
};

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#wrapper-earth").append("svg:svg")
    .attr("width",  800)
    .attr("height", 800);
    //.on("mousedown", mousedown);

if (frameElement) frameElement.style.height = '800px';

d3.json("javascript/world-countries.json", function(collection) {
  countries = collection;
  feature = svg.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr('id', function(d) { return d.id; })
      .attr('title', function(d) { return d.properties.name; })
      .attr("d", clip).each( function() {
            $(this).qtip({
                content: {
                    attr: 'title'
                },
                show: 'mouseover',
                hide: 'mouseout',
                position: {
                    target: 'mouse',
                    adjust: {
                        mouse: true,
                        y: +10
                        }
                },
                style: {
                    classes: 'ui-tooltip-red ui-tooltip-bootstrap',
                    tip: true
                }
        });
    });
  //feature.append("svg:title")
   //   .text(function(d) { return d.properties.name; });

  startAnimation();
  d3.select('#animate').on('click', function () {
    if (done) startAnimation(); else stopAnimation();
  });
});

function stopAnimation() {
  done = true;
 ...