Skip to content

Instantly share code, notes, and snippets.

View dwtkns's full-sized avatar

Derek Watkins dwtkns

116 followers · 6 following
View GitHub Profile
@dwtkns
dwtkns / README.md
Last active October 19, 2023 16:44
Slippy map + extent indicator
@dwtkns
dwtkns / README.md
Last active March 28, 2023 23:31
Faux-3D Arcs

Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.

@dwtkns
dwtkns / snippet.js
Created November 20, 2013 18:47
Snippet to paste into console to load d3 onto a page
var s=document.createElement('script'); s.type='text/javascript'; s.src='http://d3js.org/d3.v3.min.js'; document.head.appendChild(s);
@dwtkns
dwtkns / closest_point_on_perimeter_of_rectangle.js
Created November 10, 2015 03:14
Finds the location on the perimeter of a given rectangle that is closest to a given point.
// translated from http://stackoverflow.com/questions/20453545/how-to-find-the-nearest-point-in-the-perimeter-of-a-rectangle-to-a-given-point
function clamp(n,lower,upper) {
return Math.max(lower, Math.min(upper, n));
}
function getNearestPointInPerimeter(l,t,w,h,x,y) {
var r = l+w,
b = t+h;
@dwtkns
dwtkns / README.md
Last active April 19, 2020 22:30
Faux-3d Shaded Globe

Faux-3d SVG globe using d3.geo.orthographic and a few radial gradients. Labels offset or hidden based on radians from current map center to enhance the effect.

Uncomment svg.append("g").attr("class","countries") for hover-able country outlines.

@dwtkns
dwtkns / README.md
Last active May 28, 2019 06:59
Sun and Earth

Experiments faking 3d rotation of a globe and sun in SVG. Illusion is helped by dynamic gradients, two nested orthographic projections, scaling the sun circle's radius based on distance from the 'camera', and toggling a clipping mask that makes the sun appear to move "behind" the earth.

Based on Mike Bostock's Solar Terminator and this past experiment.

This example stems from drafts of maps for Norway the Slow Way. Also see Mike's Pencil Sketch example.

@dwtkns
dwtkns / index.html
Created August 7, 2014 11:33
Simple D3 US Map
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
fill: none;
stroke: black;
opacity:0.2;
}
@dwtkns
dwtkns / google-earth-perspective-to-geojson.js
Last active October 1, 2017 20:20
OSAscript to output the footprint of what's visible in the current Google Earth Pro window as a geojson file
#!/usr/bin/env osascript -l JavaScript
// usage: google-earth-perspective-to-geojson.js xSamples ySamples > currentPerspective.geojson
function run(argv) {
var xSamples = argv[0] || 50;
var ySamples = argv[1] || 50;
var ge = Application('Google Earth Pro');
@dwtkns
dwtkns / l8get
Last active October 1, 2017 20:19
A shell function to quickly grab the data for a given Landsat 8 tile ID from Google's servers
# This is a shell function to quickly grab the data for a given Landsat 8 tile ID from Google's servers
# For example:
# l8get LC81690352014169LGN00
# The echo at the end is to remind myself of the syntax for extracting bands 8, 4, 3, and 2. (Pansharp, Red, Green, Blue)
# On OSX this would go into your ~/.bash_profile file.
# Requires gsutil from https://developers.google.com/storage/docs/gsutil_install
# Most useful in conjunction with USGS' Earth Explorer: http://earthexplorer.usgs.gov/
@dwtkns
dwtkns / index.html
Created November 16, 2013 18:51
Umm
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path { fill:none; stroke:white; }
.bg { fill: #446;}
.inner { stroke-width: 500px; stroke: #ffc; opacity: .2;}
.dark { stroke: #114; opacity:.2;}
</style>