function problemPlot(problem) { const problemData = data.filter(d => d.problem === problem); const margin = 5; const plotTitle = htm`<${Flex} height=20 margin-bottom=6 margin-left=40> ${text(taskNames[problem], { align: "center" })}} `; const yScale = valueScales[problem]; const yAxisLabel = htm` <${Flex} width=30 margin-right=23> ${text(axisLabels[problem], { align: "center", color: "#333333", fontSize: 14, valign: "middle", rotate: -90 })} `; const plot = htm`<${Flex} flex-grow=1 padding-bottom=20> ${yAxisLabel} <${Flex} flex-grow=1> ${gridLines({ scale: yScale, orientation: "h" })} ${axis({ position: "left", scale: yScale, stroke: "#333333" })} ${optimizers.map(o => optimizerPlot(o, data.filter(d => d.optimizer === o)) )} `; function optimizerPlot(optimizer, data) { const domain = yScale.domain(); const numSteps = 15; return htm`<${Flex} flex-grow=1 margin-left=10 margin-right=10> ${d3 .range(domain[0], domain[1], (domain[1] - domain[0]) / numSteps) .map(target => ({ left, width, height }) => { return htm``; })} ${({ bottom, hcenter }) => htm`${optimizer}`} `; } return htm`<${Flex} margin=${margin} margin-bottom=15 width=${width / 3 - 2 * margin} height=200 flex-direction="column"> ${plotTitle} ${plot} `; }