2b:null 2c:["$","title",null,{"children":"d3 radial lines | Rebecca Sutton Koeser | Observable"}] 31:Ta9d,// play with tweaking angles some more { let width = 40; let height = 100; // what if we tweak the angles we include? let leaf = Array.from([0, 10, 95, 180, 185, 270, 360], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ]; }); let leaf2 = Array.from([0, 20, 85, 180, 185, 270, 360], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ]; }); let leaf3 = Array.from([10, 20, 85, 180, 185, 270, 370], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ]; }); let leaf4 = Array.from([10, 20, 85, 160, 170, 270, 340, 370], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ]; }); let leaf5 = Array.from([0, 10, 20, 90, 180, 270, 360], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 85 && val <= 95 || val >= 265 && val < 276) ? width/2 : height/2 ]; }); let leaf6 = Array.from([0, 45, 90, 125, 180, 270, 360], (val, i) => { let angle = (Math.PI/180) * val; // convert degrees to radians return [ angle, (val >= 45 && val <= 95 || val >= 265 && val < 276) ? width/2 * (10 / (7 - 4 * Math.cos(angle))) : height/2 ]; }); let radialCurve = d3.lineRadial().curve(d3.curveNatural) return svg`` }32:[] 2f:{"id":"7e3db5b014142e7e","slug":null,"title":"d3 radial lines","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-04-21T00:50:56.112Z","update_time":"$D2023-05-30T23:39:38.475Z","view_time":null,"first_public_time":"$D2023-04-21T00:50:56.112Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"346d5cc63dc9e1da","login":"rlskoeser","name":"Rebecca Sutton Koeser","avatar_url":"https://avatars-next.observableusercontent.com/e062e3a8b4be6ea98d50a9e9128ee993c03d8001e02d1923c63cc48645291f0e","tier":"starter_2024","bio":"Lead Research Software Engineer @Princeton-CDH. Previously software engineer at @emory-libraries and contributor to @ecds, @emory-lits-labs"},"version":647,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4fc48f630c679603","login":"rlskoeser","name":"Rebecca Sutton Koeser","avatar_url":"https://avatars-next.observableusercontent.com/15b58922ced666b46fea5fd146d47e258d1d1c3bc1b255b2081d1547b7c02d02","tier":null,"bio":"Lead Research Software Engineer @Princeton-CDH. Previously software engineer at @emory-libraries and contributor to @ecds, @emory-lits-labs"}],"members":[{"type":"individual","id":"4fc48f630c679603","login":"rlskoeser","name":"Rebecca Sutton Koeser","avatar_url":"https://avatars-next.observableusercontent.com/15b58922ced666b46fea5fd146d47e258d1d1c3bc1b255b2081d1547b7c02d02","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3 radial lines","cells":[{"id":0,"value":"# d3 radial lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"// copied from the demo notebook\nspiral = Array.from({ length: 76 }, (_, i) => [\n (Math.PI / 3) * i, // angle (in radians)\n 2 * i // radius\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3.lineRadial()(spiral)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"// what if we apply a curve to the same thing?\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"circle = Array.from({length: 60}, (_, i) => [\n (Math.PI / 20) * i,\n 100\n ])\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"circle2 = Array.from([0, 30, 60, 90, 120, 180, 210, 240, 270, 290, 320, 340, 350, 360, 380,]).map(x => [Math.PI/180 * x, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"circle3 = Array.from({length: 37}, (_, i) => [\n (Math.PI/180) * i * 10,\n 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sineshape = Array.from({length: 37}, (_, i) => [\n (Math.PI/180) * i * 10,\n Math.abs(Math.sin(i*3.5) * 100)])\n // (i > 9 && i < 27 ) ? 100 : 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"pinwheel = Array.from({length: 37}, (_, i) => [\n (Math.PI/180) * i * 10,\n (i % 9) * 15]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// simplified gielis equation from https://www.researchgate.net/publication/333023328_A_geometrical_model_for_testing_bilateral_symmetry_of_bamboo_leaf_with_a_simplified_Gielis_equation\n\ngielis = Array.from({length: 37}, (_, i) => {\n let angle = (Math.PI/180) * i * 10;\n return [ angle,\n (1 / (Math.cos(angle/4) + Math.sin(angle/4))**5) * 100 ];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"// can we use this equation to make two points instead of a teardrop?\n// ... might be some way to make it work if we weren't plotting all the points and fit a curve...\nhalfgielis = Array.from({length: 37}, (_, i) => {\n let angle = (Math.PI/180) * i * 10;\n let rangle = angle;\n // if (i >= 27) {\n rangle = (Math.PI/180) * (i % 18) * 10;\n // }\n return [ angle,\n (1 / (Math.cos(rangle/4) + Math.sin(rangle/4))**5) * 100 ];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":" // what if we don't use as many angles?\ngielis2 = Array.from([0, 9, 18, 27, 36], (d, i) => {\n let angle = (Math.PI/180) * d * 10;\n return [ angle,\n (1 / (Math.cos(angle/4) + Math.sin(angle/4))**5) * 100 ];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"{\n // what if we apply a curve?\n let curvedGielis = d3.lineRadial().curve(d3.curveNatural)(gielis2)\n\n return svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"// try a parabola ?\n// 𝑟 =5 / 3+3cos𝜃\n\nparabola = Array.from({length: 36}, (_, i) => {\n let angle = (Math.PI/180) * i * 10;\n return [ angle,\n 5 / (3 + 3 * Math.cos(angle))];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"// ellipse ? r = 10/ 5−4cos𝜃\nellipse = {\nfunction ellipseradius(angle) {\n return 10 / (5 - 4 * Math.cos(angle));\n\n}\n\nlet ellipse = Array.from({length: 37}, (_, i) => {\n let angle = (Math.PI/180) * i * 10;\n return [ angle,\n ellipseradius(angle) * 15]; \n // (10 / (5 - 4 * Math.cos(angle))) * 15]; // multiply to scale up\n})\n\n return ellipse;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"// same points but draw with a curve\nsvg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"leaf = { \n let width = 40;\n let height = 100;\n\n let leaf = Array.from([0, 90, 180, 270, 360], (val, i) => {\n let angle = (Math.PI/180) * val; // convert to radians\n return [ angle,\n ([90, 270].includes(val) ? width/2 : height/2) ];\n })\n\n return leaf;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"leaf2 = { \n let width = 40;\n let height = 100;\n\n // what if we tweak the angles we include?\n \n let leaf = Array.from([0, 10, 95, 180, 185, 270, 360], (val, i) => {\n let angle = (Math.PI/180) * val; // convert degrees to radians\n return [ angle,\n (val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];\n })\n\n return leaf\n// return svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"// try some different curve functions\n// natural basis-closed bump-y cardinal-closed catmullrom\n// curveNatural still seems like the best option\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"// how much can we rely on css transforms to scale ?\n// default scale-x scale-y skew perspective\n\n// skewing seems to conflict with translate\n// perspective can't be applied to svg elements\n{ \nlet leafPath = d3.lineRadial().curve(d3.curveNatural)(leaf2);\n\nreturn svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"// another leaf shape equation\n// from https://link.springer.com/article/10.1007/s11676-021-01385-x#Equ15\n\n// references another article that adds a deformation parameter / deformation matrix\n\nleafcurve = Array.from({length: 37}, (_, i) => {\n // parameters to fit;\n // α = 1.5, β = 2.5 and γ = 2\n let gamma = 2;\n let alpha = 1.5;\n let beta = 2.5;\n \n let angle = (Math.PI/180) * i * 10;\n let radius;\n if (angle >= 0 && angle < Math.PI ) {\n radius = (- alpha * angle - beta * angle**2)**gamma;\n } else if (angle >= Math.PI && angle < 2 * Math.PI) {\n radius = (- alpha * (2*Math.PI - angle) - beta*(2*Math.PI - angle)**2)**gamma;\n } \n return [ angle, radius];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"