31:Tc44,plot = function(show) { const rank = show === 'rank'; const scheme = tp.cat.concat(d3.schemeDark2); return tp .each(surveyData[category], function(lib, j) { this // trajectory line .line({ data: allYears, x: (d, i, s) => lib[s.x][i][show], y: (d, i, s) => lib[s.y][i][show], stroke: scheme[j], strokeOpacity: (d, i, s) => s.over == lib.id ? 0.75 : 0.25, missing: 'gap' }) // trajectory points - 2020 point is larger .point({ data: allYears, x: (d, i, s) => lib[s.x][i][show], y: (d, i, s) => lib[s.y][i][show], fill: scheme[j], area: (d, i) => i === allYears.length - 1 ? 48 : 16, fillOpacity: (d, i, s) => s.over == lib.id ? 0.75 : 0.25, areaLegend: false, missing: 'skip' }) }) .data(surveyData[category]) // points for current year .circle({ x: (d, i, s) => d[s.x][s.year - firstYear][show], y: (d, i, s) => d[s.y][s.year - firstYear][show], fill: 'transparent', stroke: (d, i) => scheme[i], strokeOpacity: (d, i, s) => +!!d[s.x][s.year - firstYear][show], strokeWidth: 2.2, area: 121, duration, mouseenter: d => tp.mergeUpdate('.plot', {over: d.id}), mouseleave: d => tp.mergeUpdate('.plot', {over: null}), listen: (d, i, s) => !!d[s.x][s.year - firstYear][show] }) // text above point for current year // (separate text marks required since notes not updatable yet) .text({ x: (d, i, s) => d[s.x][s.year - firstYear][show], y: (d, i, s) => d[s.y][s.year - firstYear][show], fill: (d, i) => scheme[i], fillOpacity: (d, i, s) => +!!d[s.x][s.year - firstYear][show], text: d => d.id, fontSize: 12, yOffset: 15, fontWeight: 'bold', duration, mouseenter: d => tp.mergeUpdate('.plot', {over: d.id}), mouseleave: d => tp.mergeUpdate('.plot', {over: null}), listen: (d, i, s) => !!d[s.x][s.year - firstYear][show] }) // text marks for axes titles // (required since axis titles not updatable yet) .text({ x: rank ? (maxRank + 1) / 2 : 50, y: +rank, text: (d, i, s) => `${s.x} (${rank ? 'rank' : '%'})`, vAlign: rank ? 'auto' : 'hanging', yOffset: rank ? 26 : -26, fontSize: 11.5 }) .text({ x: +rank, y: rank ? (maxRank + 1) / 2 : 50, text: (d, i, s) => `${s.y} (${rank ? 'rank' : '%'})`, xOffset: rank ? 30 : -32, rotate: -90, fontSize: 11.5 }) .state(initState) .option({ width: 300, height: 300, axis: false, tickColor: '#ddd', limits: rank ? [1, maxRank, 1, maxRank] : [0, 100, 0, 100], xTickStep: rank ? 1 : 10, yTickStep: rank ? 1 : 10, setPaneSize: true, paneSpace: [35, rank ? 40 : 0, 35, rank ? 0 : 40], xReverse: rank, yReverse: rank, xAxisPosition: rank ? 'top' : 'bottom', yAxisPosition: rank ? 'right' : 'left', class: 'plot' }) .plot() }32:[{"id":"9f9152cc6f385cf8f5a34f0bc0f8e0442245d06109eb88ce8734920eb3f77e6a5eb21f0dcf02f297c0c365f2490ca4d674d43361ab2ad5de4ff90f96ff7134f2","href":"https://static.observableusercontent.com/files/9f9152cc6f385cf8f5a34f0bc0f8e0442245d06109eb88ce8734920eb3f77e6a5eb21f0dcf02f297c0c365f2490ca4d674d43361ab2ad5de4ff90f96ff7134f2","name":"surveyData.json","type":"application/json","lastModified":1621944980897.525,"size":142943}] 2f:{"title":"State of JS and CSS — Double-bubble Plot","cells":[{"id":0,"value":"md`# State of JS and CSS — Double-bubble Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof category = Inputs.select(Object.keys(surveyData), {label: 'Category'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof x = Inputs.radio(dims, {label: 'x', value: initState.x})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof y = Inputs.radio(dims, {label: 'y', value: initState.y})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof year = Inputs.range([firstYear, allYears[allYears.length - 1]],\n {step: 1, label: \"year\", value: initState.year})","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"container = {\n const div = html`

`;\n div.append(...plotsArray);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md`Hover on a point/label to see its trajectories on both plots.\n\n## Data\n\nThe data is from the [State of JS 2020](https://2020.stateofjs.com/en-US/) and [State of CSS 2020](https://stateofcss.com/) surveys which use the following deifinitions:\n\n* Satisfaction: would use again / (would use again + would not use again)\n* Interest: want to learn / (want to learn + not interested)\n* Usage: (would use again + would not use again) / total\n* Awareness: (total - never heard) / total\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`__Note__: The JavaScript build tools category is not included. (The build tools data is for 2016, 2017 and 2020, and the plots break if the years covered by the survey are not contiguous.)\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"tp = (await import('https://cdn.skypack.dev/@gjmcn/teapot@0.3.0')).tp","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"surveyData = FileAttachment('surveyData.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"dims = ['usage', 'satisfaction', 'interest', 'awareness']","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"initState = ({\n x: 'usage',\n y: 'satisfaction',\n year: 2020, // do not change or there will be missing values when first draw plot\n over: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"maxRank = surveyData[category].length","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"allYears = surveyData[category][0].usage.map(d => d.year);","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"firstYear = allYears[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"duration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"plotsArray = [plot('percentage'), plot('rank')]","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"tp.mergeUpdate(plotsArray, {x, y, year}),\n md`_This cell links the x, y and year inputs to the plots so get transitions rather than redraw._`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}