Built with blockbuilder.org
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/d3"></script>
</head>
<body style="background-color:white;">
<script>
var data = [
{
"idx": "A",
"date": "2000-12-31",
"perf": -4.5761
},
{
"idx": "A",
"date": "2001-12-31",
"perf": -15.0073
},
{
"idx": "A",
"date": "2002-12-31",
"perf": -17.911
},
{
"idx": "A",
"date": "2003-12-31",
"perf": 18.5215
},
{
"idx": "A",
"date": "2004-12-31",
"perf": -15.0506
},
{
"idx": "A",
"date": "2005-12-31",
"perf": -18.6963
},
{
"idx": "A",
"date": "2006-12-31",
"perf": -8.8435
},
{
"idx": "A",
"date": "2007-12-31",
"perf": -8.6675
},
{
"idx": "A",
"date": "2008-12-31",
"perf": -6.3162
},
{
"idx": "A",
"date": "2009-12-31",
"perf": -4.4992
},
{
"idx": "B",
"date": "2000-12-31",
"perf": -15.469
},
{
"idx": "B",
"date": "2001-12-31",
"perf": 15.4334
},
{
"idx": "B",
"date": "2002-12-31",
"perf": 9.1245
},
{
"idx": "B",
"date": "2003-12-31",
"perf": 17.9742
},
{
"idx": "B",
"date": "2004-12-31",
"perf": -8.7123
},
{
"idx": "B",
"date": "2005-12-31",
"perf": 4.4175
},
{
"idx": "B",
"date": "2006-12-31",
"perf": -9.2237
},
{
"idx": "B",
"date": "2007-12-31",
"perf": -8.1461
},
{
"idx": "B",
"date": "2008-12-31",
"perf": 14.835
},
{
"idx": "B",
"date": "2009-12-31",
"perf": -14.0465
},
{
"idx": "C",
"date": "2000-12-31",
"perf": -4.4291
},
{
"idx": "C",
"date": "2001-12-31",
"perf": -3.4441
},
{
"idx": "C",
"date": "2002-12-31",
"perf": 1.7558
},
{
"idx": "C",
"date": "2003-12-31",
"perf": -5.0047
},
{
"idx": "C",
"date": "2004-12-31",
"perf": -14.5759
},
{
"idx": "C",
"date": "2005-12-31",
"perf": 6.6994
},
{
"idx": "C",
"date": "2006-12-31",
"perf": -1.5583
},
{
"idx": "C",
"date": "2007-12-31",
"perf": -13.2864
},
{
"idx": "C",
"date": "2008-12-31",
"perf": -7.2503
},
{
"idx": "C",
"date": "2009-12-31",
"perf": 15.2747
},
{
"idx": "D",
"date": "2000-12-31",
"perf": 13.9626
},
{
"idx": "D",
"date": "2001-12-31",
"perf": 3.243
},
{
"idx": "D",
"date": "2002-12-31",
"perf": -13.3865
},
{
"idx": "D",
"date": "2003-12-31",
"perf": 15.8711
},
{
"idx": "D",
"date": "2004-12-31",
"perf": -6.6842
},
{
"idx": "D",
"date": "2005-12-31",
"perf": 6.5636
},
{
"idx": "D",
"date": "2006-12-31",
"perf": 11.7851
},
{
"idx": "D",
"date": "2007-12-31",
"perf": -19.8014
},
{
"idx": "D",
"date": "2008-12-31",
"perf": 15.0866
},
{
"idx": "D",
"date": "2009-12-31",
"perf": 19.3894
},
{
"idx": "E",
"date": "2000-12-31",
"perf": -18.8695
},
{
"idx": "E",
"date": "2001-12-31",
"perf": -14.0828
},
{
"idx": "E",
"date": "2002-12-31",
"perf": 18.333
},
{
"idx": "E",
"date": "2003-12-31",
"perf": -14.6408
},
{
"idx": "E",
"date": "2004-12-31",
"perf": 19.4939
},
{
"idx": "E",
"date": "2005-12-31",
"perf": -16.546
},
{
"idx": "E",
"date": "2006-12-31",
"perf": -14.883
},
{
"idx": "E",
"date": "2007-12-31",
"perf": -5.0652
},
{
"idx": "E",
"date": "2008-12-31",
"perf": -8.3776
},
{
"idx": "E",
"date": "2009-12-31",
"perf": -15.234
},
{
"idx": "F",
"date": "2000-12-31",
"perf": -3.273
},
{
"idx": "F",
"date": "2001-12-31",
"perf": -19.6255
},
{
"idx": "F",
"date": "2002-12-31",
"perf": 7.7506
},
{
"idx": "F",
"date": "2003-12-31",
"perf": -16.6891
},
{
"idx": "F",
"date": "2004-12-31",
"perf": 2.3649
},
{
"idx": "F",
"date": "2005-12-31",
"perf": -9.3366
},
{
"idx": "F",
"date": "2006-12-31",
"perf": -2.0149
},
{
"idx": "F",
"date": "2007-12-31",
"perf": -7.6408
},
{
"idx": "F",
"date": "2008-12-31",
"perf": 1.4748
},
{
"idx": "F",
"date": "2009-12-31",
"perf": -7.5252
},
{
"idx": "G",
"date": "2000-12-31",
"perf": -9.9526
},
{
"idx": "G",
"date": "2001-12-31",
"perf": 18.2518
},
{
"idx": "G",
"date": "2002-12-31",
"perf": -17.8075
},
{
"idx": "G",
"date": "2003-12-31",
"perf": 2.4835
},
{
"idx": "G",
"date": "2004-12-31",
"perf": -10.259
},
{
"idx": "G",
"date": "2005-12-31",
"perf": 14.1983
},
{
"idx": "G",
"date": "2006-12-31",
"perf": 19.1988
},
{
"idx": "G",
"date": "2007-12-31",
"perf": 3.6613
},
{
"idx": "G",
"date": "2008-12-31",
"perf": 11.9808
},
{
"idx": "G",
"date": "2009-12-31",
"perf": -19.6471
},
{
"idx": "H",
"date": "2000-12-31",
"perf": 15.8034
},
{
"idx": "H",
"date": "2001-12-31",
"perf": -13.0795
},
{
"idx": "H",
"date": "2002-12-31",
"perf": 16.4691
},
{
"idx": "H",
"date": "2003-12-31",
"perf": -17.0362
},
{
"idx": "H",
"date": "2004-12-31",
"perf": -12.3088
},
{
"idx": "H",
"date": "2005-12-31",
"perf": 4.455
},
{
"idx": "H",
"date": "2006-12-31",
"perf": 18.8401
},
{
"idx": "H",
"date": "2007-12-31",
"perf": -15.571
},
{
"idx": "H",
"date": "2008-12-31",
"perf": 11.0688
},
{
"idx": "H",
"date": "2009-12-31",
"perf": -0.7543
},
{
"idx": "I",
"date": "2000-12-31",
"perf": 19.4466
},
{
"idx": "I",
"date": "2001-12-31",
"perf": -10.4479
},
{
"idx": "I",
"date": "2002-12-31",
"perf": -18.4353
},
{
"idx": "I",
"date": "2003-12-31",
"perf": 9.3312
},
{
"idx": "I",
"date": "2004-12-31",
"perf": 13.7115
},
{
"idx": "I",
"date": "2005-12-31",
"perf": -18.4976
},
{
"idx": "I",
"date": "2006-12-31",
"perf": -3.3736
},
{
"idx": "I",
"date": "2007-12-31",
"perf": 4.9811
},
{
"idx": "I",
"date": "2008-12-31",
"perf": -19.9589
},
{
"idx": "I",
"date": "2009-12-31",
"perf": 19.8707
},
{
"idx": "J",
"date": "2000-12-31",
"perf": 14.8278
},
{
"idx": "J",
"date": "2001-12-31",
"perf": -10.8594
},
{
"idx": "J",
"date": "2002-12-31",
"perf": -4.0786
},
{
"idx": "J",
"date": "2003-12-31",
"perf": 18.2823
},
{
"idx": "J",
"date": "2004-12-31",
"perf": 8.9381
},
{
"idx": "J",
"date": "2005-12-31",
"perf": -11.6092
},
{
"idx": "J",
"date": "2006-12-31",
"perf": 17.0184
},
{
"idx": "J",
"date": "2007-12-31",
"perf": 0.5828
},
{
"idx": "J",
"date": "2008-12-31",
"perf": -7.9249
},
{
"idx": "J",
"date": "2009-12-31",
"perf": -1.397
}
]
var height = 600, width = 900
var margin = {
top: 20,
bottom: 50,
left: 50,
right: 20
}
var color = d3.scaleOrdinal(d3.schemeCategory10)
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var g_plot = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var sc_x = d3.scaleBand()
.domain(data.map(d => (d.date)))
.range([0,width - margin.left - margin.right])
var sc_y = d3.scaleLinear()
.domain(d3.extent(data.map(d => d.perf)))
.range([height - margin.top - margin.bottom, 0])
var line = d3.line()
.curve(d3.curveMonotoneX)
var horiz_smooth = 50
var nested = d3.nest().key(d => d.idx).entries(data)
var highlight = function() {
svg.selectAll(".line").style("opacity", 0.25)
d3.select(this).style("opacity", 1)
}
var unhighlight = function() {
svg.selectAll(".line").style("opacity", 0.5)
}
nested.map(function(d) {
points = []
d.values.forEach(function(dd, i) {
if(i > d.values.length - 2) {
points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)])
return
}
if(i === 0) {
points.push([sc_x(dd.date), sc_y(dd.perf)]),
points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)])
points.push([sc_x(dd.date) + sc_x.bandwidth(), sc_y(d.values[i+1].perf)])
return
}
points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)])
points.push([sc_x(dd.date) + sc_x.bandwidth(), sc_y(d.values[i+1].perf)])
})
g_plot.append("path")
.classed("line", true)
.attr("d", line(points))
.style("fill", "none")
.style("stroke", color(d.key))
.style("stroke-width", 10)
.style("opacity", 0.5)
.on("mouseover", highlight)
.on("mouseout", unhighlight)
})
g_plot.append("g")
.call(d3.axisBottom().scale(sc_x))
.attr("transform", "translate(" + (-sc_x.bandwidth()/2 + horiz_smooth/2) + "," + (+height - margin.top - margin.bottom) + ")")
g_plot.append("g")
.call(d3.axisLeft().scale(sc_y))
</script>
</body>
</html>