31:T574,function face(color, duration = 5) { return svg` `; }32:T773,// css animations adapted from https://dev.to/5t3ph/how-to-create-an-animated-svg-face-with-css-5djd svgFaces = { function looper(nx, ny) { const result = []; for (let i = 0; i < nx; i++) { for (let j = 0; j < ny; j++) { result.push([i, j]); } } return result; } function oneFace(i, j) { const faceColor = _.sample(Object.values(colors)); let browColor = chroma(faceColor).darken(1); if (Math.random() < 0.2) { browColor = chroma(faceColor).brighten(1); } let mouthColor = chroma(faceColor).darken(2); return svg``; } const w = width / nCols; const nRows = Math.floor(nCols / 2); const result = svg``; return result; }33:T11f5,// https://observablehq.com/@d3/scatterplot/2 chart = { // seems like inter-blink time distribution is... lognormal! https://pubmed.ncbi.nlm.nih.gov/20944934/ const rn = d3.randomLogNormal(2, 1); const wait = (d) => rn() * 1000; // Specify the chart’s dimensions. const height = 600; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; // Prepare the scales for positional encoding. const x = d3 .scaleLinear() .domain(d3.extent(cars, (d) => d.mpg)) .nice() .range([marginLeft, width - marginRight]); const y = d3 .scaleLinear() .domain(d3.extent(cars, (d) => d.hp)) .nice() .range([height - marginBottom, marginTop]); const r = d3 .scaleLinear() .domain(d3.extent(cars, (d) => d.disp)) .nice() .range([20, 40]); // Create the SVG container. const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // Create the axes. svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("→") ); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑") ); // Add a layer of things. const faceSelection = svg .append("g") .attr("class", "faces") .selectAll("svg.face") .data(cars, (d) => d) .join((enter) => { const face = enter .append("svg") .classed("face", true) .attr("x", (d) => x(d.mpg)) .attr("y", (d) => y(d.hp)) .attr("width", (d) => 2 * r(d.disp)) .attr("height", (d) => 2 * r(d.disp)) .attr("viewBox", (d) => { const rad = r(d.disp); return [-rad, -rad, 2 * rad, 2 * rad]; }) /*.on("click", function (event, d) { //d3.select(this).classed("blink", true); d3.selectAll("svg.face").each(function () { d3.select(this).classed("blink", true); }); })*/ .on("animationend", function (event, d) { //console.log("animationend"); const e = d3.select(this); e.classed("blink", false); setTimeout((d) => e.classed("blink", true), wait()); }); const outline = face .append("circle") .attr("class", "outline") .attr("cx", 0) .attr("cy", 0) .attr("r", (d) => r(d.disp)) .attr("fill", (d) => _.sample(d3.schemeSet2)); const leftEye = face.append("g").classed("eye left-eye", true); leftEye .append("ellipse") .classed("white", true) .attr("cx", (d) => -(2 * r(d.disp)) / 5) .attr("cy", 0) .attr("rx", (d) => r(d.disp) / 5) .attr("ry", (d) => r(d.disp) / 5); leftEye .append("ellipse") .classed("pupil", true) .attr("cx", (d) => -(2 * r(d.disp)) / 5 + 2) .attr("cy", 0) .attr("rx", (d) => r(d.disp) / 10) .attr("ry", (d) => r(d.disp) / 10); const rightEye = face.append("g").classed("eye right-eye", true); rightEye .append("ellipse") .classed("white", true) .attr("cx", (d) => (2 * r(d.disp)) / 5) .attr("cy", (d) => 0) .attr("rx", (d) => r(d.disp) / 5) .attr("ry", (d) => r(d.disp) / 5); rightEye .append("ellipse") .classed("pupil", true) .attr("cx", (d) => (2 * r(d.disp)) / 5 + 1) .attr("cy", (d) => 0) .attr("rx", (d) => r(d.disp) / 10) .attr("ry", (d) => r(d.disp) / 10); //.attr("fill", "yellow"); const mouth = face.append("g").classed("mouth", true); mouth .append("path") .attr("d", function (d, i) { const rad = r(d.disp); const r2 = rad / 2; return `M${-r2} ${rad / 3} c0 ${r2}, ${rad} ${r2}, ${rad} 0`; }) .attr("opacity", 0.4); }); svg.selectAll("svg.face").each(function (d, i) { const e = d3.select(this); e.classed("blink", false); setTimeout((d) => e.classed("blink", true), wait()); }); return svg.node(); }34:[{"id":"44910c63ceb316cb611c7de7c29454b04bcfc706b300a4cbb7c9cec9f58d822dd20094945f9c060d796e108eb2e1f624757c03e3314e1be7e036e3bb85d8b90e","href":"https://static.observableusercontent.com/files/44910c63ceb316cb611c7de7c29454b04bcfc706b300a4cbb7c9cec9f58d822dd20094945f9c060d796e108eb2e1f624757c03e3314e1be7e036e3bb85d8b90e","name":"image.png","type":"image/png","lastModified":1695755213564.102,"size":1523932}] 2f:{"title":"Blinking Faces","cells":[{"id":0,"value":"# Blinking Faces\n\nCircles with personality. Would need to be careful to use effectively, but could imagine these coming in handy in some more light-hearted situations where there's still a need to remind viewers that dots are people.","pinned":false,"hidden":false,"mode":"md"},{"id":1139,"value":"### Using SVG Animation","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1141,"value":"### Observable Plot markers","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"function faceMarker(size = 20, duration = 5) {\n return function (color) {\n return svg`\n\n ${face(color, duration)}\n`;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"// see https://observablehq.com/@observablehq/plot-custom-markers\n// They all blink at the same time. Solving this probably requires something other than \"marker\" because it's one thing that's referenced.\nPlot.plot({\n marks: [\n Plot.line(sftemp.slice(-90, -10), {\n x: \"date\",\n y: \"high\",\n stroke: \"rgb(0,100,200)\",\n marker: faceMarker(15, 1.5)\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1143,"value":"### CSS Animation","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"// add event listeners for grid of faces\n{\n svgFaces;\n const elements = Array.from(document.querySelectorAll(\".buddy\"));\n\n const wait = () =>\n 250 + Math.pow(elements.length, 0.75) * 1 * 1000 * Math.random();\n\n elements.forEach(function (buddy) {\n let timerId = setTimeout(function tick() {\n buddy.classList.add(\"wink\");\n timerId = setTimeout(tick, wait());\n }, wait());\n buddy.addEventListener(\"animationend\", () => {\n buddy.classList.remove(\"wink\");\n });\n });\n return \"// add event listeners for grid of faces\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof nCols = Inputs.range([1, 60], {\n step: 1,\n value: 13,\n label: \"number of columns\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof rot = Inputs.range([-20, 20], {\n step: 1,\n label: \"brow rotation\",\n value: -5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1145,"value":"### Still CSS Animation, but with D3 for drawing","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"### Skin tones\n\nJust used the color picker with crayons... probably could do this better","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"image = FileAttachment(\"image.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"colors = ({\n \"medium almond\": \"#c79377\",\n \"medium deep rose\": \"#e88c94\",\n \"light medium almond\": \"#d9af9e\",\n \"light medium rose\": \"#f3aeb3\",\n \"light almond\": \"#e6b9b4\",\n \"light rose\": \"#fbc7c4\",\n \"light medium golden\": \"#f2c8a2\",\n \"very light almond\": \"#e6d2d3\",\n \"light golden\": \"#eddcc5\",\n \"very light rose\": \"#f8e1e2\",\n \"very light golden\": \"#f0dece\",\n \"very light almond\": \"#ede6cf\",\n \"deepest almond\": \"#533528\",\n \"extra deep golden\": \"#614430\",\n \"extra deep rose\": \"#6d4d4c\",\n \"extra deep almond\": \"#6e4f45\",\n \"very deep almond\": \"#88605f\",\n \"deep golden\": \"#8c5b2a\",\n \"medium deep golden\": \"#a06b4f\",\n \"deep almond\": \"#976a59\",\n \"very deep rose\": \"#906c65\",\n \"deep rose\": \"#b96e6b\",\n \"medium deep almond\": \"#ac8068\",\n \"medium golden\": \"#dda26b\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1154,"value":"import { cars } from \"@d3/scatterplot/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"import { sftemp } from \"@observablehq/plot-custom-markers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"chroma = require(\"chroma-js@2.4.2/chroma.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}