{"ScriptPreparationCode":"var rawdata = [{\u0022rect\u0022:{\u0022y\u0022:80.39215686274508,\u0022width\u0022:79.10307898259705,\u0022height\u0022:17.64705882352941},\u0022value\u0022:5909,\u0022label\u0022:{\u0022value\u0022:\u00222020-01-27 15:52:39.000\u0022,\u0022x\u0022:39.55153949129853,\u0022y\u0022:89.21568627450979}},{\u0022rect\u0022:{\u0022y\u0022:60.784313725490186,\u0022width\u0022:104.99330655957162,\u0022height\u0022:17.64705882352941},\u0022value\u0022:7843,\u0022label\u0022:{\u0022value\u0022:\u00222019-11-11 20:55:13.000\u0022,\u0022x\u0022:52.49665327978581,\u0022y\u0022:69.60784313725489}},{\u0022rect\u0022:{\u0022y\u0022:41.17647058823529,\u0022width\u0022:107.1619812583668,\u0022height\u0022:17.64705882352941},\u0022value\u0022:8005,\u0022label\u0022:{\u0022value\u0022:\u00222020-04-14 18:29:52.000\u0022,\u0022x\u0022:53.5809906291834,\u0022y\u0022:49.99999999999999}},{\u0022rect\u0022:{\u0022y\u0022:21.56862745098039,\u0022width\u0022:137.46987951807228,\u0022height\u0022:17.64705882352941},\u0022value\u0022:10269,\u0022label\u0022:{\u0022value\u0022:\u00222020-01-22 15:48:25.000\u0022,\u0022x\u0022:68.73493975903614,\u0022y\u0022:30.392156862745097}},{\u0022rect\u0022:{\u0022y\u0022:1.9607843137254903,\u0022width\u0022:270,\u0022height\u0022:17.64705882352941},\u0022value\u0022:20169,\u0022label\u0022:{\u0022value\u0022:\u00222020-01-03 19:09:13.000\u0022,\u0022x\u0022:135,\u0022y\u0022:10.784313725490195}}];\r\nvar x = d3.scaleLinear().range([0, 300]);\r\nvar y = d3.scaleBand().range([250, 0]).padding(0.1);","TestCases":[{"Name":"RXJS","Code":"let { from, Observable } = rxjs;\r\nlet { flatMap, map, tap, toArray } = rxjs.operators;\r\n\r\nvar data$ = from(rawdata)\r\n .pipe(\r\n toArray(),\r\n map(values =\u003E values.sort((a, b) =\u003E b.value - a.value).reverse().slice(0, 5)),\r\n tap((values) =\u003E {\r\n x = x.domain([0, d3.max(values, d =\u003E d.value)]);\r\n y = y.domain(values.map((d) =\u003E d.label));\r\n }),\r\n flatMap(values =\u003E values),\r\n map(bar =\u003E ({\r\n rect: {\r\n y: y(bar.label),\r\n width: x(bar.value),\r\n height: y.bandwidth()\r\n },\r\n value: bar.value,\r\n label: {\r\n value: bar.label,\r\n x: x(bar.value) \u003C= 300 / 5 ? x(bar.value) \u002B 10 : x(bar.value) / 2,\r\n y: y(bar.label) \u002B y.bandwidth() / 2\r\n }\r\n })),\r\n toArray()\r\n );\r\n\r\nlet data;\r\ndata$.subscribe(d =\u003E data = d);","IsDeferred":false},{"Name":"Vanilla","Code":"let values = rawdata.sort((a, b) =\u003E b.value - a.value).reverse().slice(0, 5);\r\n\r\n// Set x and y values\r\nx = x.domain([0, d3.max(values, d =\u003E d.value)]);\r\ny = y.domain(values.map((d) =\u003E d.label));\r\n\r\n// Set bars on chartmap\r\nvar data = values.map(bar =\u003E ({\r\n rect: {\r\n y: y(bar.label),\r\n width: x(bar.value),\r\n height: y.bandwidth()\r\n },\r\n value: bar.value.toString(),\r\n label: {\r\n value: bar.label,\r\n x: x(bar.value) \u003C= 300 / 5 ? x(bar.value) \u002B 10 : x(bar.value) / 2,\r\n y: y(bar.label) \u002B y.bandwidth() / 2\r\n }\r\n}))","IsDeferred":false}]}