alternate version of market quilt

<!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>

https://unpkg.com/d3