Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
.categories { | |
height: 10; | |
width: 20; | |
x: 10; | |
y: 10; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var width = 900; | |
var height = 650; | |
var x = d3.scaleBand() | |
.rangeRound([0, width]) | |
.padding(0.1) | |
.align(0.1); | |
var y = d3.scaleLinear() | |
.rangeRound([height, 0]); | |
var z = d3.scaleOrdinal() | |
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
var transactions = [ | |
{amount: 2700.00, vendor: "check", date: "3/01/2016", category: "rent"}, | |
{amount: 48.87, vendor: "oreillys autoparts", date: "3/21/2016", category: "auto parts"}, | |
{amount: 68.43, vendor: "Van Kleef", date: "4/04/2016", category: "bars"}, | |
{amount: 22.43, vendor: "pub", date: "4/04/2016", category: "bars"}, | |
{amount: 18.87, vendor: "oreillys autoparts", date: "5/21/2016", category: "auto parts"} | |
]; | |
//assign months | |
var parseDate = d3.timeParse("%m/%d/%Y"); | |
var formatMonth = d3.timeFormat("%m-%y"); | |
transactions.forEach(function(d) { | |
d.date = +parseDate(d.date); | |
var month = formatMonth(d.date); | |
d.month = month; | |
}); | |
//group by month and then category | |
var byCategory = d3.nest() | |
.key(function(d) { return d.month; }) | |
.key(function(d) { return d.category; }) | |
.entries(transactions); | |
//console.log(transactions); | |
//console.log(byCategory); | |
//create a rollup total for each category | |
var sumCategory = d3.nest() | |
.key(function(d) { return d.month; }) | |
.key(function(d) { return d.category; }) | |
.rollup(function(leaves) { | |
return { | |
"total": d3.sum(leaves, function(d) { return parseFloat(d.amount); }) | |
} | |
}) | |
.entries(transactions); | |
console.log(sumCategory); | |
// Set the domains | |
x.domain([d3.min(sumCategory, function(d) { return d.month; }),d3.max(sumCategory, function(d) { return d.month; })]); | |
//x domain map to month | |
y.domain([0, d3.max(sumCategory, function(d) { return d.amount; })]).nice(); | |
//y domain needs to map to amount by month | |
z.domain(function(d) { return d.category; }); | |
//z domain needs to map to categories | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
g = svg.append("g"); | |
g.selectAll(".categories") | |
.data(byCategory) | |
.enter().append("rect") | |
.attr("class", "categories") | |
.attr("fill", function(d) { return z(d.key); }) | |
.attr("x", 6) | |
.attr("y", 20) | |
.attr("height", 20) | |
.attr("width", 40) | |
g.selectAll("rect") | |
.data(byCategory) | |
.enter().append("rect") | |
.attr("fill", function(d) { return z(d.key); }) | |
.attr("x", function(d) { return x(d.month); }) | |
.attr("y", function(d) { return y(d[1]); }) | |
.attr("height", function(d) { return y(d[0]) - y(d[1]); }) | |
.attr("width", x.bandwidth()); | |
var testMap = d3.values(sumCategory).map(function(d) { return d.key; }) | |
console.log(testMap); | |
g.selectAll(".bars") | |
.data(sumCategory) | |
.enter().append("rect") | |
.attr("class", "bars") | |
.attr("x", function(d) { return y(d); }) | |
.attr("y", function(d) { return y(d.key); }) | |
.attr("height", 20) | |
.attr("width", x.bandwidth()) | |
.attr("fill", "red") | |
</script> | |
</body> |
.categories { | |
height: 10px; | |
width: 20px; | |
} |