Skip to content

Instantly share code, notes, and snippets.

@jpkoning
Last active December 19, 2015 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jpkoning/5927788 to your computer and use it in GitHub Desktop.
Save jpkoning/5927788 to your computer and use it in GitHub Desktop.
Cryptocoin circle chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 2px;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
#tooltip {
position: absolute;
width: auto;
height: auto;
padding: 8px;
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;
}
circle:hover {
stroke: black;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 12px;
line-height: 15px;
}
text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><span id="value" style="font-weight:bold;" ></span></p>
<p>Market cap: $<span id="cap">100</span></p>
<p>Birth: <span id="date">100</span></p>
</div>
<script type="text/javascript">
var data =
[{"Coin":" Bitcoin","Capitalization":897912794 ,"Date":"03-Jan-09","Height":1},
{"Coin":" Litecoin","Capitalization":51368882 ,"Date":"13-Oct-11","Height":1},
{"Coin":" PPCoin","Capitalization":3048986 ,"Date":"12-Aug-12","Height":1},
{"Coin":" Namecoin","Capitalization":2591424 ,"Date":"18-Apr-11","Height":1},
{"Coin":" Novacoin","Capitalization":765401 ,"Date":"13-Feb-13","Height":1},
{"Coin":" Feathercoin","Capitalization":668815 ,"Date":"16-Apr-13","Height":1},
{"Coin":" Terracoin","Capitalization":392077 ,"Date":"07-Nov-12","Height":1},
{"Coin":" Devcoin","Capitalization":272919 ,"Date":"10-Aug-11","Height":1},
{"Coin":" Freicoin","Capitalization":200877 ,"Date":"21-Dec-12","Height":1},
{"Coin":" Yacoin","Capitalization":118092 ,"Date":"05-May-13","Height":1},
{"Coin":" Digitalcoin","Capitalization":76483 ,"Date":"20-May-13","Height":1},
{"Coin":" BBQCoin","Capitalization":68946 ,"Date":"15-Jul-12","Height":1},
{"Coin":" Ixcoin","Capitalization":38914 ,"Date":"10-Aug-11","Height":1},
{"Coin":" WorldCoin","Capitalization":38413 ,"Date":"14-May-13","Height":1},
{"Coin":" CHNCoin","Capitalization":33143 ,"Date":"01-May-13","Height":1},
{"Coin":" Mincoin","Capitalization":31037 ,"Date":"03-Apr-13","Height":1},
{"Coin":" BitBar","Capitalization":19718 ,"Date":"06-May-13","Height":1},
{"Coin":" Luckycoin","Capitalization":11739 ,"Date":"23-May-13","Height":1},
{"Coin":" Memecoin","Capitalization":8737 ,"Date":"27-May-13","Height":1},
{"Coin":" GoldCoin","Capitalization":7540 ,"Date":"15-May-13","Height":1},
{"Coin":" Bytecoin","Capitalization":7263 ,"Date":"01-Apr-13","Height":1},
{"Coin":" Franko","Capitalization":2063 ,"Date":"11-May-13","Height":1},
{"Coin":" Nibble","Capitalization":1587 ,"Date":"26-May-13","Height":1},
{"Coin":" Elacoin","Capitalization":1582 ,"Date":"14-May-13","Height":1},
{"Coin":" AmericanCoin","Capitalization":1385 ,"Date":"29-May-13","Height":1}]
var margin = {top: 20, bottom: 10, right: 40, left: 40};
var w = 705 - margin.left - margin.right;
var h = 380 - margin.top - margin.bottom;
var colors = d3.scale.category20();
var parseDate = d3.time.format("%e-%b-%y").parse;
data.forEach(function(d) {
d.Date = parseDate(d.Date)});
var xScale = d3.time.scale()
.domain(d3.extent(data, function(d){return d.Date;}))
.range([-330,w]);
var yScale = d3.scale.linear()
.domain([0, 2])
.range ([h, 0]);
var rScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.Capitalization; })])
.range([1, 5]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5)
.orient("top");
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom);
svg.append("clipPath")
.attr("id", "chart-area")
.append("rect")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom);
svg.append("g").attr("id", "circles")
.attr("clip-path", "url(#chart-area)").selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {return xScale(d.Date);})
.attr("cy", function(d) {return yScale(d.Height);})
.attr("r", function(d) {return Math.sqrt(d.Capitalization)/64;})
.attr("fill", function(d,i) {return colors(i);})
.on("mouseover", function(d){
var xPosition = parseFloat(d3.select(this).attr("cx"));
var yPosition = parseFloat(d3.select(this).attr("cy")) + 44;
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.Coin);
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#cap")
.text(d3.format("0,000")(d.Capitalization));
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#date")
.text(d3.time.format("%Y-%m-%d")(d.Date));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mousemove", function(d) {
var xPosition = d3.event.pageX - 10;
var yPosition = d3.event.pageY + 10;
d3.select("#tooltip")
.style("left", xPosition - 50 + "px")
.style("top", yPosition + "px")
.style("background-color", parseFloat(d3.select(this).attr("fill")))
.select("#value")
.style("stroke", function (d,i){return colors(i);});
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function(d){
d3.select(this)
.style("stroke", null);
d3.select("#tooltip").classed("hidden", true);
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, " + (h+30) + ")")
.call(xAxis);
svg.append("text")
.attr("class", "axis")
.attr("x", 20)
.attr("y", h + margin.bottom)
.attr("dy", ".87em")
.style("text-anchor", "middle")
.style( "font-style","italic")
.text("Date");
svg.append("text")
.attr("class", "axis")
.attr("x", 10)
.attr("y", margin.bottom)
.attr("dy", ".87em")
.style("text-anchor", "left")
.style( "font-size","18px")
.text("Dates of birth and relative market capitalization of major cryptocoins");
svg.append("text")
.attr("class", "text")
.attr("x", 10)
.attr("y", margin.right)
.attr("dy", ".87em")
.style("text-anchor", "left")
.style( "font-size","11px")
.text("Source: coinmarketcap.com | Date: July 3, 2013 | Hover on circles for details");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment