Last active
May 15, 2017 22:56
-
-
Save jqadrad/819518e2dd11cb1eec6132837186db93 to your computer and use it in GitHub Desktop.
Grouped barchart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"Date": "2017-04-28", | |
"DRK": "0.01136728", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-04-29", | |
"DRK": "0.01008568", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-04-30", | |
"DRK": "0.011435", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-05-01", | |
"DRK": "0.01228044", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-05-02", | |
"DRK": "0.01299756", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-05-03", | |
"DRK": "0.01091016", | |
"BTC": 0, | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-05-04", | |
"DRK": "0.01062691", | |
"BTC": "0.00000446", | |
"LTC": "0.00031686" | |
}, | |
{ | |
"Date": "2017-05-05", | |
"DRK": "0.00748826", | |
"BTC": "0.0005732", | |
"LTC": "0.00370733" | |
}, | |
{ | |
"Date": "2017-05-06", | |
"DRK": "0.0073813", | |
"BTC": "0.0001493", | |
"LTC": "0.0085804" | |
}, | |
{ | |
"Date": "2017-05-07", | |
"DRK": "0.00724328", | |
"BTC": "0.0001518", | |
"LTC": "0.00872179" | |
}, | |
{ | |
"Date": "2017-05-08", | |
"DRK": "0.00538061", | |
"BTC": "0.00011732", | |
"LTC": "0.00614546" | |
}, | |
{ | |
"Date": "2017-05-09", | |
"DRK": "0.00724046", | |
"BTC": "0.00014552", | |
"LTC": "0.00819704" | |
}, | |
{ | |
"Date": "2017-05-10", | |
"DRK": "0.0081169", | |
"BTC": "0.00013584", | |
"LTC": "0.00823043" | |
}, | |
{ | |
"Date": "2017-05-11", | |
"DRK": "0.00647774", | |
"BTC": "0.00011364", | |
"LTC": "0.00579762" | |
}, | |
{ | |
"Date": "2017-05-12", | |
"DRK": "0.00039111", | |
"BTC": "0.00054794", | |
"LTC": " 0.00038838" | |
}, | |
{ | |
"Date": "2017-05-13", | |
"DRK": 0, | |
"BTC": "0.00052669", | |
"LTC": 0 | |
}, | |
{ | |
"Date": "2017-05-14", | |
"DRK": "0.00284673", | |
"BTC": "0.00035733", | |
"LTC": 0 | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
/*display: none;*/ | |
} | |
.bar:hover { | |
fill: orangered ; | |
} | |
.d3-tip { | |
line-height: 1; | |
font-weight: bold; | |
padding: 12px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
border-radius: 2px; | |
} | |
/* Creates a small triangle extender for the tooltip */ | |
.d3-tip:after { | |
box-sizing: border-box; | |
display: inline; | |
font-size: 10px; | |
width: 100%; | |
line-height: 1; | |
color: rgba(0, 0, 0, 0.8); | |
content: "\25BC"; | |
position: absolute; | |
text-align: center; | |
} | |
/* Style northward tooltips differently */ | |
.d3-tip.n:after { | |
margin: -1px 0 0 0; | |
top: 100%; | |
left: 0; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<svg width="960" height="500"></svg> | |
<script> | |
var svg = d3.select('svg'), | |
margin = { top: 20, right: 50, bottom: 100, left: 50 }, | |
width = +svg.attr('width') - margin.left - margin.right, | |
height = +svg.attr('height') - margin.top - margin.bottom, | |
g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
// Graph title | |
g.append('text') | |
.attr('x', (width / 2)) | |
.attr('y', 0 - (margin.top / 3)) | |
.attr('text-anchor', 'middle') | |
.style('font-size', '16px') | |
.text('Mining chart'); | |
// Function to convert a string into a time | |
var parseTime = d3.time.format('%Y-%m-%d %H:%M').parse; | |
// Function to show specific time format | |
var formatTime = d3.time.format('%e %B'); | |
d3.json("data.json", function(error, data) { | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-10, 0]) | |
.html(function(d) { | |
return "<span style='color:red'>" + d.worth + " </span> <strong>" + d.currency + "</strong>"; | |
}) | |
svg.call(tip); | |
var color = d3.scale.category10(); | |
color.domain(d3.keys(data[0]).filter(function(key) { | |
return key !== "Date" && key !== "_id"; | |
})); | |
// Correct the types | |
data.forEach(function(d) { | |
d.date = parseTime(d.Date); | |
}); | |
var rewards = color.domain().map(function(name) { | |
return { | |
name: name, | |
values: data.map(function(d) { | |
return { | |
date: d.date, | |
worth: +d[name], | |
currency: name | |
}; | |
}) | |
}; | |
}); | |
var num_bars = d3.keys(rewards).length; | |
var num_days = data.length; | |
var y = d3.scale.linear().range([height, 0]); | |
y.domain([ | |
0, | |
d3.max(rewards, function(c) { | |
return d3.max(c.values, function(v) { | |
return v.worth; | |
}); | |
}) | |
]); | |
var x0 = d3.scale.ordinal() | |
.domain(d3.range(num_days)) | |
.rangeBands([0, width], .2); | |
var x1 = d3.scale.ordinal() | |
.domain(d3.range(num_bars)) | |
.rangeBands([0, x0.rangeBand()]); | |
var color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x0) | |
.tickFormat(function(d) { | |
return data[d].Date; | |
}) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
g.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Amount"); | |
g.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.style("text-anchor", "end") | |
.attr("dx", "-.8em") | |
.attr("dy", ".15em") | |
.attr("transform", function(d) { | |
return "rotate(-90)" | |
}); | |
// Add the bars | |
g.append("g").selectAll(".bar") | |
.data(rewards) | |
.enter().append("g") | |
.style("fill", function(d, i) { | |
return color(i); | |
}) | |
.attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; }) | |
.selectAll("rect") | |
.data(function(d) { | |
return d.values; | |
}) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("width", x1.rangeBand()) | |
.attr("height" ,function(d) { | |
return height - y(d.worth); | |
}) | |
.attr("x", function(d, i) { | |
return x0(i); | |
}) | |
.attr("y", function(d) { | |
return y(d.worth); | |
}) | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide); | |
var legend = g.append("g") | |
.attr("font-family", "sans-serif") | |
.attr("font-size", 10) | |
.attr("text-anchor", "end") | |
.selectAll("g") | |
.data(rewards) | |
.enter().append("g") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", width - 19) | |
.attr("width", 19) | |
.attr("height", 19) | |
.attr("fill", function(d, i) { | |
return color(i); | |
}) | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9.5) | |
.attr("dy", "0.32em") | |
.text(function(d) { return d.name; }); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment