Skip to content

Instantly share code, notes, and snippets.

View mgold's full-sized avatar

Max Goldstein mgold

88 followers · 3 following
View GitHub Profile
@mgold
mgold / Viennese.elm
Created May 9, 2014 17:31
Viennese Maze
-- Viennese Maze Simulator, based on
-- http://zulko.github.io/blog/2014/04/27/viennese-mazes-what-they-are/
import Keyboard
import Window
import Graphics.Input as Input
-------------
-- Helpers --
-------------
@mgold
mgold / README.md
Last active August 29, 2015 14:10
Zoom Buttons I

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, the map transitions over 350ms.

This is a fork Mike Bostock's Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

See also Zoom Buttons II.

@mgold
mgold / README.md
Last active August 29, 2015 14:10
Zoom Buttons II

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, they are applied immediately, and then every 40ms while the button is held down. This implementation seem susceptible to sudden, unpleasant jumps, especially with rapid clicking, even though the callbacks are carefully managed.

This is a fork Mike Bostock's Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

See also Zoom Buttons I.

@mgold
mgold / README.md
Last active August 29, 2015 14:10
Zoom Buttons III

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, the map transitions over 100ms. Then it checks to see if the button is still held down, and if so continues zooming. Thus, zooming may continue for almost 100ms after the button is released; consider this "scroll with inertia". (It's not a bug, it's a feature!) Control logic is in place to make the buttons feel natural and avoid snapping the map to a new translation instantly.

This is a fork Mike Bostock's Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

S

@mgold
mgold / index.html
Created March 29, 2015 15:08
Knight D3 Module 2
<!DOCTYPE html>
<html>
<head>
<title>Knight D3 Module 2</title>
</head>
<body>
<svg width=960 height=500>
<rect x=50 y=50 width=200 height=600></rect>
<circle cx=150 cy=150 r=50 style="fill:red; stroke:white; stroke-width:5px"></circle>
<circle cx=150 cy=275 r=50 style="fill:yellow; stroke:white; stroke-width:5px"></circle>
@mgold
mgold / README.md
Last active August 29, 2015 14:18
Forested Land Area by Country

Each bar shows the percent of a country's land area covered by forests. Data is taken from No Ceilings series LACFORES.

This is assignment 3 for the Knight D3 course.

@mgold
mgold / index.html
Created April 13, 2015 00:36
Knight D3 Module 4
<!DOCTYPE html>
<html>
<head>
<title>Knight D3 Module 3</title>
<style>
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
@mgold
mgold / index.html
Last active August 29, 2015 14:19
Knight D3 Modules 5
<!DOCTYPE html>
<html>
<head>
<title>Knight D3 Module 5</title>
<style>
body {
margin: 0;
}
.axis path, .axis line {
@mgold
mgold / HIVNFEIN.csv
Last active August 29, 2015 14:19
Knight D3 Module 6
ISO 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
AFG 288 327 359 393 435 479 529 585 648 717 790 866 958 1046 1146 1235 1319 1409
AGO 37927 42940 47857 52770 57610 62449 67163 72024 76600 81136 85612 90133 95204 100958 107242 114162 121466 128413
ARG 14180 15969 17586 19121 20594 21997 23291 24364 25330 26265 27218 27837 28525 29161 29817 30515 31119 31554
ARM 28 46 79 106 128 153 176 201 232 266 301 340 379 425 470 518 570 626
AZE 68 114 177 252 334 419 503 582 657 726 789 849 903 954 1004 1048 1094 1139
BHS 2029 2165 2294 2410 2517 2610 2691 2760 2822 2910 3004 3099 3210 3297 3401 3463 3486 3502
BGD 159 229 314 413 528 658 768 888 1017 1154 1301 1456 1619 1790 1970 2159 2361 2653
BRB 112 136 161 186 210 233 252 267 283 299 312 324 336 347 357 368 380 392
BLR 465 664 913 1213 1560 1979 2463 2990 3554 4110 4644 5112 5565 5966 6309 6581 6870 7139
@mgold
mgold / d3.translate.js
Created July 24, 2015 00:49
/* d3.selection.translate() - an unofficial add-on
Translate an SVG selection by passing in two arguments, a two-value array, or
a function that produces a two-value array when called with the usual arguments.
Pass no arguments to retrieve the current translation.
Caveats: Will clobber any other SVG transforms. Does not work with transitions.
*/
d3.selection.prototype.translate = function(a, b) {
if (typeof a === "function"){