{
const svg = d3.create('svg')
.attr('width', vis2Width + margin2.left + margin2.right)
.attr('height', vis2Height + margin2.top + margin2.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin2.left}, ${margin2.top})`);
let x = d3.scaleLinear()
.domain(d3.extent(data2, d => d.year))
.range([0, vis2Width])
let y = d3.scaleLinear()
.domain([0, maxStacked])
.range([vis2Height, 0])
let yaxisScale = d3.scaleLinear()
.domain([0, maxStacked / 1000000])
.range([vis2Height, 0])
let color = d3.scaleOrdinal()
.domain(causeList)
.range(d3.schemeTableau10);
let xaxis = g.append("g")
.attr("transform", "translate(0," + vis2Height + ")")
.call(d3.axisBottom(x).tickFormat(d3.format("d")))
let yaxis = g.append("g")
.attr("transform", "translate(0,0)")
.call(d3.axisLeft(yaxisScale).tickFormat(d3.format("d")))
let xLabel = g.append('text')
.attr("x", vis2Width /2)
.attr("y", vis2Height + 40)
.text("Year")
.attr("font-size", 14)
.attr('font-family', 'sans-serif')
.attr("dominant-baseline","middle")
.attr("text-anchor", "middle")
let yLabel = g.append('text')
.attr("x", 0)
.attr("y", 0)
.text("Aid amount (in million USD)")
.attr("font-size", 14)
.attr('font-family', 'sans-serif')
.attr("dominant-baseline","middle")
.attr("text-anchor", "middle")
.attr("transform", `translate(${-50}, ${vis2Height/2})rotate(-90)`)
let highlight = function(event, d){
// reduce opacity of all groups
d3.selectAll(".myArea").style("opacity", .1)
// expect the one that is hovered
d3.select(this).style("opacity", 1)
}
// And when it is not hovered anymore
let noHighlight = function(event, d){
d3.selectAll(".myArea").style("opacity", 1)
}
let area = d3.area()
.x(function(d) { return x(d.data.year); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); })
g.selectAll("mylayers")
.data(stackedData)
.enter()
.append("path")
.attr("class", function(d) { return "myArea " + d.key })
.style("fill", function(d) { return color(d.key); })
.attr("d", area)
.on("mouseover", highlight)
.on("mouseleave", noHighlight)
var size = 20
g.selectAll("myrect")
.data(causeList)
.enter()
.append("rect")
.attr("x", 400)
.attr("y", function(d,i){ return 10 + i*(size+5)})
.attr("width", size)
.attr("height", size)
.style("fill", function(d){ return color(d)})
g.selectAll("mylabels")
.data(causeList)
.enter()
.append("text")
.attr("x", 400 + size*1.2)
.attr("y", function(d,i){ return 10 + i*(size+5) + (size/2)})
.style("fill", function(d){ return color(d)})
.text(function(d){ return d})
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
let title = g.append('text')
.attr("x", vis2Width / 2)
.attr("y", -40)
.text("Ten Most Common Categories of Aid Given Over Time")
.attr("font-size", 18)
.attr('font-family', 'sans-serif')
.attr("dominant-baseline","middle")
.attr("text-anchor", "middle")
let caveat = g.append('text')
.attr("x", vis2Width /2)
.attr("y", vis2Height + 80)
.text("Values computed as average of 5 year periods starting from 1973")
.attr("font-size", 12)
.attr('font-family', 'sans-serif')
.attr("dominant-baseline","middle")
.attr("text-anchor", "middle")
return svg.node()
}