25:["$","title",null,{"children":"Pattern | Amelia Sampaolo's Workspace | Observable"}] 4b:T5f2, // creare la base dell'svg {let svg = d3. create("svg").attr("width", 1600).attr("height", 400); // creare un gradiente const gradient = svg.append('defs').append('radialGradient') .attr('id', 'radial-gradient') .attr('cx', '50%') .attr('cy', '50%') .attr('r', '50%'); gradient.append('stop') .attr('offset', '0%') .attr('style', 'stop-color: blue; stop-opacity: 0.5'); gradient.append('stop') .attr('offset', '100%') .attr('style', 'stop-color: yellow; stop-opacity: 0.2'); // creo una riga di cerchi for(let j = 0; j < 600; j += spazio) { for(let i = 0; i < 1600; i += spazio) { svg.append("circle") .attr("cx", i) .attr("cy", j) .attr("r", 25) // aggiungere gradiente ai cerchi .style('fill', 'url(#radial-gradient)'); } } // creo una griglia con i quadrati for(let xi = 0; xi < 1600; xi += griglia) { for(let zi = 0; zi < 5000; zi += griglia) { svg.append("rect") .attr("x", xi + griglia - 250) .attr("y", zi + griglia - 250) .attr("height", griglia) .attr("width", griglia) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "5") .attr("opacity", "0.2") } } // creo una colonna di cerchi for(let w = 0; w < 600; w += spazio1) { for(let z = 0; z < 1600; z += spazio1) { svg.append("circle") .attr("cx", z) .attr("cy", w) .attr("r", 37.5) .style('fill', 'url(#radial-gradient)'); } } return svg.node() } 4c:T50b,html` `4d:T454,// Creazione dell'elemento SVG { let svg = d3. create("svg").attr("width", 200).attr("height", 200); // Definizione del pattern const pattern = d3.create("pattern"); .attr("id", "cerchi-concentrici"); .attr("width", 20); .attr("height", 20); .attr("patternUnits", "userSpaceOnUse"); // Creazione dei cerchi const circle1 = d3.create("circle") .attr("cx", 10); .attr("cy", 10); .attr("r", 5); .attr("fill", "red"); const circle2 = d3.create("circle") .attr("cx", 10); .attr("cy", 10); .attr("r", 3); .attr("fill", "blue"); const circle3 = d3.create("circle") .attr("cx", 10); .attr("cy", 10); .attr("r", 1); .attr("fill", "green"); // Aggiunta dei cerchi al pattern pattern.append(circle1); pattern.append(circle2); pattern.append(circle3); // Aggiunta del pattern al documento SVG svg.append(pattern); // Creazione del rettangolo che utilizza il pattern const rect = d3.create("rect") .attr("width", 200); .attr("height", 200); .attr("fill", "cerchi-concentrici"); // Aggiunta del rettangolo al documento SVG svg.append(rect); // Aggiunta dell'elemento SVG al documento HTML return svg.node(); }4e:[] 47:{"id":"6d42bd768b526ee9","slug":"pattern","title":"Pattern","thumbnail":"a8cb985091de1c32e8d4e1e4396dd1b9e5596b1561bf53d74c3ae077a1b1ef1c","access_level":"public","create_time":"$D2023-10-29T16:17:51.902Z","update_time":"$D2023-10-30T23:49:16.826Z","view_time":null,"first_public_time":"$D2023-10-30T21:05:36.551Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"429748bb0b7404a3","login":"amelia","name":"Amelia Sampaolo's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/733ab2b1d68aff139ba09824fc46786715689b327b920a7341a283f02e10f87a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":633,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f876a3383fe1267e","login":"amelia-s","name":"Amelia Sampaolo","avatar_url":"https://avatars-next.observableusercontent.com/8843c656d9ebace3f4b4fbe8c07359df66075688f31bd40b63489066f0bdc6a7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"429748bb0b7404a3","login":"amelia","name":"Amelia Sampaolo's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/733ab2b1d68aff139ba09824fc46786715689b327b920a7341a283f02e10f87a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f876a3383fe1267e","login":"amelia-s","name":"Amelia Sampaolo","avatar_url":"https://avatars-next.observableusercontent.com/8843c656d9ebace3f4b4fbe8c07359df66075688f31bd40b63489066f0bdc6a7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pattern","cells":[{"id":0,"value":"# Pattern","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"gli elementi coincidono se si mantiene la visualizzazione standard, altrimenti si possono variare i seguenti valori: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"viewof griglia = Inputs.range([25, 75], {label: \"Dimensione griglia\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"viewof spazio = Inputs.range([25, 175], {label: \"spacing cerchi piccoli\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"viewof spazio1 = Inputs.range([25, 375], {label: \"spacing cerchi grandi\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"{let svg = d3. create(\"svg\").attr(\"width\", 300).attr(\"height\", 200);\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"opzione scartata: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"elemento base (solo svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"html`\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"pattern (solo con funzioni svg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"# no","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"{\nlet svg = d3. create(\"svg\").attr(\"width\", 1500).attr(\"height\", 500);\n\n \n \nconst circle = svg\n.selectAll(\"circle\")\n.data(d3.range (20))\n.join(\"circle\")\n.attr(\"cx\", d => 20 + d * 50) \n.attr(\"cy\", 250)\n .attr(\"r\", d => 20 - d) \n .attr(\"fill\", \"black\") \n .attr(\"stroke\", \"#000000\");\n \nconst rect = svg\n.selectAll (\"rect\")\n.data(d3.range (20))\n.join (\"rect\")\n.attr('width', d => 0.2 + d) \n.attr('height', d => 0.2 + d) \n.attr(\"x\", d => 20 + d * 50) \n.attr(\"y\", 200) \n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"#000000\");\n\n return svg.node();\n\n \n\n\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$4d","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