How to draw a distribution of points along an Archimedean Spiral using D3.js.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
everything i write on medium is a lie | |
xoxo j$ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var a = Array( 3 ); | |
a; // [] | |
a.length; // 3 | |
a.map( function( v, idx ){ return idx; } ); // [ ] <-- WTF? | |
var b = Array.apply( null, Array(3) ); | |
b; // [undefined,undefined,undefined] | |
b.length; // 3 | |
b.map( function( v, idx ){ return idx; } ); // [0,1,2] <-- :) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// once cached, the css file is stored on the client forever unless | |
// the URL below is changed. Any change will invalidate the cache | |
var css_href = './index_files/web-fonts.css'; | |
// a simple event handler wrapper | |
function on(el, ev, callback) { | |
if (el.addEventListener) { | |
el.addEventListener(ev, callback, false); |
How to draw a distribution of equidistant points along an Archimedean Spiral using D3.js. The solution was taken from this stackoverflow discussion.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"Ministry":"01. Barton (Protectionist), 1 Jan 1901-24 Sept 1903", | |
"Title":"Minister for External Affairs", | |
"Name":"Barton, Edmund", | |
"House":"HR", | |
"Party":"Protectionist", | |
"State":"NSW", | |
"InCabinet":"N/A", | |
"Start":"1901-01-01", |
This is a rough spec for an implementation of a realtime virtual world using OpenStreetMap data and voxel.js. The basic idea is to encode feature data pulled from Mapbox vector tiles as overzoomed tiles, which can be represented as voxels. This allows for easy scalability, since it utilizes existing algorithms and architecture.
The initial implementation is going on here.
###general
- 1 voxel = 1 tile at zoom 17 = 1.1943 sq meters
- the world is a 33,554,432 x 33,554,432 voxel grid
- assume that a server is serving up vector tile pbfs at z15 (mapbox.com, local, etc.)
- vector tiles are loaded at zoom 15 and geometry is encoded as
4096x4096
pixel coordinates, which is equivalent to tiles at zoom 24
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// array utils | |
// ================================================================================================= | |
const combine = (...arrays) => [].concat(...arrays); | |
const compact = arr => arr.filter(Boolean); | |
const contains = (() => Array.prototype.includes | |
? (arr, value) => arr.includes(value) | |
: (arr, value) => arr.some(el => el === value) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-size: 12pt; | |
font-family: monospace; | |
font-weight: normal; | |
font-style: normal; | |
text-decoration: none; | |
color: black; | |
cursor: default; | |
} |