| border: no | |
| license: MIT |
data on different text input methods inspired by @devonzuegel's microblog post
read the macroblog post at http://devonzuegel.com/post/comparison-of-text-editing-methods
the data presented here combines the data presented in the post with additional research by @micahstubbs
💡this table as a chart:
🗃 in github repo form at https://github.com/micahstubbs/text-editing-methods
an iteration on Horizontal Bar Chart from @currankelleher
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> | |
| <style> | |
| .axis text { | |
| fill: #333333; | |
| } | |
| .x.axis text { | |
| font-size: 12px; | |
| } | |
| .y.axis text { | |
| font-size: 32px; | |
| } | |
| .axis line { | |
| fill: #333333; | |
| } | |
| .axis path { | |
| fill: none; | |
| stroke: #333333; | |
| } | |
| .tick line { | |
| stroke: #333333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src='index.js'></script> | |
| </body> |
| d3.csv('text-editing-methods-speed.csv') | |
| .then(data => | |
| data.map(d => { | |
| d['Average Speed for adult [wpm]'] = Number( | |
| d['Average Speed for adult [wpm]'] | |
| ) | |
| d['Lower bound [wpm]'] = Number(d['Lower bound [wpm]']) | |
| d['Upper bound [wpm]'] = Number(d['Upper bound [wpm]']) | |
| return d | |
| }) | |
| ) | |
| .then(data => data.filter(d => d['Input Category'] !== 'reading')) | |
| .then(data => | |
| data.sort( | |
| (a, b) => | |
| a['Average Speed for adult [wpm]'] - b['Average Speed for adult [wpm]'] | |
| ) | |
| ) | |
| .then(data => draw({ data })) | |
| function draw({ data }) { | |
| console.log('data', data) | |
| const outerWidth = 960 | |
| const outerHeight = 500 | |
| const margin = { left: 100, top: 10, right: 50, bottom: 75 } | |
| // colors | |
| const themeDarkGray = '#444444' | |
| const themeBookEmojiGray = '#dfdfe8' | |
| const blogBlue = '#367da2' | |
| const blogGray = '#eaeaea' | |
| const blogDarkGray = '#333333' | |
| const selector = 'body' | |
| d3.select(selector) | |
| .append('div') | |
| .attr('id', 'vis') | |
| .append('svg') | |
| .attr('width', outerWidth) | |
| .attr('height', outerHeight) | |
| const parent = document.getElementById('vis') | |
| const svg = d3.select(parent).select('svg') | |
| // background | |
| svg | |
| .append('rect') | |
| .attr('x', 0) | |
| .attr('y', 0) | |
| .attr('width', outerWidth) | |
| .attr('height', outerHeight) | |
| .style('fill', blogGray) | |
| const g = svg | |
| .append('g') | |
| .attr('transform', `translate(${margin.left},${margin.top})`) | |
| const innerWidth = outerWidth - margin.left - margin.right | |
| const innerHeight = outerHeight - margin.top - margin.bottom | |
| const meanVariable = 'Average Speed for adult [wpm]' | |
| const minVariable = 'Lower bound [wpm]' | |
| const maxVariable = 'Upper bound [wpm]' | |
| const yVariable = 'emoji' | |
| const xAxisLabelText = 'input speed in words per minute (more is faster)' | |
| const xAxisLabelOffset = 50 | |
| console.log('width', outerWidth) | |
| console.log('height', outerHeight) | |
| const xAxisG = g | |
| .append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', `translate(0,${innerHeight})`) | |
| const xAxisLabel = xAxisG | |
| .append('text') | |
| .style('text-anchor', 'middle') | |
| .style('fill', themeDarkGray) | |
| .style('font-size', 20) | |
| .attr('x', innerWidth / 2) | |
| .attr('y', xAxisLabelOffset) | |
| .attr('class', 'label') | |
| .text(xAxisLabelText) | |
| const yAxisG = g.append('g').attr('class', 'y axis') | |
| const xScale = d3 | |
| .scaleLinear() | |
| .domain([0, d3.max(data, d => d[maxVariable])]) | |
| .range([0, innerWidth]) | |
| const yScale = d3 | |
| .scaleBand() | |
| .domain(data.map(d => d[yVariable]).reverse()) | |
| .range([innerHeight, 0]) | |
| const xAxis = d3.axisBottom(xScale).ticks(5) | |
| const yAxis = d3.axisLeft(yScale) | |
| xAxisG.call(xAxis) | |
| yAxisG.call(yAxis) | |
| const yOffset = yScale.bandwidth() / 2 | |
| const lines = g.selectAll('.line').data(data) | |
| lines | |
| .enter() | |
| .append('line') | |
| .attr('class', '.line') | |
| .attr('x1', d => xScale(d[minVariable])) | |
| .attr('x2', d => xScale(d[maxVariable])) | |
| .attr('y1', d => yScale(d[yVariable]) + yOffset) | |
| .attr('y2', d => yScale(d[yVariable]) + yOffset) | |
| .style('stroke', blogBlue) | |
| .style('stroke-width', '2px') | |
| const radius = 5 | |
| const circles = g.selectAll('.circle').data(data) | |
| circles | |
| .enter() | |
| .append('circle') | |
| .attr('class', '.circle') | |
| .attr('cx', d => xScale(d[meanVariable])) | |
| .attr('cy', d => yScale(d[yVariable]) + yOffset) | |
| .attr('r', radius) | |
| .style('fill', blogBlue) | |
| } |
| Input Category | Input Type | Average Speed for adult [wpm] | Lower bound [wpm] | Upper bound [wpm] | emoji | citations | |
|---|---|---|---|---|---|---|---|
| handwriting | printing | 13 | 5 | 20 | 📝 | https://en.wikipedia.org/wiki/Words_per_minute#Handwriting | |
| handwriting | cursive | 16 | 16 | 25 | ✍️ | http://sci-hub.tw/https://dl.acm.org/citation.cfm?id=1518788 | |
| mobile typing | thumbs | 13 | 11 | 15 | 📱👍 | https://ux.stackexchange.com/questions/74623/touch-versus-trace-typing | |
| mobile typing | swype | 13 | 11 | 50 | 📱👆 | https://ux.stackexchange.com/questions/74623/touch-versus-trace-typing | |
| keyboard typing | querty | 40 | 38 | 95 | ⌨️ | https://www.livechatinc.com/typing-speed-test/#/global-scores | |
| free-form speaking | audiobook | 155 | 150 | 160 | 🎧📖 | https://en.wikipedia.org/wiki/Words_per_minute#cite_note-14 | |
| free-form speaking | slide presentation | 112 | 100 | 125 | 📽📊 | https://en.wikipedia.org/wiki/Words_per_minute#cite_note-wong-15 | |
| reading | aloud | 228 | 198 | 258 | 📖🗣 | https://en.wikipedia.org/wiki/Words_per_minute#Reading_and_comprehension | |
| reading | silently | 300 | 180 | 900 | 📖🤫 | https://en.wikipedia.org/wiki/Words_per_minute#Reading_and_comprehension|http://journals.sagepub.com/doi/pdf/10.1080/10862968909547667 |
