31:T661,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 ? big : small)); // 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)) return svg.node(); }32:T44c,ixtLogo = ``33:[] 2f:{"title":"10 years of Interactive Things","cells":[{"id":0,"value":"md`# 10 years of Interactive Things`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`Brand communication research for [Interactive Things 10 years anniversary](https://10.interactivethings.com/). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`## Parameters`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`### Global parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"side = 1000 // Change here the size of the visualization (it's a square).","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"backgroundDotsNumber = 2500 // Change here the number of dots randomly positioned in the background.","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"opacity = 0.8 // Change here the opacity of circles.","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"red = \"#FF5555\" // This is IXT red.","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"navy = \"#003B5C\" // This is IXT navy.","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":259,"value":"pathToSample = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"M = 400 // Change here the number of points along the path to sample: the more dots, the denser it will look!","pinned":true,"hidden":false,"mode":"ojs"},{"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\nShould we use Perlin noise?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`#### First layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"viewof r1 = slider({\n min: 1, \n max: 20, \n step: 1, \n value: 10, \n title: \"Randomness range (distance from the original shape)\", \n description: \"Integers from 1 to 20\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"\nviewof r1DotColor = color({\n value: red\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":419,"value":"md`#### Second layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof r2 = slider({\n min: 1, \n max: 50, \n step: 1, \n value: 25, \n title: \"Randomness range\", \n description: \"Integers from 1 to 50\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof r2DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"\nviewof r2DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 3, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`#### Third layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof r3 = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 50, \n title: \"Randomness range\", \n description: \"Integers from 1 to 100\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"viewof r3DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"\nviewof r3DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 1, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"shape = svg``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"path = shape.querySelector(\"path\")","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"width = side","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = side","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"margin = ({top: 0, right: 0, bottom: 0, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"small = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"medium = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"big = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y))\n .range([margin.top,height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"data = Array.from({length: backgroundDotsNumber}, () => ({x:Math.floor(Math.random() * side), y:Math.floor(Math.random() * side)}));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}