29:null 2a:["$","title",null,{"children":"Pandemic Emotions Tracker | Luc Guillemot | Observable"}] 2f:T1134,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color .copy() .rangeRound( d3.quantize(d3.interpolate(marginLeft, width - marginRight), n) ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr( "xlink:href", ramp( color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) ).toDataURL() ); } // Sequential else if (color.interpolator) { x = Object.assign( color .copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; } } ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3 .range(n) .map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3 .scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) ) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", 14) .attr("class", "title") .text(title) ); return svg.node(); }30:[{"id":"9e4114b0cc6aef1da0537ccf7d0cd4a3cb3458a45f06c75959264d8bdb5e2ae63c95882a7e4d435d813ba83e2f53c2b715af96c458f6afc852295448c0514802","href":"https://static.observableusercontent.com/files/9e4114b0cc6aef1da0537ccf7d0cd4a3cb3458a45f06c75959264d8bdb5e2ae63c95882a7e4d435d813ba83e2f53c2b715af96c458f6afc852295448c0514802","name":"circumplex.csv","type":"text/csv","lastModified":1618055163386.404,"size":770},{"id":"4c4eda4cdc9e973dabf3534d270f128abfa85b0a8466d6a332eca24fd4a29913cfb68721f20c20ee77177697a7d2ccd7147ed9822b23704362efed9e2d38d89f","href":"https://static.observableusercontent.com/files/4c4eda4cdc9e973dabf3534d270f128abfa85b0a8466d6a332eca24fd4a29913cfb68721f20c20ee77177697a7d2ccd7147ed9822b23704362efed9e2d38d89f","name":"circumplex.jpg","type":"image/jpeg","lastModified":1618123218326.081,"size":322081}] 2d:{"id":"a001965e4e2dad40","slug":"pandemic-emotions-tracker","title":"Pandemic Emotions Tracker","thumbnail":"d699764f53e01c5d623d295beff2ba1525c86eaddb46b8262b6163472bdb2cc8","access_level":"public","create_time":"$D2021-04-10T11:46:03.386Z","update_time":"$D2021-04-11T06:56:55.255Z","view_time":null,"first_public_time":"$D2021-04-11T06:57:08.130Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":"starter_2024"},"version":526,"publish_version":526,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null}],"members":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2aaf9ec71cbec838","slug":"30-day-chart-challenge-2021","title":"30 Day Chart Challenge 2021","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"type":"notebook","body":{"title":"Pandemic Emotions Tracker","cells":[{"id":0,"value":"md`# Pandemic Emotions Tracker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`I track my emotions every day by gathering statistics along two variables: pleasantness and arousal. This system is loosely based on James Russel's [_A circumplex model of affects_](https://psycnet.apa.org/record/1981-25062-001) (1980). I rate every day from 1 to 10, which helps me identify ${highlightedText(\n { background: colorScale(41), color: \"white\", text: \"mood tunnels\" }\n)}, like last summer when the staying-at-home situation became harder to handle (bottom-left corner).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"legend({\n color: colorScale,\n title: \"Number of days of 2020\",\n width: 180,\n tickSize: 0,\n ticks: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"fill\", d => colorScale(d.n))\n .attr(\"x\", d => xScale(d.pleasantness))\n .attr(\"y\", d => yScale(d.arousal))\n .attr(\"width\", squareWidth)\n .attr(\"height\", squareWidth)\n .attr(\"stroke-width\", 0);\n\n svg.append(\"g\").call(axisVertical);\n svg.append(\"g\").call(axisHorizontal);\n svg.append(\"g\").call(emotions);\n //svg.append(\"g\").call(xAxis);\n //svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"attribution({\n source: { label: \"Self reported.\", link: \"\" },\n day: \"09\",\n category: \"Distributions\",\n prompt: \"Statistics\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`

Russel's model is circular. This figure illustrates the experimental placement of 28 affect words performed by 36 students, along the coordinates of the model.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`## Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`Russell, J. A. (1980). _A circumplex model of affect_. Journal of Personality and Social Psychology, 39(6), 1161–1178. https://doi.org/10.1037/h0077714`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`## Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"emotions = g => {\n g.attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 26)\n .attr(\"dominant-baseline\", \"middle\")\n .append(\"text\")\n .attr(\"x\", -6)\n .attr(\"y\", 10)\n .text(\"😡\");\n g.append(\"text\")\n .attr(\"x\", bounds.chartWidth + squareWidth * 1.5)\n .attr(\"y\", 10)\n .text(\"😃\");\n g.append(\"text\")\n .attr(\"x\", bounds.chartWidth + squareWidth * 1.5)\n .attr(\"y\", bounds.chartHeight + squareWidth * 2)\n .text(\"🙂\");\n g.append(\"text\")\n .attr(\"x\", -6)\n .attr(\"y\", bounds.chartHeight + squareWidth * 2)\n .text(\"😓\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"axisHorizontal = g => {\n g.attr(\n \"transform\",\n `translate(${margins.left}, ${margins.top +\n bounds.chartHeight / 2 +\n squareWidth})`\n )\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 14)\n .attr(\"dominant-baseline\", \"middle\")\n .append(\"line\")\n .attr(\"x1\", squareWidth)\n .attr(\"x2\", bounds.chartWidth + squareWidth)\n .attr(\"stroke\", lightGray);\n g.append(\"text\")\n .attr(\"x\", squareWidth - offset)\n .attr(\"text-anchor\", \"end\")\n .text(\"Unpleasant\");\n g.append(\"text\")\n .attr(\"x\", bounds.chartWidth + squareWidth + offset)\n .text(\"Pleasant\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"axisVertical = g => {\n g.attr(\n \"transform\",\n `translate(${margins.left + bounds.chartWidth / 2 + squareWidth}, ${\n margins.top\n })`\n )\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 14)\n .append(\"line\")\n .attr(\"y1\", squareWidth)\n .attr(\"y2\", bounds.chartHeight + squareWidth)\n .attr(\"stroke\", lightGray);\n g.append(\"text\")\n .attr(\"y\", squareWidth - offset)\n .text(\"Aroused\");\n g.append(\"text\")\n .attr(\"y\", bounds.chartHeight + squareWidth + offset * 2)\n .text(\"Not aroused\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .call(d3.axisRight(yScale))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").remove())\n .call(g =>\n g\n .selectAll(\".tick text\")\n .attr(\n \"transform\",\n `translate(${bounds.chartWidth + squareWidth}, ${squareWidth / 2})`\n )\n .attr(\"fill\", lightGray)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .call(d3.axisTop(xScale))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").remove())\n .call(g =>\n g\n .selectAll(\".tick text\")\n .attr(\"transform\", `translate(${squareWidth / 2}, ${squareWidth})`)\n .attr(\"fill\", lightGray)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"colorScale = d3\n .scaleSequential(d3.interpolateOranges)\n .domain(d3.extent(data, d => d.n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"xScale = d3\n .scaleLinear()\n .domain([1, 10])\n .range([squareWidth, bounds.chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"yScale = d3\n .scaleLinear()\n .domain([1, 10])\n .range([bounds.chartHeight, squareWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"data = d3.csvParse(await FileAttachment(\"circumplex.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"highlightedText = ({ background, color, text }) =>\n html` ${text}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"squareWidth = 32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"lightGray = \"#000\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"offset = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"bounds = ({ margins, \n chartWidth: width - margins.left - margins.right, \n chartHeight: height - margins.top - margins.bottom })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"margins = ({ top: 30, right: 170, bottom: 90, left: 80 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"width = squareWidth * 10 + margins.left + margins.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = squareWidth * 10 + margins.top + margins.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Libraries & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"attribution = ({\n source,\n note,\n day,\n category,\n prompt\n}) => md`

**#30DayChartChallenge** | ${day} | ${category} | ${prompt}

\n ${note ? `

${note}

` : \"\"}\n

**Source**: ${\n source.link ? `[${source.label}](${source.link})` : source.label\n}

**Creator**: [Luc Guillemot](https://lucguillemot.com/)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"formatThousands = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"