3e:null 3f:["$","title",null,{"children":"Agitated SVG Circle Study | flamont | Observable"}] 45:[] 43:{"id":"563750df00b0f378","slug":null,"title":"Agitated SVG Circle Study","thumbnail":"8bddeb5fcc1692102b1c90a621e3c99a4e33424df9e181f2ce8424410246c0d5","access_level":"public","create_time":"$D2023-03-17T15:52:25.155Z","update_time":"$D2023-03-17T15:52:25.155Z","view_time":null,"first_public_time":"$D2023-03-17T15:52:25.155Z","has_unpublished_edits":null,"fork":{"id":"f0ffbd254ad5c606","slug":"agitated-svg-circle-study","title":"Agitated SVG Circle Study","owner":{"id":"a602f2e90a77ee3b","login":"auchers","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"01997b0234bff9b5","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":"starter_2024","bio":"Designer & developer\n-\nCurrently working at CBC / Radio-Canada as an information designer","following":false},"version":275,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"756edf4fcc2b842a","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":null,"bio":"Designer & developer\n-\nCurrently working at CBC / Radio-Canada as an information designer","following":false}],"members":[{"type":"individual","id":"756edf4fcc2b842a","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Agitated SVG Circle Study","cells":[{"id":0,"value":"md`# Agitated SVG Circle Study\nref: https://observablehq.com/@d3/d3-lineradial\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"chart = {\n const path = i => line(i)(data);\n\n // filter ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMergeNode\n // \n // \n // \n // \n // \n // \n // \n // \n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof numCirles = slider({ min: 1, max: 10, value: 2, step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof frequency = slider({ min: .01, max: 5, value: .3 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof amplitude = slider({ min: 1, max: 100, value: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof speed = slider({ min: .5, max: 5, value: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"baseR = 120","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"Array.from({ length: numCirles })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"line = i =>\n d3\n .lineRadial()\n .angle(d => d)\n .curve(d3.curveCardinalClosed)\n .radius(\n d =>\n baseR +\n rScale(\n simplex.noise3D(\n Math.cos(d * i) * frequency,\n Math.sin(d * i) * frequency,\n // i + 3\n (i * now) / 5500\n )\n )\n )\n// .radius(d => baseR + rScale(simplex.noise2D(d * i * frequency, now / 5500)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"rScale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([-amplitude, amplitude])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"circleSegments = 60","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"data = Array.from(\n { length: circleSegments },\n (d, i) => (i / (circleSegments + 1)) * 2 * Math.PI\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"simplex = new noise()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`\n# Libraries and Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"noise = require(\"simplex-noise@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"