30:[] 2e:{"title":"Benchy viewer","cells":[{"id":0,"value":"md`# Benchy viewer\n\nHelper to draw output of ndjson files from [manastech/benchy](https://github.com/manastech/benchy)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof rawNdjsonData = textarea({title: \".ndjson data\", width: \"100%\", rows: 5, value: sampleData})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof selectedConfigurationGroupBy = select({title: \"Group by\", options: propertyOptions.map(po => po.name), value: propertyOptions[0].name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof selectedConfigurationSubgroupBy = select({title: \"Subgroup by\", options: propertyOptions.map(po => po.name), value: (propertyOptions.filter(v => v.name != selectedConfigurationGroupBy)[0] || propertyOptions[0]).name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"propertyNamesWithMultipleValues.length != 2 ? html`

Filter the experiments to show. Warning: ideally only two properties should have multiple-values selected. Otherwise the chart might not work

` : html`

Filter the experiments to show.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof propsFilters = {\n const filters = {}\n for(const po of propertyOptions) {\n const values = po.options.map(o => o.value)\n const control = select({title: po.name, options: values, value: values, multiple: true})\n control.input.style.width = \"100%\"\n filters[po.name] = control\n }\n return columns(filters)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof selectedMeasureName = radio({title: \"Measure\", options: measures, value: measures[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x0(d[groupKey])},0)`)\n .selectAll(\"rect\")\n .data(d => keys.map(key => ({key, value: d[key]})))\n .join(\"rect\")\n .attr(\"x\", d => x1(d.key))\n .attr(\"y\", d => y(d.value))\n .attr(\"width\", x1.bandwidth())\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"fill\", d => color(d.key));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(legend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"html`

How to download the chart as SVG or PNG?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof chosenPalette = select({title: \"Palette\", options: [\n {label: \"default\", value: '[\"#9c27b0\", \"#1565c0\", \"#00bcd4\", \"#8bc34a\", \"#ffeb3b\", \"#ff5722\"]'},\n // from https://observablehq.com/@d3/grouped-bar-chart\n {label: \"@d3/grouped-bar-chart\", value: '[\"#98abc5\", \"#8a89a6\", \"#7b6888\", \"#6b486b\", \"#a05d56\", \"#d0743c\", \"#ff8c00\"]'},\n // from https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad\n {label: \"bl.ocks.org/bricedev Grouped bar chart\", value: '[\"#ca0020\",\"#f4a582\",\"#d5d5d5\",\"#92c5de\",\"#0571b0\"]'}, \n]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"viewof palette = columns(JSON.parse(chosenPalette).map(c => colorInput({value: c})))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof labelReplacements = textarea({title: \"labels substitutions\", value: sampleReplacements, width: \"100%\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"ndjsonData = ndjson(rawNdjsonData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"// this data use props and values to describe the ndjsonData\ninputData = {\n const diffValues = (f) => uniq(ndjsonData.map(f)).length > 1\n const includeName = diffValues(d => d.name)\n const contextKeys = uniq(ndjsonData.flatMap(d => Object.keys(d.context))).filter(k => diffValues(d => d.context[k]))\n const configurationKeys = uniq(ndjsonData.flatMap(d => Object.keys(d.configuration))).filter(k => diffValues(d => d.configuration[k]))\n \n return ndjsonData.map(d => {\n const props = {}\n if (includeName) {\n props.name = d.name\n } \n for (const k of contextKeys) {\n props[k] = d.context[k]\n }\n for (const k of configurationKeys) {\n props[k] = d.configuration[k]\n }\n \n return {props: props, values: d.measures}\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"propertyOptions = {\n const replacements = ndjson(labelReplacements)\n const replaceLabel = l => {\n const matches = replacements.filter(v => v.replace == l)\n return matches.length > 0 ? matches[0].with : l\n }\n const props = Object.keys(inputData[0].props)\n return props.map(k => {\n const values = uniq(inputData.map(d => d.props[k]))\n return {name: k, options: values.map(v => ({value: v, label: replaceLabel(`${k}=${v}`)}))}\n }) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"propertyNamesWithMultipleValues = Object.entries(propsFilters).filter(([k,v]) => v.length > 1).map(([k,b]) => k)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"filteredInputData = inputData.filter(d => {\n return Object.entries(propsFilters).every(pf => {\n const key = pf[0]\n const values = pf[1]\n return values.includes(d.props[key])\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"measures = uniq(ndjsonData.flatMap(x => Object.keys(x.measures)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"groups = uniq(filteredInputData.map(x => x.props[selectedConfigurationGroupBy]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"subgroups = uniq(filteredInputData.map(x => x.props[selectedConfigurationSubgroupBy]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"data = Object.assign([...groups.map(g => subgroups.reduce((res, sg) => { res[sg] = chartPoint(g,sg); return res}, {[selectedConfigurationGroupBy]: g}))],\n {columns: [selectedConfigurationGroupBy, ...subgroups], y: selectedMeasureName})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"chartPoint = (group, subgroup) => {\n const exps = filteredInputData.filter(e => \n e.props[selectedConfigurationGroupBy] == group &&\n e.props[selectedConfigurationSubgroupBy] == subgroup)\n \n if (exps.length == 0) {\n return \"n/a\"\n } else if (exps.length == 1) {\n return exps[0].values[selectedMeasureName].avg\n } else {\n return \"ambiguous\"\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"labels = {\n const groupOptions = propertyOptions.filter(po => po.name == selectedConfigurationGroupBy)[0].options;\n const subgroupOptions = propertyOptions.filter(po => po.name == selectedConfigurationSubgroupBy)[0].options;\n const mapValuesToLabels = opts => opts.reduce((res, opt) => Object.assign(res, {[opt.value]: opt.label}),{})\n return {\n group: mapValuesToLabels(groupOptions), \n subgroup: mapValuesToLabels(subgroupOptions)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"// Chart based on https://observablehq.com/@d3/grouped-bar-chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"margin = ({top: 10, right: 150, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width},0)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => labels.subgroup[d]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"x0 = d3.scaleBand()\n .domain(data.map(d => d[groupKey]))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"x1 = d3.scaleBand()\n .domain(keys)\n .rangeRound([0, x0.bandwidth()])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"color = {\n selectedConfigurationSubgroupBy // force dependency\n propsFilters // force dependency\n \n return d3.scaleOrdinal()\n .range(palette)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x0).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n .selectAll(\"text\").text(d => labels.group[d])","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"groupKey = data.columns[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"keys = data.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"// Sample data","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"sampleData = { \n const req = await fetch(\"https://gist.githubusercontent.com/bcardiff/dac902c3a30923a3d05a78de0b439c34/raw/81d22cbd9baff6cfcc147905bf24e83f4e16f01e/crystal-compile-hello-world.ndjson\")\n return req.text();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"sampleReplacements = { \n const req = await fetch(\"https://gist.githubusercontent.com/bcardiff/dac902c3a30923a3d05a78de0b439c34/raw/81d22cbd9baff6cfcc147905bf24e83f4e16f01e/replace.ndjson#\")\n return req.text();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"// Imports & helpers","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {textarea, text, select, checkbox, radio, color as colorInput} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"ndjson = (str) => str.split(\"\\n\").filter(x => x.length > 0).map(x => JSON.parse(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"uniq = x => [...new Set(x)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"mapValues = (obj, fValue) => {\n Object.keys(obj).reduce((result, key) => {\n result[key] = fValue(obj[key].value)\n return result\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}