D3 Examples - The growth of ICO

The growth of ICO

As the Cryptocurrency is growing more faster. ICO, initial coin offering, is becoming more and more common nowadays. Just like IPO, instead of offering shares of company, firm will raise money by given cryptocoins. This train is runing like light speed and there are more people wants to join in this game.

But to be honest, it was not until this week I saw the news that China had banned ICO that I knew what ICO was and how big it was. I'm curious how high has ICO climbed. I download the dataset from CoinDesk, a website dedicate to focus on the cryptocoin market and track ICO activities.

The dataset can be downloaded. And it has 6 columns, the sample data is the following,

Name: Coin name

Open Date: Open date for ICO

Close Date: Close date for ICO

Website: Website link

Whitepaper: Weblink for the whitepaper

Asset: Inital for the coin

ICO Size($m): Total ICO size

Before I visualize the data, I use Pandas to groupby the data based on the year of the open date then do the aggregation. Finally, the data is categorized into 4 different year group with the sum of the ICO cap size and ICO events count. Then it can be easily visualized with bar chart. We can see from the chart the ICO is like in the ROCKET.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 18pt;
      font-family: 'Open Sans', sans-serif;
      alignment-baseline: middle;
      fill: #001f3f;
    }
    .number {
      font-size: 18pt;
      font-family: 'Open Sans', sans-serif;
      alignment-baseline: middle;
      fill: #001f3f;     
    }
    .subtitle {
      font-size: 40pt;
      font-family: 'Open Sans', sans-serif;
      alignment-baseline: middle;
      fill: #FF4136;
    }
    .reference {
      font-size: 10pt;
      font-family: 'Open Sans', sans-serif;
      alignment-baseline: left;
      fill: #AAAAAA;      
    }
    .bar {
      fill: #85144b;
    }
    .bar:hover {
      fill: #F012BE;
    }
    
        div.tooltip {   
        position: absolute;         
        text-align: center;         
        width: 150px;                   
        height: 30px;
      vertical-align: middle;
      line-height: 30px;
            font-family:'Open Sans', sans-serif;
        background: #FFDC00;    
        border: 0px;        
        border-radius: 8px;         
        pointer-events: none;           
        }
    
    
  </style>
</head>
​
<body>
  <script>
    const width = 960;
    const height = 500;
    const margin = {
      left: 50,
      right: 200,
      top: 100,
      bottom: 50
    }
    
​
    const svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    
    svg.append('text')
        .attr('class', 'subtitle')
        .attr('x', margin.left)
        .attr('y', 50)
            .style('font-weight', 'bold')
        .text('ICO is on the rocket');
    
    svg.append('text')
        .attr('class', 'subtitle')
        .attr('x', margin.left)
        .attr('y', 90)
            .style('font-size', '20px')
        .text('Initial Coin Offering: Company raises more and more money');
    
    svg.append('text')
        .attr('class', 'reference')
        .attr('x', width- 0.52*margin.right)
        .attr('y', 50)
            .attr('font-style', 'italic')
        .text('Unit: $ US Dollar');
    
    
    svg.append('text')
        .attr('class', 'reference')
        .attr('x', width - 1.55 * margin.right)
        .attr('y', height - margin.bottom)
            .attr('font-style', 'italic')
        .text('Data source: https://www.coindesk.com/ico-tracker/');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    // loading data
    const data = [
      {
        name: "2017",
        value: 1460.26,
        count: 116,
      },
      {
        name: "2016",
        value: 243.78,
        count: 39,
      },
      {
        name: "2015",
        value: 7.87,
        count: 6,
      },
      {
        name: "2014",
        value: 31.17,
        count: 8,
      }
    ];
    
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
​
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
    
    const xValue = d => d.value;
    const yValue = d => d.name;
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, xValue)])
      .range([0, innerWidth]);
    
    const yScale = d3.scaleBand()
      .domain(data.map(yValue).reverse())
      .range([innerHeight, 0])
      .padding(0.25);
    
    const groups = g.selectAll('g').data(data);
    const groupsEnter = groups
      .enter().append('g')
        .attr('transform', d => `translate(0, ${yScale(yValue(d))})`);
    
    groupsEnter
      .append('rect')
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
            .attr('x', 60)
        .attr('fill', '#111111')
            .on("mouseover", function(d) {
            div.transition()        
                .duration(200)      
                .style("opacity", 1);       
            div.html("ICO count:"+d.count)  
               .style("left", (d3.event.pageX) + "px")      
               .style("top", (d3.event.pageY - 20) + "px"); 
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
               .duration(500)       
               .style("opacity", 0);    
        });
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 0)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 65)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)+'M'}`);
    
​
  </script>
</body>
    