Crypto Token Platforms v2

Source: Coin Market Cap, 2/12/2018

<!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 hideTooltip() {
  tooltip.style('opacity', 0);
}

</script>

https://d3js.org/d3.v3.min.js