Mo' Money; Fewer Problems

This is my favorite graph evar! It has so many cool bars.

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

#viz_container {
  margin: 10px;
}

text {
  font-family:sans-serif;
  fill: #999;
}

text {
  font-size: 20;
}

g rect.money {
  fill: tomato;
}

g rect.problems {
  fill: dodgerblue;
}

line.year-underscore{
	stroke: #ccc    
}
  
.y.axis line {
  fill: none;
  stroke: none;
}

.axis path {
  fill:none;
  stroke: #ccc;
}

</style>

</head>
<body>

var axis_margin = 10;
  
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,500]);

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
		.outerTickSize(0)
    .orient("left");

var x1Axis = d3.svg.axis()
  .scale(x1)
  .tickPadding(20)
	.outerTickSize(0)
  .orient("bottom");

var x2Axis = d3.svg.axis()
  .scale(x2)
  .orient("bottom");

var svg = d3.select("#viz_container").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var gs = svg.selectAll('g')
  .data(data1)
  .enter().append('g')
	.attr('transform',function(d){
    return 'translate('+x1(d.year)+',0)';})
  .attr('class', function(d) {
    return 'g_'+d.year;
  });

gs.append('line')
	.attr('x1',x2.range()[0])
	.attr('x2',x2.range()[1]+x2.rangeBand())
	.attr('y1',y(-15))
	.attr('y2',y(-15))
	.attr('class','year-underscore')

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(x1Axis);
  
var legend = svg.append('g')
.attr('class','legend')
//	.attr('transform','translate(0,'+ x1(2013) +')')

var legend_spacing = 120;
var legend_padding = 8;
var swatch = 15;
var swatch_padding = 10;

var legend_gs = legend.selectAll('rect')
.data(['money','problems'])
.enter().append('g')
.attr('transform',function(d,i){
//  tx = x1(2015)+x2.range()[0];
//	tx = width;
  tx = width-legend_spacing-legend_padding + i*legend_spacing
  ty = 	legend_padding;
//  ty = 5+25*i;
	return'translate(' + tx + ',' + ty +')';
})

legend_gs.append('rect')
.attr('class',function(d){return d})
.attr('height',swatch)
.attr('width',swatch)
.attr('x',-swatch)

legend_gs.append('text')
.attr('x',-(swatch+swatch_padding))
.attr('y',swatch)
.attr('dy','-0.15em')
.attr('text-anchor','end')
.text(function(d){return d})

</script>
</body>
</html>

https://d3js.org/d3.v3.min.js