Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Forked from mbostock/.block
Last active December 17, 2015 09:19
Show Gist options
  • Save timelyportfolio/5586845 to your computer and use it in GitHub Desktop.
Save timelyportfolio/5586845 to your computer and use it in GitHub Desktop.
Download ZIP
BIS Derivative Data using Mike Bostock's stacked to multiple bar
Raw
Readme.md

BIS Derivative Data

Explore Using Mike Bostock's Stacked to Multiple Bar Example

To make this work, I had to change up the data transformation. Also, I changed the stack to use the entire height. Thanks to Jason Davies eyedropper I was able to match the colors used in the original BIS publication.

Data Source

BIS OTC Derivatives statistics

Raw
data.csv
Instrument Ignore Jun.98 Dec.98 Jun.99 Dec.99 Jun.00 Dec.00 Jun.01 Dec.01 Jun.02 Dec.02 Jun.03 Dec.03 Jun.04 Dec.04 Jun.05 Dec.05 Jun.06 Dec.06 Jun.07 Dec.07 Jun.08 Dec.08 Jun.09 Dec.09 Jun.10 Dec.10 Jun.11 Dec.11 Jun.12 Dec.12 Jun.13 Dec.13
Total contracts H:N:A:A:A:A:A:5A:5J 72134.2629 80309.39667 81458.48071 88201.50048 94007.85054 95199.49554 99755.42495 111177.8393 127509.1842 141665.1566 169657.5763 197166.9252 220058.1003 258628.4166 282664.6932 299260.85 372512.6992 418131.3908 507907.138 585932.3241 672558.4634 598147.4605 594552.693 603899.8137 582684.8954 601046.3774 706883.6082 647810.8404 639395.4089 632582.4936 692923.5459 710181.8886
Foreign exchange contracts H:N:A:B:A:A:A:5A:5J 18718.838 18011.138 14899.464 14344.45 15494.31 15665.718 16909.874 16747.649 18067.709 18447.914 22070.5 24475.065 26997.071 29288.299 31081.295 31360.382 38127.133 40270.899 48645.304 56238.245 62982.68 50042.263 48732.027 49181.021 53152.79 57795.891 64698.126 63381.392 66672.459 67358.399 73120.541 70552.601
Interest rate contracts H:N:A:C:A:A:A:5A:5J 42368.395 50014.686 54071.504 60090.932 64124.689 64667.584 67465.396 77567.657 89954.606 101657.673 121799.273 141990.565 164626.343 190501.941 204795.275 211970.492 262525.565 291581.482 347312.144 393138.1 458303.947 432657.148 437228.337 449874.737 451831.32 465259.628 553239.837 504117.454 494426.73 489706.366 561313.599 584363.83
Equity-linked contracts H:N:A:D:A:A:A:5A:5J 1273.858 1488.086 1510.793 1809.428 1645.421 1890.537 1884.307 1880.968 2213.524 2308.679 2798.874 3787.131 4520.855 4384.969 4550.632 5793.211 6781.827 7487.958 8589.645 8469.328 10177.249 6471.092 6584.395 5937.488 6259.76 5634.927 6841.283 5982.346 6313.332 6251.373 6821.357 6559.565
Commodity contracts H:N:A:H:A:A:A:5A:5J 443.106 408.024 440.631 548.439 584.168 662.263 590.099 598.054 776.984 923.116 1039.666 1405.909 1269.823 1444.565 2939.878 5434.498 6394.26 7115.01 7566.671 8455.496 13228.677 4427.084 3619.185 2944.018 2851.543 2921.99 3196.664 3091 2993.635 2587.12 2457.901 2205.923
Credit default swaps H:N:A:Y:A:A:A:5A:5J ... ... ... ... ... ... ... ... ... ... ... ... ... 6395.7435 10211.378 13908.285 20352.307 28650.265 42580.546 58243.721 57402.7585 41882.674 36098.169 32692.683 30260.923 29897.578 32409.444 28626.155 26930.32 25068.451 24349.202 21019.823
Unallocated H:N:A:Z:A:A:A:5A:5J 9330.065898 10387.46267 10536.08871 11408.25148 12159.26254 12313.39354 12905.74895 14383.51131 16496.36118 18327.77463 21949.26329 25508.25521 22644.00834 26612.89911 29086.23523 30793.98201 38331.60721 43025.77675 53212.828 61387.43414 70463.15194 62667.19948 62290.57995 63269.8667 38328.55939 39536.3634 46498.25415 42612.49342 42058.93288 41610.78461 24860.94592 25480.14659
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path {
display: none;
}
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.group-label {
font-weight: bold;
text-anchor: end;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<h1>BIS Derivative Data d3 Stacked to Multiple</h1>
<form>
<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
<label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
<script>
var parseDate = d3.time.format("%b.%y").parse,
formatYear = d3.format("02d"),
formatDate = function (d) { return "Q" + ((d.getMonth() / 3 | 0) + 1) + formatYear(d.getFullYear() % 100); };
var margin = { top: 10, right: 20, bottom: 20, left: 60 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y0 = d3.scale.ordinal()
.rangeRoundBands([height, 0], .2);
var y1 = d3.scale.linear();
var y2 = d3.scale.linear();
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(formatDate);
var stack = d3.layout.stack()
.values(function (d) { return d.values; })
.x(function (d) { return d.date; })
.y(function (d) { return d.value; })
.out(function (d, y0) { d.valueOffset = y0; });
var color = d3.scale.ordinal()
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function (error, data) {
var dataByGroup = d3.nest().key(function (d) { return d.Instrument }).entries(data);
var maxval = 0;
dataByGroup = dataByGroup.slice(1, dataByGroup.length);
dataByGroup.forEach(function (d, i) {
d.values = d3.entries(d.values[0]).slice(2, d3.entries(d.values[0]).length);
var tempmax = d3.max(d.values, function (dd) { return +dd.value || 0 });
if (maxval < tempmax) {
maxval = +tempmax;
}
d.values.forEach(function (dd, i) {
dd.date = parseDate(dd.key);
dd.key = null;
dd.group = d.key;
dd.value = +dd.value || 0;
});
});
stack(dataByGroup);
x.domain(dataByGroup[0].values.map(function (d) { return d.date; }));
y0.domain(dataByGroup.map(function (d, i) { return d.key; }));
y1.domain([0, maxval]).range([y0.rangeBand(), 0]);
y2.domain([0, maxval]).range([0, height - 200]);
//match colors to BIS colors used in pdf
//made easy using Jason Davies eyedropper http://www.jasondavies.com/eyedropper/
color
.domain(y0.domain)
.range(["#929993","#c28191","#6cade1","#ffec72","#828fc6","#e3c291"]);
var group = svg.selectAll(".group")
.data(dataByGroup)
.enter().append("g")
.attr("class", "group")
.attr("transform", function (d) { return "translate(0," + y0(d.key) + ")"; });
group.selectAll("rect")
.data(function (d) { return d.values; })
.enter().append("rect")
.style("fill", function (d) { return color(d.group); })
.attr("x", function (d) { return x(d.date); })
.attr("y", function (d) { return y1(d.value); })
.attr("width", x.rangeBand())
.attr("height", function (d) { return y0.rangeBand() - y1(d.value); });
group.append("text")
.attr("class", "group-label")
.attr("x", width)
.attr("y", function (d) { return y1(d.values[0].value / 2); })
.attr("dy", ".35em")
.text(function (d) { return d.key; });
group.filter(function (d, i) { return !i; }).append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y0.rangeBand() + ")")
.call(xAxis);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function () {
d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
if (this.value === "multiples") transitionMultiples();
else transitionStacked();
}
function transitionMultiples() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", function (d) { return "translate(0," + y0(d.key) + ")"; });
g.selectAll("rect")
.attr("height", function (d) { return y0.rangeBand() - y1(d.value); })
.attr("y", function (d) { return y1(d.value); });
g.select(".group-label")
.attr("y", function (d) { return y1(d.values[0].value / 2); })
.attr("x", width);
}
function transitionStacked() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
g.selectAll("rect")
.attr("height", function (d) { return y2(d.value); })
.attr("y", function (d) { return y2(-d.value - d.valueOffset); });
g.select(".group-label")
.attr("y", function (d) {
return y2(-(d.values[d.values.length - 1].value / 2 + d.values[d.values.length - 1].valueOffset));
})
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment