D3 Examples - Crypto Token Platforms v2

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }
​
  svg {
    padding: 10px 0 0 10px;
  }
​
  .label {
    fill: #000;
    font-family: sans-serif;
    font-size: 8.75pt;
  }
​
  h3 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 14px;
    white-space: nowrap;
  }
​
  h4 {
    margin: 0 0 10px 25px;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
  }
​
  div.tooltip {
    position: absolute;
    max-width: 300px;
    padding: 3px 6px;
    background: whitesmoke;
    border: 1px solid grey;
    border-radius: 3px;
    pointer-events: none;
    padding: 10px;
    border: 1px solid #ddd;
​
    transition: opacity 175ms linear;
    -moz-transition: opacity 175ms linear;
    -webkit-transition: opacity 175ms linear;
​
    transition-delay: 175ms -moz-transition-delay: 175ms;
    -webkit-transition-delay: 175ms;
​
    -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, .5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .5);
​
    -moz-border-radius: 15px;
    border-radius: 15px;
  }
​
  div.tooltip p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0;
    margin: 0;
    text-align: center;
  }
​
  table td {
    /*border: 1px solid red;*/
  }
​
  a {
    font-size: 12px;
  }
​
  #legend-td {
    padding-right: 20px;
    vertical-align: top;
  }
​
  #token-support-td {
    padding-top: 10px;
    vertical-align: top;
  }
​
  #market-cap-support-td {
    vertical-align: top;
    padding-left: 15px;
    padding-top: 10px;
  }
​
  #td-source {
    text-align: center;
    padding: 0;
    font-size: 10px;
  }
​
  #td-source a {
    font-size: 10px;
  }
</style>
​
<body>
  <table>
    <tr>
      <td id='legend-td'>
        <h3>Token Platforms</h3>
        <div id="wrapper-legend"></div>
      </td>
      <td id='token-support-td'>
        <h4>Tokens Supported</h3>
      <div id="wrapper-counts"></div>
    </td>
    <td id='market-cap-support-td'>
      <h4>Market Cap Supported</h3>
      <div id="wrapper-market-cap"></div>
    </td>
  </tr>
  <tr>
    <td colspan='3' id='td-source'>
      Source: <a href='https://coinmarketcap.com/tokens/views/all/' target='_blank'>Coin Market Cap</a>, 2/12/2018
    </td>
</table>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var radius = 100;
​
var tokens = {};
tokens['Ethereum'] = 'https://www.ethereum.org/';
tokens['Waves'] = 'https://wavesplatform.com/';
tokens['BitShares'] = 'https://bitshares.org/';
tokens['Omni'] = 'https://www.omnilayer.org/';
tokens['Counterparty'] = 'https://counterparty.io/';
tokens['Qtum'] = 'https://qtum.org/';
tokens['NEO'] = 'https://neo.org/';
tokens['Nxt'] = 'https://nxtplatform.org/';
tokens['NEM'] = 'https://nem.io/';
tokens['Ubiq'] = 'https://ubiqsmart.com/';
tokens['Burst'] = 'https://www.burst-coin.org/';
tokens['Stellar'] = 'https://www.stellar.org/';
tokens['Ethereum Classic'] = 'https://ethereumclassic.github.io/';
tokens['NuBits'] = 'https://nubits.com/';
tokens['Ardor'] = 'https://www.ardorplatform.org/';
​
var colors = ["#0082c8", "#3cb44b", "#ffe119", "#e6194b", "#f58231", "#911eb4", "#46f0f0", "#f032e6", "#778899", "#fabebe", "#008080", "#72a1d4", "#aa6e28"];
var color = d3.scale.ordinal()
  .range(colors);
​
var tooltip;
​
tooltip = d3.select('body').append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);
​
var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 40);
​
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.amount; });
​
d3.csv("platforms_v4.csv", function(error, data) {
  if (error) throw error;
​
  var splitter = parseInt(data.length / 2);
  var by_marketcap = data.splice(splitter);
  var by_token_cnt = data.splice(0, splitter);
​
  data = by_token_cnt;
  drawCharts(data, '#wrapper-counts');
​
  data = by_marketcap;
  drawCharts(data, '#wrapper-market-cap');
​
});
​
function drawCharts(data, wrapperId) {
​
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Type"; }));
​
  if(wrapperId == '#wrapper-counts') {
    var i = 0;
    d3.keys(data[0]).filter(function(key) {
      if(key !== "Type") {
​
        var table_row = d3.select("#wrapper-legend").append('table').append('tr');
        table_row.append('td').attr('style', 'width:15px;background-color:' + colors[i]).text(' ');
        table_row.append('td').append('a').attr('href',tokens[key]).attr('target','_blank').text(key);
​
        i++;
      }
    });
  }
​
  data.forEach(function(d) {
    d.types = color.domain().map(function(type) {
      return {type: type, amount: +d[type]};
    });
  });
​
  var svg = d3.select(wrapperId).selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", (radius * 2) + 10)
      .attr("height", (radius * 2) + 30)
    .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");
​
  svg.selectAll(".circle")
    .data(function(d) { return pie(d.types); })
    .enter().append("circle")
      .attr("class", "circle")
      .style("stroke", "#202020")
      .style("stroke-width", "3")
      .style("stroke-opacity", "0.02")
      .style("fill-opacity", "0")
      .attr("r", radius);
​
  svg.selectAll(".arc")
    .data(function(d) { return pie(d.types); })
    .enter().append("path")
      .attr("class", "arc")
      .style("stroke", "yellow")
      .style("stroke-width", "0")
      .attr("d", arc)
      .on("mouseover", function(d,i) {
            d3.select(this).style("stroke-width","2");
            d3.select(this).style("stroke","#202020");
            d3.select(this).style("cursor","pointer");
            this.parentNode.appendChild(this);
            setTimeout(showTooltip(d), 3000);
        })
      .on("mouseout", function(d,i) {
            d3.select(this).style("stroke-width","0");
            setTimeout(hideTooltip(), 1000);
        })
      .style("fill", function(d) { return color(d.data.type); });
​
  svg.append("text")
    .attr("dy", "-5px")
    .attr("class", "label")
    .style("text-anchor", "middle")
    .text(function(d) {
      var arr = d.Type.split('|');
      return arr[0];
    });
​
  svg.append("text")
    .attr("dy", "10px")
    .attr("class", "label")
    .style("text-anchor", "middle")
    .text(function(d) {
      var arr = d.Type.split('|');
      return arr[1];
    });
​
  svg.append("text")
    .attr("dy", "115px")
    .attr("class", "label")
    .style("text-anchor", "middle")
    .text(function(d) {
      var arr = d.Type.split('|');
      return arr[2];
    });
​
  svg.append("text")
    .attr("dy", "128px")
    .attr("class", "label")
    .style("text-anchor", "middle")
    .text(function(d) {
      var arr = d.Type.split('|');
      return arr[3];
    });
}
​
function showTooltip(d) {
  var tooltip_msg = '<div class="tooltip">';
  tooltip_msg = `<p>Platform: ${d.data.type}</p>`;
  if(d.data.amount > 300) {
    var dollar_amt = d.data.amount * .000000001;
    dollar_amt = dollar_amt.toFixed(2);
    tooltip_msg = tooltip_msg + `<p>Market cap supported: $${dollar_amt}B</p>`;
  }
  else {
    tooltip_msg = tooltip_msg + `<p>Tokens supported: ${d.data.amount}</p>`;
  }
  tooltip_msg = tooltip_msg + '</div>';
  tooltip.style('opacity', 1);
  tooltip.html(tooltip_msg).style('left', (d3.event.pageX - 75) + 'px').style('top', (d3.event.pageY - 50) + 'px');
}
​
function hideTooltip() {
  tooltip.style('opacity', 0);
}
​
</script>
​
    