31:T6b8,cellplot = { const marginLeft = 120 const marginTop = 18 const theplot = Plot.plot({ width: marginLeft + ((checkSelection.length + 1) * 70) , height: marginTop + (instances.length * 15), marginLeft: marginLeft, marginTop: marginTop, style: { color: colors.text }, x: { axis: null, }, y: { axis: null, }, color: { scheme: 'BrBG' }, marks: [ Plot.cell(dataSelection, { x: 'hashtag', y: 'instance', fill: 'value', stroke: 'white', strokeWidth: .5, inset: 0, title: d => `${d.instance}\n#${d.hashtag}`, sort: { y: 'fill', reduce: 'mean', reverse: true } }), Plot.text(summary, { y: 'instance', fill: colors.text, stroke: 'value', strokeWidth: 5, strokeOpacity: .3, text: 'instance', frameAnchor: 'left', textAnchor: 'end', dx: -5 }), Plot.text(['← recommended instances'], { frameAnchor: 'top-right', rotate: 90, textAnchor: 'start', fill: colors.text, fontWeight: 'bold', dx: 12 }), Plot.text(checkSelection, { frameAnchor: 'top', x: d => d, text: d => `${d.length > 10 ? d.slice(0,6) + '...' : d}`, dy: -20, fontWeight: 'bold', fill: '#6a6acc', fillOpacity: .8 }) ], tooltip: { fill: null, stroke: colors.text } }) if (checkSelection.length > 0) { return html`

${theplot}

` } else { return md`` } }32:[] 2f:{"title":"The trail of hashtags","cells":[{"id":0,"value":"# The trail of hashtags\n## to a new home","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"> *This is a playful representation of the amazing work of **Helge Krueger**. You can check [the code](https://github.com/HelgeKrueger/mastodon_recommender/) that produces these data and his [instance recommender](https://instance-recommender.onrender.com/).*","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"_**What mastodon instance** should I choose if I like ..._","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"html`\n\n

\n ${viewof checkSelection}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"{\n if (checkSelection.length > 0) {\n return html`

\n ${Legend(d3.scaleDivergingSqrt([-1, 0, 1], d3.interpolateBrBG), {\n width: width,\n marginLeft: width * .05,\n marginRight: width * .05,\n title: \"\",\n ticks: 2,\n tickFormat: d => d == 0 ? '' : d > 0 ? 'Better fit' : 'Worse fit'\n })}\n

`\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"🌱","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"Load data","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data = d3.json('https://raw.githubusercontent.com/HelgeKrueger/mastodon_recommender/instance_recommender/webapp/dist/fii-data.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"Available hashtags","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"hashtags = Object.keys(data['mas.to']).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"Select hashtags","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"viewof checkSelection = Inputs.checkbox(hashtags)","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"Available instances","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"instances = Object.keys(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"Mean hashtag value in each instance","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"baseline = {\n let b = {}\n instances.forEach(i => {\n b[i] = Object.keys(data[i]).reduce((hh, h) => hh + data[i][h], 0) / Object.keys(data[i]).length\n })\n return b\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"Each hashtag value minus the instance baseline","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"results = { \n let results = []\n instances.map(i => {\n hashtags.forEach(h => {\n let instance = ({\n instance: i,\n hashtag: h,\n value: data[i][h] - baseline[i]\n })\n results.push(instance)\n })\n })\n return results\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"Results for selected hashtags","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"dataSelection = results.filter(i => checkSelection.includes(i.hashtag))","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"Average value in selected hashtags for each instance","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"summary = {\n return instances.map(i => {\n return ({\n instance: i,\n value: checkSelection.reduce((hh, h) => hh + (data[i][h] - baseline[i]), 0) / checkSelection.length\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"Some style","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"colors = ({\n text: '#75757d'\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}