31:Td15,md` # a data doodle template ✨ *prepared for [Alice's Doodle Therapy](https://www.youtube.com/watch?v=qUfhGVSGOgQ)* Hi, I'm Shirley and I create data art and visualizations. I think of data visualizations as an important tool for communicating what we've found in the data. And because dataviz is all about effectively communicating to an audience, I firmly believe that the most important step is the design (not the code). So today I want to share one of the core parts (definitely not the only part, but a great place to start) of designing data visualizations: **assigning data to visual channels**. To show you what I mean, we'll be working with a dataset of **51 women Nobel Laureates from 1901 to 2018**. [Here is the spreadsheet](https://docs.google.com/spreadsheets/d/16mPW7e9y8GoUttoCo8NLuxl0nzbwuo_PFfIU_pA4ur8/edit?usp=sharing). And here are some examples of my projects that have used this data:

[legends*](https://christmasexperiments.com/2018/23/legends), 2018

*[flower power](https://twitter.com/sxywu/status/1127010055537156096) [in collaboration with Alice Lee](https://twitter.com/byalicelee/status/1129061919917129728), 2019*

*[legends washi tape](https://sxywu.bigcartel.com/product/legends-washi-tape), 2019* ^{*If you're curious about the process behind these projects, I have a [book coming out February 2021](https://www.datasketch.es/) that you might be interested in!} ~ **The dataset has the following attributes:** - Name of recipient - Year of award (quantitative / temporal) - Year of birth (quantitative / temporal) - Year of death (quantitative / temporal) - Country (categorical) - Continent (categorical) - Category of award (categorical) - "Influence", the number of other Wikipedia articles that link to the recipient's article (quantitative) - References, the number of citations at the bottom of the recipient's Wikipedia article (quantitative) **Visual channels:** - x-position (quantitative) - y-position (quantitative) - radius (quantitative) - color (categorical) Other potential visual channels (that we won't use today) include width, height, shape, angle, motion, etc. By mapping the data to visual channels—for example, **if we map "influence" to radius, we'll be able to distinguish the women with the most "influence" as the biggest circles and those with less as the smaller circles**—we can start to see interesting patterns in our data. There are many more considerations that go into designing data visualizations, but this is a great first step and more than enough for the data doodles we're going to make! So play around with all the sliders and dropdowns, and when you get to a template you like, download and start doodling ✨ Once you've finished your doodle, share with us **@sxywu** and **@byalicelee** 💖 `32:T88b,chart = { const margin = {top: 50, right: 50, bottom: 50, left: 50} // calculate scales const xScale = d3.scaleLinear( d3.extent(filtered, d => d[xAttr]), [margin.left, width - margin.right], ) const yScale = yAttr !== '-' && d3.scaleLinear( d3.extent(filtered, d => d[yAttr]), [height - margin.bottom, margin.top], ) const rScale = d3.scaleSqrt( d3.extent(filtered, d => d[rAttr]), radiusRange, ) const colorScale = d3.scaleOrdinal( colorDomain, _.values(colorRange), ) const nodes = _.map(filtered, d => { const x = xScale(d[xAttr]) return { ...d, x, focusX: x, focusY: yAttr !== '-' ? yScale(d[yAttr]) : height / 2, r: rScale(d[rAttr]), fill: colorScale(d[colorAttr]), } }) // force simulation const simulation = d3.forceSimulation(nodes) .force('collide', d3.forceCollide(d => overlap * d.r)) .force('x', d3.forceX(d => d.focusX)) .force('y', d3.forceY(d => d.focusY)) .stop() // run simulation ~1000 times _.times(1000, () => { simulation.tick() // make sure the nodes are within the canvas _.each(nodes, d => { d.x = Math.min(width - d.r, Math.max(d.r, d.x)) d.y = Math.min(height - d.r, Math.max(d.r, d.y)) }) }) const svg = d3.select(DOM.svg(width, height)) // make circle for each node svg.append('g') .attr('id', 'bubbles') .selectAll('circle') .data(nodes).join('circle') .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('r', d => d.r) .attr('fill', d => d.fill) .attr('opacity', 0.5) // text const text = svg.append('g') .attr('id', 'texts') .selectAll('text') .data(nodes).join('text') .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('text-anchor', 'middle') text.selectAll('tspan') .data(d => _.map(annotations, (annotation, i) => { return { label: d[annotation], y: (i - annotations.length / 2 + 0.5) * fontSize, } })).join('tspan') .attr('x', 0) .attr('y', d => d.y) .attr('dy', '.35em') .text(d => d.label) return scrollSVG(svg.node()) }33:[{"id":"fa533ce513b7d508fa8073ed92ad0b1669ccd824438e913055b00505650ec6c3c98709a41a30c68f82932bb69b3b9550afb14b71faf5cc368499314aed067ca9","href":"https://static.observableusercontent.com/files/fa533ce513b7d508fa8073ed92ad0b1669ccd824438e913055b00505650ec6c3c98709a41a30c68f82932bb69b3b9550afb14b71faf5cc368499314aed067ca9","name":"Figure 11.12a S.jpg","type":"image/jpeg","lastModified":1611777088310.12,"size":1970902},{"id":"d981e9852088785338440df546a52572b9f58bb8e493f84bdca641a59116328f0414dec8a1e97a56ef588489a6b71b7db4dbed534e4d02d4a75f19fed4df701e","href":"https://static.observableusercontent.com/files/d981e9852088785338440df546a52572b9f58bb8e493f84bdca641a59116328f0414dec8a1e97a56ef588489a6b71b7db4dbed534e4d02d4a75f19fed4df701e","name":"Figure 11.12b S.jpg","type":"image/jpeg","lastModified":1611776961900.086,"size":909196},{"id":"fddf9876b99797f4923d71f873ca4cc704434dfe3d49acba15e1760639dd820837bb249715ec5f42576feb9f5f7feeca4ef4f7d6e5424281023456e48f14dfb1","href":"https://static.observableusercontent.com/files/fddf9876b99797f4923d71f873ca4cc704434dfe3d49acba15e1760639dd820837bb249715ec5f42576feb9f5f7feeca4ef4f7d6e5424281023456e48f14dfb1","name":"Figure 11.13d S.JPG","type":"image/jpeg","lastModified":1611776713841.582,"size":217148},{"id":"14c5a06123ce5f29365a2627e4c9880aa6758a0fd48ff233fe638654941d772622e2bed0ed731e09a9a960c7f4c10bf0ca6a2554ff1b2a8d5656c80c77739f7e","href":"https://static.observableusercontent.com/files/14c5a06123ce5f29365a2627e4c9880aa6758a0fd48ff233fe638654941d772622e2bed0ed731e09a9a960c7f4c10bf0ca6a2554ff1b2a8d5656c80c77739f7e","name":"legends4-640px.mp4","type":"video/mp4","lastModified":1611776000014.951,"size":1920455},{"id":"7bf7cda5a86d1af974c22779ad8432b5e0bda173916b5f091ecf4fd30899272d361ac5527759e2cc8cc046547246ad6584afa8efdceed6e99915844801496b16","href":"https://static.observableusercontent.com/files/7bf7cda5a86d1af974c22779ad8432b5e0bda173916b5f091ecf4fd30899272d361ac5527759e2cc8cc046547246ad6584afa8efdceed6e99915844801496b16","name":"Figure 11.13e S.jpg","type":"image/jpeg","lastModified":1611776751840.663,"size":2848857}] 2f:{"title":"a data doodle template ✨","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`\n## 1. Filter dataset by award year\n51 is quite a lot to doodle, so use this slider to filter the Laureates by award year down to a more manageable number.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof selectedYears = rangeSlider({\n min: yearRange[0],\n max: yearRange[1],\n separator: ' – ',\n precision: 0,\n // Note that values must be specified as array of length 2.\n // value: this ? this.value : [1, 1.9],\n // title: 'The optional title',\n // description: 'The optional description.',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\n## 2. Map data to visual channels\n^{* required attributes}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof xAttr = select({\n title: \"x-position*\",\n // description: \"Please pick your favorite stooge.\",\n options: quantAttr,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof yAttr = {\n const options = _.union([{label: '- no mapping - ', value: '-'}], quantAttr)\n return select({\n title: \"y-position\",\n // description: \"Please pick your favorite stooge.\",\n options,\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof rAttr = select({\n title: \"radius*\",\n // description: \"Please pick your favorite stooge.\",\n options: quantAttr,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof colorAttr = {\n const options = _.union([{label: '- no mapping - ', value: '-'}], catAttr)\n return select({\n title: \"color\",\n // description: \"Please pick your favorite stooge.\",\n options,\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`\n## 3. Configure visual channels\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof width = number({\n title: 'width of canvas (px)',\n value: 1080,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof height = number({\n title: 'height of canvas (px)',\n value: 720,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof radiusRange = rangeSlider({\n title: 'min – max circle radius (px)',\n min: 0,\n max: 100,\n separator: ' – ',\n precision: 0,\n value: [25, 50],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof colorRange = form(html`

\n${colorDomain !== '-' ? `

circle colors

` : ''}\n

\n ${_.map(colorDomain, (d, i) => {\n return `\n\n ${d[0] !== 'undefined' ? `${d[0].split(' ')[0]}: ` : ''}\n \n\n `\n })}\n

\n\n_{*make sure not to refresh in the middle because your color selections won't be saved!}\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"viewof overlap = slider({\n title: 'amount of circle overlap',\n description: '*unfortunately the further apart the circles are, the less accurate their positioning, so use this slider with caution!',\n min: 0.25,\n max: 2,\n value: 1.25,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`\n## 4. Annotate the circles\nSelect the data you want each circle to be labeled with so that you can reference them while doodling. For example, you might want to write out the name of each recipient, or perhaps draw a unique pattern for each award category.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof annotations = {\n const options = _.union([{label: 'Name of recipient', value: 'name'}], quantAttr, catAttr)\n \n return checkbox({\n options,\n value: ['name'],\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\n## 5. Download template!\n\nClick the **three dots** on the left of the chart, and select \"Download SVG\" or \"Download PNG\". Alternatively, try these buttons:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"html`\n${DOM.download(() => serialize(chart), 'chart', \"Save as SVG\")}\n${DOM.download(() => rasterize(chart), 'chart', \"Save as PNG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n## data + external libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"yearRange = d3.extent(data, d => d.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"filtered = _.filter(data, d => selectedYears[0] <= d.year && d.year <= selectedYears[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"quantAttr = [\n {label: 'Year of award', value: 'year'},\n {label: 'Age at award', value: 'age'},\n {label: 'Year of birth', value: 'birthyear'},\n {label: 'Year of death', value: 'deathyear'},\n {label: '\"Influence\"', value: 'backlinks'},\n {label: 'References', value: 'references'},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"catAttr = [\n {label: 'Continent of birth', value: 'continent'},\n {label: 'Category of award', value: 'category'},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"colorDomain = _.chain(filtered).countBy(colorAttr).toPairs().sortBy(d => -d[1]).value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"colors = ['#e85151', '#f7d283', '#b6e86f', '#53c3ac', '#e68fc3', '#9563e8']","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.csv(`https://docs.google.com/spreadsheets/d/16mPW7e9y8GoUttoCo8NLuxl0nzbwuo_PFfIU_pA4ur8/gviz/tq?tqx=out:csv&sheet=Data`)\n .then(data => {\n return _.map(data, d => {\n const year = +d.year\n const birthyear = +d.birthday.slice(0, 4)\n return Object.assign(d, {\n year,\n backlinks: +d.backlinks,\n references: +d.references,\n birthyear,\n deathyear: +d.deathday.slice(0, 4),\n age: year - birthyear,\n category: d.categoryLabel || d.category,\n })\n })\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"import {slider, checkbox, select, number} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"import {scrollSVG} from '@sxywu/utility-functions'","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"import {serialize, rasterize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"fontSize = 11","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}