{
var margin = {top: 30, right: 30, bottom: 60, left: 60},
width = 600,
height = 400;
const svg = d3.select(DOM.svg(width, height))
var g = svg.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
function drawGraph(data) {
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.day; }))
.range([ 0, width - margin.left - margin.right]);
g.append("g")
.attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
.call(d3.axisBottom(x));
var max_value = d3.max(data.map(function(obj) {return d3.max(
Object.keys(obj).map(function (key) {
return key == 'day'? 0 : obj[key]; }));}))
var y = d3.scaleLinear()
.domain([0, max_value])
.range([ height - margin.top - margin.bottom , 0 ]);
g.append("g")
.call(d3.axisLeft(y));
g.append("rect")
.attr("fill","#94FFB9")
.attr("width", x(new Date("2020-04-7")) - x(new Date("2020-03-17")))
.attr("height", height - margin.top - margin.bottom)
.attr("x", x(new Date("2020-03-17")))
.attr("opacity",0.5);
var runs = [... Array(50).keys()].map(x => x+1)
runs.push("median")
runs.map(function(run) {
var color = run == "median" ? "black" : "grey";
var width = run == "median" ? 1.5 : 1.5;
var alpha = run == "median" ? 1.0 : 0.2;
var path = g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", color)
.attr("stroke-width", width)
.attr("stroke-opacity", alpha)
.attr("d", d3.line()
.x(function(d) { return x(d.day) })
.y(function(d) { return y(d[run]) })
)
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(4000)
.attr("stroke-dashoffset", 0);
}
)
}
drawGraph(sim_data)
return svg.node();
}