| license: mit |
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.
BIS OTC Derivatives statistics
forked from timelyportfolio's block: BIS Derivative Data using Mike Bostock's stacked to multiple bar
| 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 |
| <!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> |