JSFiddle - React, Tailwind, and code Playground

by adrian_gierakowski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://bl.ocks.org/mbostock/raw/7ea1dde508cec6d2d95306f92642bc42/6aac691494f752142a67cc43c51a0fd09896dbd4/versor.js"></script>
<canvas id="globe"></canvas>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #555;
}

#globe {
  cursor: move;  
}

JavaScript

//
// Configuration
//

// scale of the globe (not the canvas element)
var scaleFactor = 0.9
// start angles
var angles = { x: -12, y: -20, z: 0}
// colors
var colorGraticule = '#ccc'
var colorPoint = '#0f0'
var colorPointHighlight = '#f00'
var colorCircle = '#ff0'
var colorPointQuery = '#fff'

//
// Variables
//

var canvas = d3.select('#globe')
var context = canvas.node().getContext('2d')
var projection = d3.geoOrthographic().precision(0.1)
var graticule = d3.geoGraticule10()
var path = d3.geoPath(projection).context(context)
var v0 // Mouse position in Cartesian coordinates at start of drag gesture.
var r0 // Projection rotation as Euler angles at start.
var q0 // Projection rotation as versor at start.
var width, height

//
// Data
//
pointsCout = 6
highlightedStartIndex = 0
highlightedCount = 2

function makePointCoords( index ) {
  return [ 0, 90 * index / pointsCout ]
}

var pointsCoords = _.times( pointsCout, makePointCoords )

var highlightCoords = _( pointsCoords )
  .drop( highlightedStartIndex )
  .take( highlightedCount )
  .value()

var qeuryCoords = pointsCoords[ 0 ]

console.log('pointsCoords', pointsCoords)

var points = {
	'type': 'MultiPoint',
	'coordinates': pointsCoords
};

var pointHighlights = {
	'type': 'MultiPoint',
	'coordinates': highlightCoords
};

var pointQuery = {
	'type': 'Point',
	'coordinates': qeuryCoords
};

var circle = d3.geoCircle().center([0, 0]).radius(50)()


//
// Functions
//

function setAngles() {
  var rotation = projection.rotate()
  rotation[0] = angles.y
  rotation[1] = angles.x
  rotation[2] = angles.z
  projection.rotate(rotation)
}

function scale() {
  width = document.documentElement.clientWidth
  height = document.documentElement.clientHeight
  canvas.attr('width', width).attr('height', height)
  projection
    .scale((scaleFactor * Math.min(width, height)) / 2)
    .translate([width / 2, height / 2])
  render()
}


function dragstarted() {
	console.log('d3.mouse(this)', d3.mouse(this))
  v0 =...