Skip to content

Commit

Permalink
Updates to README, and added the log scale note.
Browse files Browse the repository at this point in the history
  • Loading branch information
nickwb committed Feb 11, 2018
1 parent 9f4e477 commit 7ceab77
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 6 deletions.
35 changes: 29 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
**[Click here to see the visualization.](http://todo.com)**
# cryptographic
A cryptocurrency visualization. **[Click here to view.](http://todo.com)**

It's an exciting time from cryptocurrency. As of February 2018, there are more than a thousand in existance, with a combined market capitlization of over USD $390 billion.

This is around half the size of *Apple Inc.*, the largest company in the world, valued by markets according to its $375 billion in assets and $230 billion of annual revenues.
## Introduction
It's an exciting time for cryptocurrency. As of February 2018, there are more than a thousand currencies in existence, with a combined [market capitalization](https://en.wikipedia.org/wiki/Market_capitalization) of over **USD $390 billion**.

This visualization shows just 25 of these cryptocurrencies. It's a sample which shows all of the major currencies, plus some others of historical or technological significance.
For comparison, this is around half the size of *Apple Inc.*, the largest publicly-traded company in the world, valued by markets according to its $375 billion in assets and $230 billion in annual revenues.

# cryptographic - A cryptocurrency visualization
Just one year ago, this combined crypto market capitalization was less than $19 billion. Two years ago it was less than $8 billion. A lot of apparent wealth has been created in a very short space of time.

The preeminent and original cryptocurrency, Bitcoin, has grown by ~2200% in that two year period. The remaining growth (~2700%) has come from the alternative currencies (altcoins), which now account for around two thirds of the total market.

This visualization shows just 25 of these cryptocurrencies. It's a sample which shows all of the major currencies, plus some others of historical or technological significance. The 25 selected account for over 90% of the total market capitalization, and over 85% of the total trade volume.

The aim of this visualization is to tell a story of the evolution of cryptocurrency. It shows the different directions the technology has gone, and how the various currencies are now valued relative to each other.

Data for this visualization has been sourced from the excellent: [coinmarketcap.com](https://coinmarketcap.com/).


## Technology
This is a *Pie + Radar + Gauge Chart* written in JavaScript with **d3.js** and **SVG**.

This entire visualization is data driven. You can modify `data.csv` and the graphic will update accordingly. The one exception are the section labels which appear on each pie piece; these have been hand-positioned and are drawn from a static overlay file that you can find under `assets/`.
This entire visualization is data driven. You can modify `data.csv` and the graphic will update accordingly. The one exception are the section labels which appear on each pie piece; these have been hand-positioned and are drawn from a static overlay file that you can find under `assets/`.

## Rendering

Just serve up the static files in this repository from a web server; then load it with a web browser.

For example:

```bash
$ npm install -g http-server
$ http-server .
# Open a browser to localhost:8080
```
9 changes: 9 additions & 0 deletions graphic.js
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,15 @@
.attr('x', bubbleX)
.attr('y', y)
.attr('class', 'key-vol');

y += 40;

// Draw the log scale note
svg.append('text')
.text('Relative metrics use a log scale.')
.attr('x', bubbleX)
.attr('y', y)
.attr('class', 'key-log');
}

function humaniseNumber(val) {
Expand Down
7 changes: 7 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,13 @@
fill: #333;
}

#graphic .key-log {
font-size: 12px;
text-anchor: middle;
alignment-baseline: text-before-edge;
fill: #333;
}

#graphic .key-cap {
font-size: 14px;
font-weight: bold;
Expand Down

0 comments on commit 7ceab77

Please sign in to comment.