2d:null 2e:["$","title",null,{"children":"Does This Job Ever Get Easier? | Sarah Hodges | Observable"}] 33:Tbce,chart2 = { const margin = {top: 30, right: 20, bottom: 10, left: 20} const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chartHeight]) .attr("transform", "translate(" + margin.left + "," + margin.top + ")") const g = svg.selectAll("g") .data(dotPlotData.sort((a,b) => b.total - a.total)) .join("g") .attr("transform", (d, i) => `translate(${calculateGridPos(i)})`) g.append("g") .selectAll("circle") .data(d => d3.cross(keys, [d])) .join("circle") .attr("cy", ([k, d]) => d[k] ? circleScale(-(d[k]) * 200) : 0) .attr("stroke", ([k,d]) => d[k] ? color(k) : 'transparent') .attr('stroke-width', 2) .attr("fill", "none") .attr("r", ([k, d]) => circleScale(d[k] * 200)); g.append("text") .attr("text-anchor", "middle") .style("font", "12px sans-serif") .attr("dy", "0.35em") .attr('y', 35) .text(d => d.frustration) g.append("text") .attr("text-anchor", "middle") .style("font", "12px sans-serif") .attr("dy", "0.35em") .attr('y', 51) .text((d, i) => `total responses: ${d.total}`); // append lines g.append('g') .selectAll('g') .data(d => d3.cross(keys, [d])) .join("line") .attr('x1', ([k, d]) => circleScale(d[k] * -200)) .attr('x2', ([k, d]) =>d[k] === d3.max(keys, k => d[k]) ? circleScale(d[k] * -200) - 20 : circleScale(d[k] * -200) - 50) .attr('y1', ([k, d]) => circleScale(-d[k] * 200)) .attr('y2', ([k, d]) => circleScale(-d[k] * 200)) .style('stroke', ([k,d]) => d[k] && ((d[k] === d3.max(keys, k => d[k])) || (d[k] === d3.min(keys, k => d[k])))? color(k) : 'transparent') .style('stroke-dasharray', ('4,4')) // append labels g.append('g') .selectAll('g') .data(d => d3.cross(keys, [d])) .join("text") .attr('x', ([k, d]) => d[k] === d3.max(keys, k => d[k])? circleScale(d[k] * -200) - 25 : circleScale(d[k] * -200) - 55) .attr('y', ([k, d]) => circleScale(-d[k] * 200) + 4) .style('text-anchor', 'end') .style("font", "10px sans-serif") .style("font-weight", "bold") .style('fill', ([k,d]) => d[k] && ((d[k] === d3.max(keys, k => d[k])) || (d[k] === d3.min(keys, k => d[k])))? color(k) : 'transparent') .text(([k, d]) => d[k] ? Math.floor(d[k] * 100) + '%' : '') //append literacy bars g.append('g') .selectAll('rect') .data(d => { console.log(d.literacy) return d.literacy}) .join('rect') .attr('x', (d,i) => i * 5) .attr('y', d => yLiteracy(d)) .attr('width', 2) .attr('height', d => barHeight - yLiteracy(d)) .attr('fill', 'olivedrab') //.attr('fill', (d, i) => i === 2 ? 'slateblue' : i === 1 ? 'goldenrod' : 'salmon') .attr('opacity', (d, i) => i === 1 ? .7 : i === 2 ? .4 : 1) .attr('transform', `rotate(90)translate(3, ${-barHeight})`) return svg.node() }34:[] 31:{"id":"f17cef964a2c50d2","slug":"does-this-job-ever-get-easier","title":" Does This Job Ever Get Easier?","thumbnail":"7da754602f3a9c71382b1bb4f681c98880809b4e5bf4cb351665a44d95722515","access_level":"public","create_time":"$D2021-01-10T01:00:41.488Z","update_time":"$D2021-02-17T01:52:32.670Z","view_time":null,"first_public_time":"$D2021-01-11T07:56:57.947Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"63589c9b914b39f0","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":"starter_2024"},"version":858,"publish_version":858,"role":null,"authored":false,"authors":[{"type":"individual","id":"11efa6890f936ea4","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":null}],"members":[{"type":"individual","id":"11efa6890f936ea4","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":" Does This Job Ever Get Easier?","cells":[{"id":0,"value":"html`

Does This Job Ever Get Easier?

Findings from a survey conducted by the Data Visualization Society in the fall of 2020

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html`

Do people have fewer frustrations in their data vis careers as they gain more experience? Or do the frustrations simply change?

Points compare the percentage of respondents with the corresponding years of data vis experience who have indicated a given frustration. For example, 51.3% of people with less than one year of data vis experience feel that lack of time is a concern while 75% of people with 26-30 years of data vis experience feel it is a concern. Rows are ranked by the total numbers of responses.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n\n svg.append(\"g\")\n .call(xAxis);\n\n const g = svg.append(\"g\")\n .attr(\"text-anchor\", \"end\")\n .style(\"font\", \"12px sans-serif\")\n .selectAll(\"g\")\n .data(dotPlotData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${y(d.frustration)})`);\n\n g.append(\"line\")\n .attr(\"stroke\", \"#aaa\")\n .attr(\"x1\", d => x(d3.min(keys, k => d[k])))\n .attr(\"x2\", d => x(d3.max(keys, k => d[k])));\n\n g.append(\"g\")\n .selectAll(\"circle\")\n .data(d => d3.cross(keys, [d]))\n .join(\"circle\")\n .attr(\"cx\", ([k, d]) => x(d[k]))\n .attr(\"fill\", ([k,d]) => d[k] ? color(k) : 'transparent')\n .attr(\"r\", 4);\n\n g.append(\"text\")\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", d => x(d3.min(keys, k => d[k])) - 12)\n .text((d, i) => d.frustration);\n\n return svg.node()\n \n}\n//adapted from https://observablehq.com/@d3/dot-plot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"legend({title: \"Data Visualization Experience (years)\", color, tickSize: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"html`

Each group of circles below represents a frustration. As above, each circle shows the percentage of respondents with the corresponding years of data visualization experience who have indicated the given frustration.

Each is accompanied by a breakdown of the data literacy of the respondents’ audiences — low, moderate, and expert. Circle groups are ordered by the total number of responses.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"html`

Of Note: Given the variation in the number of responses from each age group, some data are more representative that others. For example, there were four respondents who were 26-30 years into their career who listed at least one frustration while there were 288 respondents who were 5-10 years into their career who listed at least one frustration.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"tableChart = {\n const div = d3.select(html`

`)\n \n const table = div.append('table')\n .attr('margin', '50px')\n \n const columnNames = ['Years of Data Vis Experience', 'Number of Respondents'], \n thead = table.append('thead'),\n tbody = table.append('tbody')\n \n thead.append('tr')\n .selectAll('th')\n .data(columnNames)\n .join('th')\n .text(d => d)\n \n const rows = tbody.selectAll('tr')\n .data(totalsArray)\n .join('tr')\n \n rows.selectAll('td')\n .data(d => columnNames.map(column => ({'value': d[column], 'name': column})))\n .join('td')\n .attr('data-th', d => d.name)\n .text(d => d.value)\n \n return div.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`### Dots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = sortedDotPlotData.length * 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(dotPlotData, d => d3.max(keys, k => d[k]))])\n // .domain([0,506])\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"y = d3.scalePoint()\n // .domain(sortedDotPlotData.sort((a,b) => a.sequence - b.sequence).map(d => d.frustration))\n .domain(dotPlotData.sort((a,b) => b.total - a.total).map(d => d.frustration))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(null, \"%\"))\n .call(g => g.selectAll(\".tick line\").clone().attr(\"stroke-opacity\", 0.1).attr(\"y2\", height - margin.bottom))\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"keys = [\"< 1\", \"1\", \"2\", \"3\", \"4\",\"5\", \"5-10\", \"11-15\", \"16-20\", \"21-25\", \"26-30\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"color = d3.scaleOrdinal()\n .domain(keys)\n .range(d3.schemeSpectral[keys.length])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"margin = ({top: 20, right: 10, bottom: 10, left: 110})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`### Circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"chartHeight = 1700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"calculateGridPos = (i) => {\n return i < 8 ? [(i % 2 + 0.5) * 390, (Math.floor(i / 2) + .8) * 285] \n // : i < 8 ?[(i % 2 + 0.5) * 390, ((Math.floor(i / 2) + .8) * 285)] \n : i < 10 ? [(i % 2 + 0.5) * 390, ((Math.floor(i / 2) + .8) * 280) - 10]\n : [(i % 2 + 0.5) * 390, ((Math.floor(i / 2) + .8) * 280) - 50]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"circleScale = d3.scaleSqrt()\n .domain([0,75])\n .range([0,80])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"yLiteracy = d3.scaleLinear()\n .domain([0, d3.max(dotPlotData, d => d3.max(d.literacy))])\n .range([barHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"barHeight = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { dotPlotData, sortedDotPlotData, totalsArray } from \"8c51a4fafbd5910d\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {legend} from \"@slhstudio/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"