Based on the chart at the bottom of http://bost.ocks.org/mike/path/, a mock polygraph illustration driven by mouse and scroll events, with some sine noise. Used in this story: http://www.bloomberg.com/graphics/2015-doug-williams-war-on-lie-detector/
GENERATED_FILES = \ | |
unemployment.tsv | |
.PHONY: all clean | |
all: $(GENERATED_FILES) | |
clean: | |
rm -rf -- $(GENERATED_FILES) |
Wraps the Bloomberg video player in a fluid container that maintains aspect ratio.
- Click the 'Share' button and copy the embed code from a Bloomberg video
- Paste where it says
<!-- PASTE STANDARD EMBED CODE HERE -->
- 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.
<!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 */ |
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 i
th 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%
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
<!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> | |
<!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> | |
<!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> | |
<!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> | |