Skip to content

Instantly share code, notes, and snippets.

@tophtucker
tophtucker / Makefile
Created August 3, 2015 16:15
Multiline indexing
GENERATED_FILES = \
unemployment.tsv
.PHONY: all clean
all: $(GENERATED_FILES)
clean:
rm -rf -- $(GENERATED_FILES)
@tophtucker
tophtucker / README.md
Last active September 13, 2019 10:00
Mock polygraph illustration
@tophtucker
tophtucker / README.md
Last active April 10, 2017 19:17
Fluid/responsive Bloomberg video player

Wraps the Bloomberg video player in a fluid container that maintains aspect ratio.

  1. Click the 'Share' button and copy the embed code from a Bloomberg video
  2. Paste where it says <!-- PASTE STANDARD EMBED CODE HERE -->
  3. In the embed code, change "offsite_embed":true to "offsite_embed":false

N.B.: The video-wrapper should not contain anything else! If you want to add a caption or something, do it outside.

@tophtucker
tophtucker / index.html
Last active August 29, 2015 14:27
Nested list columns
<!DOCTYPE html>
<meta charset="utf-8">
<style>
ul {
list-style-type: none; /* no bullets */
padding-left: 0; /* no spacing on left */
}
li {
clear: both; /* start a new line, kinda */
@tophtucker
tophtucker / README.md
Last active August 29, 2015 14:27
K-Hole

Factoring out the geometric background part of the opener for this Bloomberg Businessweek story on ketamine. Move your mouse left and right to change the speed. Move your mouse up and down to change the amplitude.

Text can be overlaid with the query string variable text, e.g. http://bl.ocks.org/tophtucker/raw/500d2a010105cfcc87db/?text=KETAMINE.

It's a bunch of concentric circles with exclusion compositing. The radius of the ith circle oscillates with amplitude * Math.sin(t/speed + (t/10000)*i), where t is the number of milliseconds since you loaded the page.

E.g., for amplitude = 5 and speed = 500 (which is the default if you position your mouse in the middle of the page), the radius of circle i at time t oscillates with period (20000π)/(20+i) in t ([WolframAlpha](http://www.wolframalpha.com/input/?i=5*sin%28t%2F500+%2B+%28t%2F10000%29*i%

@tophtucker
tophtucker / README.md
Last active October 9, 2015 08:23
How LIBOR works

Every day, 16 banks say how much it might cost them to borrow in various currencies, for various lengths of time. The four highest and four lowest figures are discarded, and the average of the remaining eight become that day’s Libor. In this toy model of how Libor works, you have total control over how one bank sets its rates, and some random partial influence on other banks, who will tend to follow you. Move your mouse along the axis to set your rate. Read the full story

@tophtucker
tophtucker / index.html
Last active October 9, 2015 08:12
Lenticular
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / index.html
Last active September 13, 2019 10:02
Lenticular II
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / index.html
Last active September 13, 2019 10:01
Lenticular III
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / index.html
Last active October 9, 2015 08:15
Lenticular IV
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>