25:["$","title",null,{"children":"Interactive Things 10 Years Anniversary Visual | Benjamin Wiederkehr | Observable"}] 4c:T7bf,visualization = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // Background circles randomly positioned svg.append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .call(g => g.append("circle") .attr("fill", (d, i) => i % 2 == 0 ? red : navy) .attr("fill-opacity", opacity) .attr("r", (d, i) => i % 2 == 0 ? small : medium)); // Circles drawn along the path svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r1, r1)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r1, r1)())) .attr("fill", r1DotColor) .attr("fill-opacity", opacity) .attr("r", r1DotSize)) svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r2, r2)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r2, r2)())) .attr("fill", r2DotColor) .attr("fill-opacity", opacity) .attr("r", r2DotSize)) svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r3, r3)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r3, r3)())) .attr("fill", r3DotColor) .attr("fill-opacity", opacity) .attr("r", r3DotSize)) svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r4, r4)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r4, r4)())) .attr("fill", r4DotColor) .attr("fill-opacity", opacity) .attr("r", r4DotSize)) return svg.node(); }4d:T44c,ixtLogo = ``4e:[] 48:{"id":"6055e12c02b3ef83","slug":"10-years","title":"Interactive Things 10 Years Anniversary Visual","thumbnail":"65cf7b724476412cab6b2bea4d832bcabdfa3bde80be860271732ca1dae6ed8f","access_level":"public","create_time":"$D2019-08-08T17:32:22.380Z","update_time":"$D2021-02-02T18:59:02.813Z","view_time":null,"first_public_time":"$D2019-08-08T17:51:39.325Z","has_unpublished_edits":null,"fork":{"id":"4764016875865586","slug":"10-years","title":"10 years of Interactive Things","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bb234bc618cbaf28","login":"wiederkehr","name":"Benjamin Wiederkehr","avatar_url":"https://avatars-next.observableusercontent.com/f3dc4fbdea9cafc8095cdfc0a88577957a1caff8850093984e6c971fa3bf4e94","tier":"starter_2024","bio":"Swiss Interaction Designer, co-founder and director of Interactive Things.","followed_by_you":false,"follows_you":false},"version":562,"publish_version":562,"role":null,"authored":false,"authors":[{"type":"individual","id":"65bbb4bedd0301ab","login":"wiederkehr","name":"Benjamin Wiederkehr","avatar_url":"https://avatars-next.observableusercontent.com/f3dc4fbdea9cafc8095cdfc0a88577957a1caff8850093984e6c971fa3bf4e94","tier":null,"bio":"Swiss Interaction Designer, co-founder and director of Interactive Things.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65bbb4bedd0301ab","login":"wiederkehr","name":"Benjamin Wiederkehr","avatar_url":"https://avatars-next.observableusercontent.com/f3dc4fbdea9cafc8095cdfc0a88577957a1caff8850093984e6c971fa3bf4e94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Things 10 Years Anniversary Visual","cells":[{"id":0,"value":"md`# Interactive Things 10 Years Anniversary Visual`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`Brand communication for Interactive Things 10 years anniversary.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`## Parameters`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`### Global parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"side = 1000 // Change here the size of the visualization (it's a square).","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"backgroundDotsNumber = 2400 // Change here the number of dots randomly positioned in the background.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"opacity = 0.9 // Change here the opacity of circles.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"red = \"#FF5555\" // This is IXT red.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"navy = \"#003B5C\" // This is IXT navy.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`### Shape parameters\n\n\\`pathToSample\\` is the shape that you want to draw. It needs to be a single closed SVG \\`\\` element (with \\`Z\\` at the end af the \\`d\\` attribute). To position the shape correctly, it needs to be produced (in Sketch for instance) within an SVG that has the same width and height as defined in \\`side\\` above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"pathToSample = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"M = 500 // Change here the number of points along the path to sample: the more dots, the denser it will look!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`### Randomness parameters\nThere are three layers of circles based on ${M} dots (\\`M\\`) picked along the \\`\\` defined above. For each layers, you can tweak the parameters below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`#### First Layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"\nviewof r1DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"\nviewof r1DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 2, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof r1 = slider({\n min: 1, \n max: 60, \n step: 1, \n value: 50, \n title: \"Randomness range\", \n description: \"Integers from 1 to 60\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`#### Second layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof r2DotColor = color({\n value: red\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"\nviewof r2DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 2, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof r2 = slider({\n min: 1, \n max: 60, \n step: 1, \n value: 60, \n title: \"Randomness range\", \n description: \"Integers from 1 to 60\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`#### Third layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"viewof r3DotColor = color({\n value: red\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"\nviewof r3DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 4, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof r3 = slider({\n min: 1, \n max: 60, \n step: 1, \n value: 30, \n title: \"Randomness range\", \n description: \"Integers from 1 to 60\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`#### Fourth layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"viewof r4DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"viewof r4DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 4, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewof r4 = slider({\n min: 1, \n max: 60, \n step: 1, \n value: 30, \n title: \"Randomness range\", \n description: \"Integers from 1 to 60\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"shape = svg``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"path = shape.querySelector(\"path\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// from https://observablehq.com/@mbostock/fourier-series-path-sampling\nlinearSamples = {\n const L = path.getTotalLength();\n return Array.from({length: M}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / M * L);\n return [x, y];\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"width = side","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = side","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top: 0, right: 0, bottom: 0, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"small = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"medium = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"big = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y))\n .range([margin.top,height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data = Array.from({length: backgroundDotsNumber}, () => ({x:Math.floor(Math.random() * side), y:Math.floor(Math.random() * side)}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null