36:["$","title",null,{"children":"Making digital fynbos | Bernelle Verster | Observable"}] 3e:T54c,{ const svg = d3.select(DOM.svg(svgWidth, svgHeight)); const containerWidth = svgWidth - margin * 2; const containerHeight = svgHeight - margin * 2; const container = svg .append('g') .attr("width", containerWidth) .attr("height", containerHeight) .attr( 'transform', `translate(${svgWidth / 2 + margin}, ${svgHeight / 2 + margin})` ); const data = [createFynbos()]; const flowers = container .selectAll('g') .data(data) .join('g') .classed("flower", true); const petals = flowers .selectAll('path') .data(d => d) .join('path') .classed("petal", true) .attr("data-petal-index", (d, i) => i) .attr('data-angle', d => d.angle) .attr('d', d => d.petalPath) .attr('transform', d => `rotate(${d.angle}) scale(${d.petalSize})`) .attr('fill', fillOrNot) .attr('stroke', 'black') .attr('stroke-width', 0.7); // why does this look different than the pistil width? const pistil = container .selectAll('g') .data(data) .join('g') .classed("pistil", true); pistil // flowers .selectAll('circle') .data(data) .join("circle") // .classed("pistil", true) .attr("r", pistilSize) // d => d[0].petalSize) .attr("fill", pistilFill) .attr("stroke", "black") .attr("stroke-width", 0.7); return svg.node(); }3f:[{"id":"6e90c6703507a220d744bf8de3ebeb65bc6ffb5640c505beb4c8c1d71ac23030077b96f85e98a35e0eb612ccc1d49c246cf36cbfc12f138890ca6f01367b56de","href":"https://static.observableusercontent.com/files/6e90c6703507a220d744bf8de3ebeb65bc6ffb5640c505beb4c8c1d71ac23030077b96f85e98a35e0eb612ccc1d49c246cf36cbfc12f138890ca6f01367b56de","name":"image@1.png","type":"image/png","lastModified":1601062898467.481,"size":2297707},{"id":"b331a19b4457387feba7289ad8a414d43bd74752f661d1211e4d021ed67afb846c6bf405a57ca406e3ea864909468adc8d4a11deb07ea41026a49dae53ac89cb","href":"https://static.observableusercontent.com/files/b331a19b4457387feba7289ad8a414d43bd74752f661d1211e4d021ed67afb846c6bf405a57ca406e3ea864909468adc8d4a11deb07ea41026a49dae53ac89cb","name":"image.png","type":"image/png","lastModified":1601062836444.08,"size":1798446}] 3a:{"id":"e898bf54ce705855","slug":"making-digital-fynbos/2","title":"Making digital fynbos","thumbnail":"2d49b6f6439e24655174a7a07e13f4952a266a6601ece7fdfe700b8595142883","access_level":"public","create_time":"$D2020-09-25T19:08:18.718Z","update_time":"$D2020-10-01T11:02:23.633Z","view_time":null,"first_public_time":"$D2020-09-25T19:47:47.463Z","has_unpublished_edits":null,"fork":{"id":"266649aa992e9fbf","slug":"california-poppy-generator","title":"California poppy generator","owner":{"id":"ecf037f5c1847e7a","login":"palewire","name":"Ben Welsh"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024","bio":"Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.","followed_by_you":false,"follows_you":false},"version":872,"publish_version":872,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"bio":"Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[{"id":"dcbfd1c74dcdf757","reply_to_id":null,"content":"I think the petals will look better starting from a broader base, so a line, not a point. I think this is doable, with the M, L , C from the video","create_time":"$D2020-10-01T10:44:49.381Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Making digital fynbos","cells":[{"id":0,"value":"md`# Making digital fynbos` // Forked and based on \"Introduction to D3.js with Shirley Wu\" (https://youtu.be/rQroxWLZiCo) I just found that video incredibly painful to watch.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md` I want to create more abstract, digital versions of [fynbos](https://en.wikipedia.org/wiki/Fynbos) - the plants that are found in the Fynbos biome in the Western Cape, South Africa, specifically the area that I live, [Hopefield](http://www.capenature.co.za/wp-content/uploads/2015/10/What-makes-the-Sandveld-Special.pdf).` // https://www.westcoastway.co.za/hopefield-fynbos-show/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`First, I need to decide on the petal shapes. I would love to do proteas - the 'king' type or sugarbush, and the pincushion type, and an erica, at least. I'll start with the sugarbush type, because it looks most similar to the existing example. Then, I would like to be able to adjust the (individual rings of) for size, to approximate the growing outwards of the flower. I would like to make the middle look different. (I think I can do these individually and then display them all in the same cell at the same position) I need to decide if I want to rotate the flowers to allow for export of different views, or if an abstract top down view is fine. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"md`I'll start with the [Shale sugarbush](https://www.proteaatlas.org.za/sugar15.htm) as that is (I think) exactly what I have growing on my little farm. It's not the most showy protea, as the soils here are very poor, but it's dainty and pretty in its own right, especially as they flower en masse creating a golden shine to the fynbos canopy, if you can call it that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"md`

Close up of my shale sugarbush's flower.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof petalCount = slider({\n min: 3,\n max: 9,\n value: 5,\n step: 1,\n description: 'Petal number, between 3 and 9.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"viewof fillOrNot = radio({\n // description: 'Fill or no fill?',\n options: [\n { label: 'petal no fill', value: 'none' },\n { label: 'petal black', value: 'black' }\n ],\n value: 'none'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof pistilSize = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 25,\n description: \"Pistil size. The thing in the middle.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"viewof pistilFill = radio({\n // description: 'Fill or no fill?',\n options: [\n { label: 'pistil no fill', value: 'none' },\n { label: 'pistil black', value: 'black' }\n ],\n value: 'none'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`I would like the pistil to be a group of circles like this [funky circle observable](https://observablehq.com/@cpreid2/circle-packing) or this [lotsa circles observable](https://observablehq.com/@emamd/animating-lots-and-lots-of-circles-with-regl-js) probably using [d3.packEnclose](https://github.com/d3/d3-hierarchy#packEnclose), with a [mbostock example](https://observablehq.com/@mbostock/circle-packing-methods). I would also like to duplicate the flower so I can make a shadow or an offset rotated one or something. I think I also need to look at import functions, to keep the components separate and just import them, rather than trying to squeeze it all into one notebook. Need to think about the pro's and cons.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md`### Petal shape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof curveX = slider({\n min: 0,\n max: 50,\n value: 8,\n step: 1,\n description: \"Base curve start\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof curveY = slider({\n min: 0,\n max: 50,\n value: 47,\n step: 1,\n description: \"Base curve end\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"viewof cornerY = slider({\n min: 0,\n max: 50,\n value: 34,\n step: 1,\n description: \"Edge curve start\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof tipY = slider({\n min: 0,\n max: 50,\n value: 44,\n step: 1,\n description: \"Edge curve end\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"svgWidth = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"svgHeight = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"margin = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"viewof petalSize = slider({\n min: 0,\n max: 1,\n step: 0.05,\n value: 0.15,\n description: \"Petal size. The radius of the petals extending outwards\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`## The code\n\nHow it works`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"createFynbos = () => {\n const petalPath = createPetalPath();\n const petals = Array(petalCount)\n .fill()\n .map((_, i) => ({\n angle: (360 * i) / petalCount,\n petalSize: getPetalSize(petalSize),\n petalPath\n }));\n return petals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"createPetalPath = () => {\n const start = 0;\n return [\n 'M',\n `${start} ${start}`,\n 'C',\n `-${curveX} -${curveY}`,\n `-${curveX} -${cornerY}`,\n `0 -${tipY}`,\n 'C',\n `${curveX} -${cornerY}`,\n `${curveX} -${curveY}`,\n `${start} ${start}`\n ].join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"getPetalSize = value => {\n const scale = d3.scaleLinear().range([2.5, 6.5]);\n return scale(value);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"petalRotation = angle => d3.transform().rotate(angle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"littlePistils = Array.from({ length: 20 }, () => ({\n x: ((Math.random() - 0.5) / 2 + 0.5) * pistilSize, //width,\n y: ((Math.random() - 0.5) / 2 + 0.5) * pistilSize, //height,\n r: (Math.random() + 0.5) * 20\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"enclosingPistil = d3.packEnclose(littlePistils)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`## Dependencies\n\nOur building blocks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"import { slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5', 'd3-transform', 'd3-scale')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"md`## To Do`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"md`I would like more shape options if I want to start from the same template to make other petals, something that this [observable](https://observablehq.com/@alex-pi/learning-d3-with-shirleys-film-flowers) addresses with a link to the details of the [Cubic Bezier Commands](https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md` I really like the generative art vibe of [Rubens' Observable](https://observablehq.com/@rubens2005/rubens-d3-extravaganza), but don't care much to link it to real data. So I'm going to have to randomise the petal quantity (was film voting) and flower size (was film rating). I'd like it to have some direction though, sortof like the flowers are exploding and then coalescing or something. No idea how to do that. I will work on that in a separate [observable](https://observablehq.com/@indiebio/making-digital-fynbos).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null