Douglas Duhaime duhaime

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

This is a demonstration of a bi-directional hierarchical sankey diagram produced in javascript, html and css using d3. (Refresh page to generate new random data)

Sankey diagrams represent flows between nodes by varying the thickness of the connecting links.

This diagram was based off of Mike Bostock's sankey diagram, but additionally incorporates bi-directionality into the flow and caters for hierarchical relationships between nodes to allow drill down into the data.

All javascript code to generate the diagram markup is contained in the app.js file, but the underlying calculations are performed using a custom plugin: bihisankey.js.

A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.

It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.

I used Final Cut Pro to crop and export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg

Notes

inspired by pjanik’s blocks
animation frame and FPS calculation powered by d3.timer
3D based frameworks are producing a lot of DOM elements in SVG renderers thanks to shape triangulation
some test have limited number of objects because of high memory needs or incomplete/reference implementation (triangles)
click run link or run single test in the table
path is using d3-path
stackgl based on this block

Jekyll & Liquid Cheatsheet

A list of the most common functionalities in Jekyll (Liquid). You can use Jekyll with GitHub Pages, just make sure you are using the proper version.

Running

Running a local server for testing purposes:

Visual instructions how to enable Google Maps on IOS using `react-native-maps`

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

2. cd GoogleMapPlayground

	# Installation
	brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid

	# Easy Peasy
	ffmpeg -i video.mp4 video.webm

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>San Juan Island Geology - Interactivity</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
	<script src="https://mapzen.com/js/mapzen.min.js"></script>
	<style>
	#map {
	height: 100%;

	var selector = 'img' // Replace this with the selector for the element you want to make transformable


	jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
	jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {

	(function() {
	var $, applyTransform, getTransform, makeTransformable;

	$ = jQuery;