add ring sizes chart

6 years ago · 29e4db812a
parent 52c9854a3e
commit 29e4db812a
4 changed files with 605 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -4,6 +4,7 @@

 - [Difficulty](https://stoffu.github.io/diff-chart/aeon.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/aeon-tx-per-day.html)
+- [Ring sizes](https://stoffu.github.io/diff-chart/aeon-ring-size.html)
 - [Block size](https://stoffu.github.io/diff-chart/aeon-block-size.html)
 - [Blockchain size](https://stoffu.github.io/diff-chart/aeon-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/aeon-block-reward.html)
@ -13,6 +14,7 @@

 - [Difficulty](https://stoffu.github.io/diff-chart/monero.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/monero-tx-per-day.html)
+- [Ring sizes](https://stoffu.github.io/diff-chart/monero-ring-size.html)
 - [Block size](https://stoffu.github.io/diff-chart/monero-block-size.html)
 - [Blockchain size](https://stoffu.github.io/diff-chart/monero-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/monero-block-reward.html)
@ -22,6 +24,7 @@

 - [Difficulty](https://stoffu.github.io/diff-chart/wownero.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/wownero-tx-per-day.html)
+- [Ring sizes](https://stoffu.github.io/diff-chart/wownero-ring-size.html)
 - [Block size](https://stoffu.github.io/diff-chart/wownero-block-size.html)
 - [Blockchain size](https://stoffu.github.io/diff-chart/wownero-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/wownero-block-reward.html)
--- a/aeon-ring-size.html
+++ b/aeon-ring-size.html
@ -0,0 +1,202 @@
+<html>
+<header><title>Aeon ring sizes</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="aeon-data-0.js"></script>
+<script src="aeon-data-1.js"></script>
+<script src="aeon-data-2.js"></script>
+<script src="aeon-data-3.js"></script>
+<script src="aeon-data-4.js"></script>
+<script src="aeon-data-5.js"></script>
+<script src="aeon-data-6.js"></script>
+<script src="aeon-data-7.js"></script>
+<script src="aeon-data-8.js"></script>
+<script src="aeon-data-9.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+chartData = chartData.concat(chartData_1);
+chartData = chartData.concat(chartData_2);
+chartData = chartData.concat(chartData_3);
+chartData = chartData.concat(chartData_4);
+chartData = chartData.concat(chartData_5);
+chartData = chartData.concat(chartData_6);
+chartData = chartData.concat(chartData_7);
+chartData = chartData.concat(chartData_8);
+chartData = chartData.concat(chartData_9);
+
+var chartData_rs = [];
+var last_date = null;
+var histogram = [];
+histogram.length = 30;
+histogram.fill(0);
+
+for (var i = 0; i < chartData.length; ++i) {
+    var block_date = new Date(1000 * chartData[i][0]);
+    block_date.setHours(0);
+    block_date.setMinutes(0);
+    block_date.setSeconds(0);
+    if (last_date === null) {
+        last_date = block_date;
+    }
+    if (last_date < block_date || i == chartData.length - 1) {
+        chartData_rs.push({
+            "date": last_date,
+            "histogram": histogram.slice(),
+        });
+        last_date = block_date;
+        histogram.fill(0);
+    } else {
+        for (var j = 0; j < chartData[i][4].length; ++j) {
+            var ring_size = chartData[i][4][j][3];
+            if (ring_size >= histogram.length) {
+                var offset = histogram.length;
+                histogram.length = ring_size + 1;
+                for (var k = offset; k < histogram.length; ++k)
+                    histogram[k] = 0;
+            }
+            histogram[ring_size] += 1;
+        }
+    }
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData_rs,
+    "valueAxes": [{
+        "stackType": "100%",
+        "axisAlpha": 0.2,
+        "dashLength": 1,
+        "position": "left",
+        "title": "percent",
+    }],
+    "legend": {
+        "align": "center",
+        "equalWidths": false,
+        "valueAlign": "left",
+        "valueText": "[[percents]]%",
+        "valueWidth": 100
+    },
+    "mouseWheelZoomEnabled": true,
+    "graphs": [],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true
+    }
+});
+
+var average_days = 7;
+var levels = [1,2,3,4,5,6,7,8,9,10,15,20,50,100];
+for (var i = 0; i < chartData_rs.length; ++i) {
+    var count_per_level = new Uint32Array(levels.length + 1);
+    for (var j = 0; j < average_days; ++j) {
+        if (i < j)
+            continue;
+        for (var k = 1; k < histogram.length; ++k) {
+            var l = 0;
+            while (l < levels.length && k > levels[l])
+                ++l;
+            count_per_level[l] += chartData_rs[i - j].histogram[k];
+        }
+    }
+    for (var l = 0; l <= levels.length; ++l) {
+        chartData_rs[i]["level" + l] = count_per_level[l];
+    }
+}
+
+var color_table = [
+    "#d77575",
+    "#d7be75",
+    "#a6d775",
+    "#75d78d",
+    "#75d7d7",
+    "#758dd7",
+    "#a675d7",
+    "#d775be",
+];
+
+function get_label(l) {
+    if (l == 0)
+        return levels[0] == 1 ? "1" : ("1~" + levels[0])
+    else if (l == levels.length)
+        return ">" + levels[l - 1];
+    else if (levels[l - 1] + 1 < levels[l])
+        return (levels[l - 1] + 1) + "~" + levels[l];
+    else
+        return levels[l];
+}
+
+chart.graphs = [];
+for (var l = 0; l <= levels.length; ++l) {
+    chart.graphs.push({
+        "id": "g"+l,
+        "lineColor": color_table[l % color_table.length],
+        "showBalloon" : false,
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "fillAlphas": 0.5,
+        "hideBulletsCount": 50,
+        "valueField": "level" + l,
+        "title": get_label(l) + ": ",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    });
+}
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// this method is called when chart is first inited as we listen for "rendered" event
+function zoomChart() {
+    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
+    chart.zoomToIndexes(0, chartData.length - 1);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Aeon ring sizes</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>
--- a/monero-ring-size.html
+++ b/monero-ring-size.html
@ -0,0 +1,216 @@
+<html>
+<header><title>Monero ring sizes</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="monero-data-0.js"></script>
+<script src="monero-data-1.js"></script>
+<script src="monero-data-2.js"></script>
+<script src="monero-data-3.js"></script>
+<script src="monero-data-4.js"></script>
+<script src="monero-data-5.js"></script>
+<script src="monero-data-6.js"></script>
+<script src="monero-data-7.js"></script>
+<script src="monero-data-8.js"></script>
+<script src="monero-data-9.js"></script>
+<script src="monero-data-10.js"></script>
+<script src="monero-data-11.js"></script>
+<script src="monero-data-12.js"></script>
+<script src="monero-data-13.js"></script>
+<script src="monero-data-14.js"></script>
+<script src="monero-data-15.js"></script>
+<script src="monero-data-16.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+chartData = chartData.concat(chartData_1);
+chartData = chartData.concat(chartData_2);
+chartData = chartData.concat(chartData_3);
+chartData = chartData.concat(chartData_4);
+chartData = chartData.concat(chartData_5);
+chartData = chartData.concat(chartData_6);
+chartData = chartData.concat(chartData_7);
+chartData = chartData.concat(chartData_8);
+chartData = chartData.concat(chartData_9);
+chartData = chartData.concat(chartData_10);
+chartData = chartData.concat(chartData_11);
+chartData = chartData.concat(chartData_12);
+chartData = chartData.concat(chartData_13);
+chartData = chartData.concat(chartData_14);
+chartData = chartData.concat(chartData_15);
+chartData = chartData.concat(chartData_16);
+
+var chartData_rs = [];
+var last_date = null;
+var histogram = [];
+histogram.length = 30;
+histogram.fill(0);
+
+for (var i = 0; i < chartData.length; ++i) {
+    var block_date = new Date(1000 * chartData[i][0]);
+    block_date.setHours(0);
+    block_date.setMinutes(0);
+    block_date.setSeconds(0);
+    if (last_date === null) {
+        last_date = block_date;
+    }
+    if (last_date < block_date || i == chartData.length - 1) {
+        chartData_rs.push({
+            "date": last_date,
+            "histogram": histogram.slice(),
+        });
+        last_date = block_date;
+        histogram.fill(0);
+    } else {
+        for (var j = 0; j < chartData[i][4].length; ++j) {
+            var ring_size = chartData[i][4][j][3];
+            if (ring_size >= histogram.length) {
+                var offset = histogram.length;
+                histogram.length = ring_size + 1;
+                for (var k = offset; k < histogram.length; ++k)
+                    histogram[k] = 0;
+            }
+            histogram[ring_size] += 1;
+        }
+    }
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData_rs,
+    "valueAxes": [{
+        "stackType": "100%",
+        "axisAlpha": 0.2,
+        "dashLength": 1,
+        "position": "left",
+        "title": "percent",
+    }],
+    "legend": {
+        "align": "center",
+        "equalWidths": false,
+        "valueAlign": "left",
+        "valueText": "[[percents]]%",
+        "valueWidth": 100
+    },
+    "mouseWheelZoomEnabled": true,
+    "graphs": [],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true
+    }
+});
+
+var average_days = 7;
+var levels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,20,30,40,50,100];
+for (var i = 0; i < chartData_rs.length; ++i) {
+    var count_per_level = new Uint32Array(levels.length + 1);
+    for (var j = 0; j < average_days; ++j) {
+        if (i < j)
+            continue;
+        for (var k = 1; k < histogram.length; ++k) {
+            var l = 0;
+            while (l < levels.length && k > levels[l])
+                ++l;
+            count_per_level[l] += chartData_rs[i - j].histogram[k];
+        }
+    }
+    for (var l = 0; l <= levels.length; ++l) {
+        chartData_rs[i]["level" + l] = count_per_level[l];
+    }
+}
+
+var color_table = [
+    "#d77575",
+    "#d7be75",
+    "#a6d775",
+    "#75d78d",
+    "#75d7d7",
+    "#758dd7",
+    "#a675d7",
+    "#d775be",
+];
+
+function get_label(l) {
+    if (l == 0)
+        return levels[0] == 1 ? "1" : ("1~" + levels[0])
+    else if (l == levels.length)
+        return ">" + levels[l - 1];
+    else if (levels[l - 1] + 1 < levels[l])
+        return (levels[l - 1] + 1) + "~" + levels[l];
+    else
+        return levels[l];
+}
+
+chart.graphs = [];
+for (var l = 0; l <= levels.length; ++l) {
+    chart.graphs.push({
+        "id": "g"+l,
+        "lineColor": color_table[l % color_table.length],
+        "showBalloon" : false,
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "fillAlphas": 0.5,
+        "hideBulletsCount": 50,
+        "valueField": "level" + l,
+        "title": get_label(l) + ": ",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    });
+}
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// this method is called when chart is first inited as we listen for "rendered" event
+function zoomChart() {
+    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
+    chart.zoomToIndexes(0, chartData.length - 1);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Monero ring sizes</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>
--- a/wownero-ring-size.html
+++ b/wownero-ring-size.html
@ -0,0 +1,184 @@
+<html>
+<header><title>Wownero ring sizes</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="wownero-data-0.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+
+var chartData_rs = [];
+var last_date = null;
+var histogram = [];
+histogram.length = 30;
+histogram.fill(0);
+
+for (var i = 0; i < chartData.length; ++i) {
+    var block_date = new Date(1000 * chartData[i][0]);
+    block_date.setHours(0);
+    block_date.setMinutes(0);
+    block_date.setSeconds(0);
+    if (last_date === null) {
+        last_date = block_date;
+    }
+    if (last_date < block_date || i == chartData.length - 1) {
+        chartData_rs.push({
+            "date": last_date,
+            "histogram": histogram.slice(),
+        });
+        last_date = block_date;
+        histogram.fill(0);
+    } else {
+        for (var j = 0; j < chartData[i][4].length; ++j) {
+            var ring_size = chartData[i][4][j][3];
+            if (ring_size >= histogram.length) {
+                var offset = histogram.length;
+                histogram.length = ring_size + 1;
+                for (var k = offset; k < histogram.length; ++k)
+                    histogram[k] = 0;
+            }
+            histogram[ring_size] += 1;
+        }
+    }
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData_rs,
+    "valueAxes": [{
+        "stackType": "100%",
+        "axisAlpha": 0.2,
+        "dashLength": 1,
+        "position": "left",
+        "title": "percent",
+    }],
+    "legend": {
+        "align": "center",
+        "equalWidths": false,
+        "valueAlign": "left",
+        "valueText": "[[percents]]%",
+        "valueWidth": 100
+    },
+    "mouseWheelZoomEnabled": true,
+    "graphs": [],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true
+    }
+});
+
+var average_days = 3;
+var levels = [1,7,8,9,10,11,12,13,14,15,20,50,100];
+for (var i = 0; i < chartData_rs.length; ++i) {
+    var count_per_level = new Uint32Array(levels.length + 1);
+    for (var j = 0; j < average_days; ++j) {
+        if (i < j)
+            continue;
+        for (var k = 1; k < histogram.length; ++k) {
+            var l = 0;
+            while (l < levels.length && k > levels[l])
+                ++l;
+            count_per_level[l] += chartData_rs[i - j].histogram[k];
+        }
+    }
+    for (var l = 0; l <= levels.length; ++l) {
+        chartData_rs[i]["level" + l] = count_per_level[l];
+    }
+}
+
+var color_table = [
+    "#d77575",
+    "#d7be75",
+    "#a6d775",
+    "#75d78d",
+    "#75d7d7",
+    "#758dd7",
+    "#a675d7",
+    "#d775be",
+];
+
+function get_label(l) {
+    if (l == 0)
+        return levels[0] == 1 ? "1" : ("1~" + levels[0])
+    else if (l == levels.length)
+        return ">" + levels[l - 1];
+    else if (levels[l - 1] + 1 < levels[l])
+        return (levels[l - 1] + 1) + "~" + levels[l];
+    else
+        return levels[l];
+}
+
+chart.graphs = [];
+for (var l = 0; l <= levels.length; ++l) {
+    chart.graphs.push({
+        "id": "g"+l,
+        "lineColor": color_table[l % color_table.length],
+        "showBalloon" : false,
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "fillAlphas": 0.5,
+        "hideBulletsCount": 50,
+        "valueField": "level" + l,
+        "title": get_label(l) + ": ",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    });
+}
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// this method is called when chart is first inited as we listen for "rendered" event
+function zoomChart() {
+    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
+    chart.zoomToIndexes(0, chartData.length - 1);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Wownero ring sizes</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>