I tried to add own data to this sketch: https://beta.observablehq.com/@mbostock/d3-horizon-chart#data

data.json

{"groups":[{"category":"fine arts/culture","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,3,3,4,4,4,4,6,6,6,7,7,7,8,8,8,10,11,11,12,12,13,15,15,15,16,16,17,19,20,23,25,28,29,30,36,37,38,38,43,45,50,53,56,59,60,64,68,71,76,79,85,90,94,100,103,110,115,120,124,128,128,128],"id":0},{"category":"book clubs","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,4,5,6,6,6,7,7,8,8,8,8,8,8,8,8,8,9,9,10,10,11,11,13,13,14,14,15,16,16,16],"id":1},{"category":"career/business","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,3,3,3,3,3,3,3,4,5,5,5,9,9,11,11,13,14,15,17,17,20,20,21,22,23,25,29,31,33,37,41,43,46,51,56,59,62,66,69,75,82,84,89,94,97,101,105,109,113,123,129,136,145,155,167,173,186,196,208,214,217,226,236,245,255,269,280,288,311,330,341,353,365,379,399,417,430,447,466,478,497,513,543,543,543],"id":2},{"category":"cars/motorcycles","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,5,5,5,7,7,7,7,7],"id":3},{"category":"community/environment","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,3,3,3,3,3,3,3,3,4,4,4,5,5,5,6,8,8,8,8,8,8,10,10,11,13,13,13,14,14,16,17,18,19,21,22,24,24,27,29,32,35,37,37,37,38,40,42,43,45,51,53,56,56,57,59,64,70,70,70],"id":4},{"category":"dancing","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,4,4,4,5,5,5,6,6,6,6,6,6,6,6,6,8,8,8,8,8,9,11,11,12,13,14,15,16,16,16,16,16,16,18,21,23,24,27,27,28,28,30,32,32,32,32,34,35,37,37,37,38,40,42,43,46,49,50,52,52,52],"id":5},{"category":"education/learning","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,2,2,2,2,3,4,5,6,7,9,9,9,9,9,11,11,12,12,13,15,15,16,16,16,18,19,21,22,22,22,23,23,25,26,28,28,29,33,34,35,36,40,42,44,47,51,52,54,58,59,60,64,67,70,73,75,78,82,91,93,96,99,108,115,120,129,129,129],"id":6},{"category":"fashion/beauty","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,3,3,3,4,4,4,4,4,4,5,7,7,7,7,7,7,7,8,8,8,8,8,8,8,8,9,10,10,10,11,12,12,12,12,12,12],"id":7},{"category":"fitness","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,4,4,4,4,4,4,5,5,5,5,6,6,8,10,10,10,11,14,15,15,16,17,19,19,21,23,24,25,27,32,35,36,36,38,40,41,44,50,53,57,62,62,66,66,66],"id":8},{"category":"food/drink","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,2,2,2,2,2,2,2,2,3,3,3,3,3,3,4,4,4,4,4,4,5,5,5,5,6,8,9,9,11,11,11,11,13,14,14,15,15,17,17,20,21,21,21,21,23,26,27,30,30,30,31,31,31,34,34,37,38,39,40,45,46,48,50,51,52,52,52,53,58,59,63,68,68,73,75,78,85,90,90,90],"id":9},{"category":"games","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,4,4,5,6,6,7,7,7,7,8,8,8,8,9,9,9,9,9,9,10,10,11,11,12,13,15,16,16,17,17,17,17,17,20,21,21,21,21,23,23,24,25,27,28,31,31,31,33,33,34,34,34,34],"id":10},{"category":"movements/politics","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,4,4,6,9,9,10,10,10,10,10,11,12,13,14,14,15,15,15,16,16,16,16,16,16,17,19,19,20,20,20,20,21,22,23,23,23],"id":11},{"category":"health/wellbeing","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,7,7,8,9,10,13,15,16,16,17,18,19,19,23,29,31,32,36,39,40,42,43,48,49,53,55,59,63,69,75,75,79,81,85,89,91,101,109,117,128,136,144,153,162,174,183,190,196,203,212,220,231,242,255,266,278,294,309,309,309],"id":12},{"category":"hobbies/crafts","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,5,6,6,7,8,8,8,9,10,10,10,10,12,12,14,15,15,15,16,16,18,19,21,23,23,23],"id":13},{"category":"language/ethnic identity","values":[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,5,6,6,7,8,9,9,9,10,10,12,12,12,12,13,14,16,18,18,19,21,22,23,24,26,27,30,33,35,37,37,37,37,38,38,39,39,42,42,44,46,48,48,49,50,52,54,55,55,56,59,59,62,66,67,68,71,73,77,79,80,81,88,90,92,94,99,101,104,112,114,116,116,116],"id":14},{"category":"LGBT","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,6,6,6,7,8,8,8,8,8,9,9,9,9,9,10,11,11,11,12,12,12,12,12,12,14,14,14,14,15,15,15,15,16,16,16],"id":15},{"category":"alternative lifestyle","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,3,3,3,3,4,5,7,7,7,9,9,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,12,12],"id":16},{"category":"movies/film","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,5,7,7,7,7,8,10,11,13,13,13,13,13,13,13,13,13,13,13,13,14,14,14,14,16,19,20,23,25,28,31,31,31,31,31,31,31],"id":17},{"category":"music","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,3,3,3,3,3,3,3,3,4,4,5,6,7,9,9,11,12,14,14,14,14,16,18,19,19,20,23,23,24,25,25,26,26,29,31,34,35,39,40,44,46,47,48,51,53,54,57,58,59,61,61,64,67,68,69,75,81,83,84,84,84],"id":18},{"category":"new age/spirituality","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,3,3,5,6,6,7,7,7,7,7,7,8,8,8,8,9,12,14,14,15,17,18,18,19,19,20,21,22,23,25,27,33,35,35,37,39,42,45,45,46,49,55,58,59,62,64,68,71,77,78,81,83,87,96,104,105,110,118,134,147,152,152,152],"id":19},{"category":"outdoors/adventure","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,5,7,10,11,11,11,11,11,15,15,15,16,19,20,21,22,23,23,25,27,28,31,31,32,33,35,35,36,38,41,42,43,44,46,47,47,53,56,58,58,59,64,65,65,65],"id":20},{"category":"parents/family","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,6,8,8,9,9,10,10,10,10,10,10,10,10,11,11,12,14,14,14,14,14,15,15,16,16,16,16,18,18,22,22,24,24,28,28,31,31,33,34,35,38,38,38],"id":21},{"category":"pets/animals","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,4,5,6,6,6,7,8,8,9,9,9],"id":22},{"category":"photography","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,4,4,5,5,5,5,5,5,5,5,6,6,6,6,7,7,7,7,7,7,7,7,7,7,8,8,8,9,9,9,9,10,10,10,11,12,13,13,13,14,14,14,14,15,15,15,15,15,18,19,20,23,24,24,24,24,24],"id":23},{"category":"religion/beliefs","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,3,4,5,6,6,6,7,7,8,8,9,9,9,10,10,10,10,10,11,11,11,12,12,12,12,13,13,14,14,14,14],"id":24},{"category":"sci-fi/fantasy","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,5,5,6,6,6,6,6,8,8,8,8,8,8,8,9,9,9,9,9,10,10,10],"id":25},{"category":"singles","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,6,6,6,6],"id":26},{"category":"socializing","values":[0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,6,6,6,6,6,7,7,8,8,9,9,9,10,10,11,11,11,11,11,11,11,11,11,12,13,15,16,17,18,18,18,18,19,20,20,23,25,25,25,25,25,26,28,29,29,31,31,35,35,35,38,42,45,48,51,52,53,56,57,60,60,64,65,67,69,69,75,79,89,89,89],"id":27},{"category":"sports/recreation","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,2,2,2,4,4,4,4,4,4,4,4,4,5,8,8,9,10,12,12,12,12,12,13,13,13,14,16,17,18,19,19,20,21,21,21,21,21,22,25,26,26,28,29,29,29,30,30,30,30,32,35,37,44,46,47,50,53,56,56,56],"id":28},{"category":"support","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,3,3,3,3,3,3,3,4,6,6,6,6,6,6,6,7,7,9,10,10,10,10,10,10,10,10,11,12,13,13,17,19,19,22,22,22],"id":29},{"category":"tech","values":[0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,3,4,5,6,6,8,8,8,9,13,14,15,19,20,21,23,23,24,27,27,34,38,44,51,56,61,68,72,75,82,86,91,98,103,107,113,124,132,137,142,151,158,171,179,189,200,207,212,220,233,240,252,260,269,291,301,322,336,351,361,374,385,401,408,422,440,456,468,483,504,526,546,563,585,603,629,652,676,700,724,753,782,817,852,883,912,935,969,995,1040,1040,1040],"id":30},{"category":"writing","values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,4,4,4,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,7,8,8,8,8,8,9,9,11,13,14,15,15,16,17,18,19,19,20,22,24,25,25,25],"id":31}],"dates":["2008-01-01","2008-02-01","2008-03-01","2008-04-01","2008-05-01","2008-06-01","2008-07-01","2008-08-01","2008-09-01","2008-10-01","2008-11-01","2008-12-01","2009-01-01","2009-02-01","2009-03-01","2009-04-01","2009-05-01","2009-06-01","2009-07-01","2009-08-01","2009-09-01","2009-10-01","2009-11-01","2009-12-01","2010-01-01","2010-02-01","2010-03-01","2010-04-01","2010-05-01","2010-06-01","2010-07-01","2010-08-01","2010-09-01","2010-10-01","2010-11-01","2010-12-01","2011-01-01","2011-02-01","2011-03-01","2011-04-01","2011-05-01","2011-06-01","2011-07-01","2011-08-01","2011-09-01","2011-10-01","2011-11-01","2011-12-01","2012-01-01","2012-02-01","2012-03-01","2012-04-01","2012-05-01","2012-06-01","2012-07-01","2012-08-01","2012-09-01","2012-10-01","2012-11-01","2012-12-01","2013-01-01","2013-02-01","2013-03-01","2013-04-01","2013-05-01","2013-06-01","2013-07-01","2013-08-01","2013-09-01","2013-10-01","2013-11-01","2013-12-01","2014-01-01","2014-02-01","2014-03-01","2014-04-01","2014-05-01","2014-06-01","2014-07-01","2014-08-01","2014-09-01","2014-10-01","2014-11-01","2014-12-01","2015-01-01","2015-02-01","2015-03-01","2015-04-01","2015-05-01","2015-06-01","2015-07-01","2015-08-01","2015-09-01","2015-10-01","2015-11-01","2015-12-01","2016-01-01","2016-02-01","2016-03-01","2016-04-01","2016-05-01","2016-06-01","2016-07-01","2016-08-01","2016-09-01","2016-10-01","2016-11-01","2016-12-01","2017-01-01","2017-02-01","2017-03-01","2017-04-01","2017-05-01","2017-06-01","2017-07-01","2017-08-01","2017-09-01","2017-10-01","2017-11-01","2017-12-01","2018-01-01","2018-02-01","2018-03-01","2018-04-01","2018-05-01","2018-06-01","2018-07-01","2018-08-01","2018-09-01","2018-10-01","2018-11-01","2018-12-01","2019-01-01"]}

horizon.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Horizon Chart</title>
</head>
<style>
    .horizon {
        width: 900px;
        height: 2000px;
    }
</style>
<body>
    <svg class="horizon"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
    d3.json('./data.json').then(data => {


        data.dates.forEach((dateStr,i) => {
            dateStr = new Date(dateStr);
            data.dates[i] = dateStr;
        })

        console.log(data);
        const step = 23;
        const margin = ({top: 30, right: 10, bottom: 0, left: 10});
        const height = data.groups.length * (step + 1) + margin.top + margin.bottom;
        const width = 900;
        const overlap = 50;

        const svg = d3.select('.horizon')
            .style("font", "10px sans-serif");

        const color = i => {
            return d3.schemeRdPu[Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]
        }

        const xAxis = g => g
            .attr("transform", `translate(0,${margin.top})`)
            .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))
            .call(g => g.selectAll(".tick").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())
            .call(g => g.select(".domain").remove())

        const x = d3.scaleUtc()
            .domain(d3.extent(data.dates))
            .range([0, width])
        
        const y = d3.scaleLinear()
            .domain([0, d3.max(data.groups, d => d3.max(d.values))])
            .range([0, -overlap * step])

        const area = d3.area()
            .curve(d3.curveBasis)
            .defined(d => !isNaN(d))
            .x((d, i) => {
                return x(data.dates[i])
            })
            .y0(0)
            .y1(d => y(d))

        const g = svg.append("g")
            .selectAll("g")
            .data(data.groups)
            .enter().append("g")
            .attr("transform", (d, i) => `translate(0,${i * (step + 1) + margin.top})`);

        g.append("clipPath")
            .attr("id", d => d.id)
            .append("rect")
            .attr("width", width)
            .attr("height", step);

        g.append("defs").append("path")
            .attr("id", d => 'path')
            .attr("d", d => { return area(d.values)
            });

        g.append("g")
            .attr("clip-path", d => d.clip)
            .selectAll("use")
            .data(d => new Array(overlap).fill(d))
            .enter().append("use")
            .attr("fill", (d, i) => color(i))
            .attr("transform", (d, i) => `translate(0,${(i + 1) * step})`)
            // .attr("xlink:href", d => d.path.href);

        g.append("text")
            .attr("x", 4)
            .attr("y", step / 2)
            .attr("dy", "0.35em")
            .text(d => d.name);

        svg.append("g")
            .call(xAxis);
        })



    
</script>
</html>