Skip to content

Instantly share code, notes, and snippets.

@mnemonico

mnemonico/.block

Last active February 11, 2018 15:56
Show Gist options
  • Save mnemonico/aa75ee8950a2d71f6d90aaa469c8e7ec to your computer and use it in GitHub Desktop.
Save mnemonico/aa75ee8950a2d71f6d90aaa469c8e7ec to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
data.json
{
"name": "cryptocurrency",
"children": [
{
"name": "subcurrency",
"children":
[
{
"name": "Bitcoin",
"capitalisation": 146.22
},
{
"name": "Ethereum",
"capitalisation": 87.23
},
{
"name": "Ripple",
"capitalisation": 33.28
},
{
"name": "Bitfinex",
"capitalisation": 19.86
},
{
"name": "Cardano",
"capitalisation": 9.38
},
{
"name": "NEO",
"capitalisation": 7.55
},
{
"name": "Stellar",
"capitalisation": 7.2
},
{
"name": "NEM",
"capitalisation": 5.09
},
{
"name": "Litecoin",
"capitalisation": 6.96
},
{
"name": "EOS",
"capitalisation": 6.11
}
]
}
]
}
Raw
datav.csv
Date Bitcoin Ethereum Ripple Bitfinex Cardano NEO Stellar Litecoin EOS NEM Petrole Or Gaz Euro Livre capitalisation
01-01-2018 13794 736.77002 1.97 2359.30005 0.70833 75 0.354 227.17 7.69 1.02 60.39 1305.8 3.04 1.2003 1.3515 146.22
02-01-2018 13448 752.46002 2.03 2306.1001 0.70667 78.07 0.4848 225.22 7.63 1.01 60.39 1305.3 3.04 1.2013 1.3507 87.23
03-01-2018 14713 858.78003 2.19 2552.30005 0.76471 90 0.557 253.31 8.3 1.13 60.39 1319 3.04 1.2058 1.3588 33.28
04-01-2018 15150 942.01001 2.72 2557.69995 1.12121 105.29 0.886 244.99 9.43 1.75 61.96 1315.5 3.015 1.2015 1.3515 19.86
05-01-2018 15159 939.29999 2.73 2349.69995 1.13636 101.1 0.6948 238.91 9.47 1.6 61.9 1324.42 2.877 1.2068 1.3552 9.38
06-01-2018 16911 962.77002 2.5 2382.19995 1.01695 94.95 0.6351 246.23 9.29 1.56 61.9 1324.41 2.812 1.2029 1.3552 7.55
07-01-2018 17163 1004.29999 2.65 2529.3999 1.01724 100.79 0.6883 279.42 9.83 1.63 61.9 1324.4 2.838 1.2029 1.3552 7.2
08-01-2018 16216 1115.90002 2.77067 2526.19995 1.00898 101.87 0.7054 272.08 10.16 1.8 61.61 1321.8 2.962 1.2029 1.3572 6.96
09-01-2018 14902 1129.40002 2.4 2400 0.89759 100.79 0.614 255.21 9.6 1.57245 61.92 1321.2 2.906 1.1967 1.357 6.11
10-01-2018 14426 1285.69995 2.05 2370.30005 0.8049 127 0.56762 246.9 9.2294 1.44478 63.41 1313.3 3.137 1.1938 1.3541 5.09
11-01-2018 14895 1245.90002 1.94415 2851 0.78254 123 0.55799 249.01 11.2 1.37217 63.5 1317.5 3.137 1.1946 1.3506
12-01-2018 13248 1135.09998 1.92446 2433.5 0.68226 107 0.55811 226.9 11.272 1.24599 63.57 1323.6 3.124 1.2033 1.3538
13-01-2018 13794 1257 2.013 2586.3999 0.89236 123 0.672 235.52 13.8 1.39291 63.57 1323.59 3.117 1.2198 1.3538
14-01-2018 14190 1379.90002 1.99 2660.5 0.88107 138.5 0.65938 258.44 16 1.44405 64.42 1337.7 3.131 1.2198 1.3538
15-01-2018 13558 1349.90002 1.82 2518.6001 0.78914 168.33 0.61938 237.89 13.26 1.30482 64.28 1337.3 3.125 1.2198 1.3731
16-01-2018 13594 1275.80005 1.655 2383.69995 0.77358 180.9 0.5951 232.51 12.78 1.33466 64.43 1337.3 3.251 1.2265 1.3791
17-01-2018 11059 1019.59998 1.14263 1712.90002 0.60503 138.6 0.43 191.13 10 0.93976 63.89 1339 3.198 1.226 1.3791
18-01-2018 11101 1020.09998 1.32 1739.69995 0.62293 138.9 0.475 189 10.15 0.9477 64.07 1327.4 3.198 1.2186 1.3831
19-01-2018 11036 993.91998 1.546 1685.09998 0.64053 138 0.492 192.57 10.182 1.01568 63.74 1327 3.198 1.2236 1.3897
20-01-2018 11462 1032.59998 1.522 1748.59998 0.64952 139.06 0.5 192.5 11.065 1.07264 63.74 1327.01 3.252 1.2268 1.3897
21-01-2018 12732 1146.30005 1.56 2013.69995 0.70538 149.98 0.526 210.91 15.547 1.16885 63.74 1327.02 3.254 1.2268 1.3897
22-01-2018 11519 1047 1.354 1769.5 0.61283 127.37 0.46 191.25 13.44 1.036 63.61 1339.4 3.541 1.2268 1.3881
23-01-2018 10770 995.26001 1.34 1604.69995 0.56455 119.9 0.47754 179.42 13.386 0.97883 63.88 1338.4 3.439 1.2263 1.3989
24-01-2018 10811 982.10999 1.3335 1611.09998 0.56354 116.27 0.484 178.27 12.876 0.94088 64.42 1346.2 3.437 1.2299 1.3999
25-01-2018 11402 1061.80005 1.351 1651.69995 0.63169 135.17 0.56884 180.59 13.95 0.9393 65.88 1362.7 3.437 1.2408 1.4244
26-01-2018 11144 1048.19995 1.301 1627.30005 0.63577 137.45 0.608 178.86 14.251 0.93564 65.25 1352.7 3.078 1.2395 1.4147
27-01-2018 11068 1046.90002 1.20599 1595 0.62124 137.01 0.6271 175.71 14.241 0.85935 65.25 1352.69 3.39 1.2427 1.4147
28-01-2018 11455.1 1114.69995 1.21879 1637 0.62149 139.5 0.611 179.65 14.38 1.03349 66.2 1349 3.187 1.2427 1.4147
29-01-2018 11836 1245.5 1.37 1760.5 0.64243 148 0.624 191.12 14.758 0.99933 66.18 1353.7 3.165 1.2427 1.4163
30-01-2018 11215 1174.30005 1.27127 1650.09998 0.5935 162 0.57936 179.57 13.537 0.92721 65.53 1344 2.956 1.2383 1.4074
31-01-2018 10170 1076.80005 1.1121 1471.40002 0.51071 143.25 0.48752 164.25 11.364 0.79387 64.03 1341.8 2.874 1.2401 1.4148
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.node {
border: solid 1px white;
font: 15px arial;
padding: 10px;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
#tooltip {
position: absolute;
width: 220px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<script>
const margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var div = d3.select("body").append("div")
.style(";position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
const treemap = d3.treemap().size([width, height]);
// The choice variable indicates the period we are woking with to retrive coin's variation, 7 for the last week, 15 last fifteen days and 30 for the last month, this variable will be refreshed via a button events
var choice=7;
//This is just a worthless function :)//
function SignIt(val){
if(val<0){
return "";
}
else {return"+";}
}
// The main code to generate the map
var mousemove = function(d) {
var xPosition = d3.event.pageX + 5;
var yPosition = d3.event.pageY + 5;
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px");
d3.select("#tooltip #heading")
.text(d.data.name + " - " + d.data.capitalisation+"$");
d3.select("#tooltip").classed("hidden", false);
};
var mouseout = function() {
d3.select("#tooltip").classed("hidden", true);
};
d3.csv("datav.csv", function(dt) {
// Calculating the variation ratio for each crypto-coin
variationBitcoin=d3.format(".2f")(100*(dt[dt.length-1-choice].Bitcoin-dt[dt.length-1].Bitcoin)/dt[dt.length-1-choice].Bitcoin)
variationEthereum=d3.format(".2f")(100*(dt[dt.length-1-choice].Ethereum-dt[dt.length-1].Ethereum)/dt[dt.length-1-choice].Ethereum)
variationRipple=d3.format(".2f")(100*(dt[dt.length-1-choice].Ripple-dt[dt.length-1].Ripple)/dt[dt.length-1-choice].Ripple)
variationBitfinex=d3.format(".2f")(100*(dt[dt.length-1-choice].Bitfinex-dt[dt.length-1].Bitfinex)/dt[dt.length-1-choice].Bitfinex)
variationCardano=d3.format(".2f")(100*(dt[dt.length-1-choice].Cardano-dt[dt.length-1].Cardano)/dt[dt.length-1-choice].Cardano)
variationNEO=d3.format(".2f")(100*(dt[dt.length-1-choice].NEO-dt[dt.length-1].NEO)/dt[dt.length-1-choice].NEO)
variationStellar=d3.format(".2f")(100*(dt[dt.length-1-choice].Stellar-dt[dt.length-1].Stellar)/dt[dt.length-1-choice].Stellar)
variationLitecoin=d3.format(".2f")(100*(dt[dt.length-1-choice].Litecoin-dt[dt.length-1].Litecoin)/dt[dt.length-1-choice].Litecoin)
variationEOS=d3.format(".2f")(100*(dt[dt.length-1-choice].EOS-dt[dt.length-1].EOS)/dt[dt.length-1-choice].EOS)
variationNEM=d3.format(".2f")(100*(dt[dt.length-1-choice].NEM-dt[dt.length-1].NEM)/dt[dt.length-1-choice].NEM)
// This list helps us to remedy the synchronisation dilemma
var Mycoins = {"variationBitcoin": variationBitcoin, "variationEthereum": variationEthereum, "variationRipple": variationRipple,"variationBitfinex":variationBitfinex,"variationCardano":variationCardano,"variationNEO":variationNEO,"variationStellar":variationStellar,"variationLitecoin":variationLitecoin,"variationEOS":variationEOS,"variationNEM":variationNEM}
d3.json("data.json", function(error, data) {
if (error) throw error;
const root = d3.hierarchy(data, (d) => d.children)
.sum((d) => d.capitalisation);
const tree = treemap(root);
const node = div.datum(root).selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("background", function(d,i){
if(Mycoins["variation"+d.data.name]<0){
return " #FF0000";} // red color
else {
return "#00FF00"; // green color
}
})
.text((d) => d.data.name+ " " +SignIt(Mycoins["variation"+d.data.name])+Mycoins["variation"+d.data.name]+"%")
.on("mousemove",(d)=> mousemove(d))
.on("mouseout", mouseout);
d3.selectAll("input").on("change", function change() {
const newRoot = d3.hierarchy(data, (d) => d.children)
.sum(value);
});
});
});
</script>
<div id="tooltip" class="hidden">
<p><strong id="heading"></strong></p>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment