31:T9c3,md`Spring is welcomed in many parts of the Northern Hemisphere, with the emergence of millions of daffodils belonging to thousands of cultivars. But what are daffodils? How many cultivars exactly are there? And where did they come from? The genus Narcissus (daffodils) is part of the plant family Amaryllidaceae (along with such plants as Snowdrops and garlics), is composed of 26-60+ species, depending on who you ask [1] and this variation highlights the taxonomic complexity found in daffodils. The highest diversity of daffodil species is found in Iberia, the European Alps, and the Mediterranean [2]. Human activity has spread the daffodil far and wide over a long period of time so that now they are present on every continent except Antarctica. Some cultivated varieties (cultivars) are ancient, having been selected, bred, and spread before 1600. Here is a list of the most ancient cultivars from the International Daffodil Register [3] (IDR): ${mdTable} The most famous ancient cultivars, and ones you are most likely to see are Narcissus 'Romanus', derived from Narcissus tazetta and Narcissus 'Telamonius Plenus', an all yellow double flower. The 'formula' column presented tells us about the shape and colour of the daffodil flower. I won't say an awful lot about this, and further reading is here. Briefly, there are thirteen different divisions which distinguish the shape of the flower itself - things like the ratio of the trumpet (corona) length to the petal (perianth) length. These characteristics are more often than not caused by wild parental progenitors, flavouring the flower shape. For example, there are whole sections for cultivars that look like Narcissus cyclamineus, or Narcissus tazetta - two wild species. The right hand side of the formula tells us about the colour of the daffodil flower, the left side about the petals, and the right side (after the dash) about the corona. In sum, a D1 Y-W for example, is a large trumpeted flower with yellow petals and a white trumpet. The IDR, from which all the data here is presented has more than 25,000 distinct cultivar names, even after taking into account synonyms. Growers of daffodils have indeed been busy over then past few hundred years. I have a sample of around 17,000 cultivars, and will attempt to make some general statements about the cultivated daffodils of the world.`32:T3cc5,chartColours = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // default daff let coronaCol = "W"; let perianthCol = "W"; let gradient = null; let rects = svg .append("g") .selectAll("rect") .data(chartData) .join("rect") .attr("id", (d, i) => "rect" + i) .attr("fill", "#a1d99b") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.count)) .attr("height", d => y(0) - y(d.count)) .attr("width", x.bandwidth()); rects .on("pointerenter", function(event, d) { let ID = "#rect" + d.thisId; svg.select(ID).attr("fill-opacity", 0.5); let perianthCol = d.colour.split("-")[0]; let corona = d.colour.split("-")[1]; makeCoronaGradient(svg, corona, "hover"); let gradient = "hover"; svg.selectAll(".corona").attr("fill", "url(#" + gradient + ")"); svg.selectAll(".perianth").attr("fill", colours[perianthCol]); }) .on("pointerleave", function(event, d) { svg.selectAll("rect").attr("fill-opacity", 1); svg.selectAll("linearGradient").remove(); svg.selectAll(".perianth").attr("fill", colours["W"]); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); //https://github.com/McTano/blazon-js/blob/9a4119a04922e11b47e751a7d28f7f459e31e6e1/src/svg/charges/flower/daffodil.svg let daff = svg.append("g") .html(` `); daff.attr("transform", "translate(500, -30)"); return svg.node(); }33:T425,md`The last comment on daffodils I want to make is that of their ploidy. The ploidy level of an organism tells us how many copies of the genome (that is - all the DNA in a cell) are present. In plants, it has been shown that ploidy level is very variable within and between species, especially compared to creatures like mammals - who have almost exlusively only two copies of their genome in every cell (i.e. they are diploid). In the IDR, comments about ploidy level are present in the descriptions - so we can extract these. I've done this rather crudely, but the overall pattern should remain true. We see spikes at 14, 21, and 28. From this, we can deduce that 14 is the diploid number of chromosomes, 21 is the triploid number of chromosomes, and 28 is the tetraploid number of chromosomes. A high spike at 28 (tetraploid), probably indicates that tetraploid cultivars have been selected, as it is a well known phenomenon that polyploid (higher ploidy) plants are taller, bigger, and more robust. These are desirable traits in the horticultural trade.`34:T4a3,makeCoronaGradient = function(g, colourString, id) { const grads = g .append("linearGradient") .attr("id", id) .attr("x1", `100%`) .attr("y1", `100%`) .attr("x2", `0%`) .attr("y2", `100%`); let colArr = colourString.split(""); // this is bloody lazy, should have made a loop if (colourString.length === 1) { grads .append("stop") .attr("offset", "0%") .attr("stop-color", colours[colArr[0]]); grads .append("stop") .attr("offset", "100%") .attr("stop-color", colours[colArr[0]]); } else if (colourString.length === 2) { grads .append("stop") .attr("offset", "0%") .attr("stop-color", colours[colArr[0]]); grads .append("stop") .attr("offset", "100%") .attr("stop-color", colours[colArr[1]]); } else if (colourString.length === 3) { grads .append("stop") .attr("offset", "0%") .attr("stop-color", colours[colArr[0]]); grads .append("stop") .attr("offset", "50%") .attr("stop-color", colours[colArr[1]]); grads .append("stop") .attr("offset", "100%") .attr("stop-color", colours[colArr[2]]); } }35:[{"id":"c919bfcc5924449fb05057d0c95413b53989f61ebc561cc497b73e83893e6ec40ee16e244d9eca053b53abac964d1fbe9ff6d8feca7cf8ca64e8caa5b91ec408","href":"https://static.observableusercontent.com/files/c919bfcc5924449fb05057d0c95413b53989f61ebc561cc497b73e83893e6ec40ee16e244d9eca053b53abac964d1fbe9ff6d8feca7cf8ca64e8caa5b91ec408","name":"refs.ref","type":"application/octet-stream","lastModified":1617524870716.085,"size":206},{"id":"812b0fd2a90d0b307f3eecbcbc71ada86cc0d30f86fdc1a080578c33122f384198fa108be94f28cc81e08501eb287c31782584116c1c4929fc4749678dc07b2a","href":"https://static.observableusercontent.com/files/812b0fd2a90d0b307f3eecbcbc71ada86cc0d30f86fdc1a080578c33122f384198fa108be94f28cc81e08501eb287c31782584116c1c4929fc4749678dc07b2a","name":"clean_daff_register@3.csv","type":"text/csv","lastModified":1617460026554.213,"size":3027032}] 2f:{"title":"Narcissus, or the Daffodil","cells":[{"id":0,"value":"md`# Narcissus, or the Daffodil`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"html`

“I wandered lonely as a cloud\nThat floats on high o'er vales and hills,\nWhen all at once I saw a crowd,\nA host, of golden daffodils;\nBeside the lake, beneath the trees,\nFluttering and dancing in the breeze.”\n

William Wordsworth
I Wandered Lonely as a Cloud

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`Let's start with colour, as that is a critical part of the love of daffodils. There are not so many colours a daffodil flower can be, and some colours are rare in daffodils. Rare colours include pinks and reds. Other colours such as blues and purples are absent. But what are the most common daffodil colours? Below is a plot of the colour part of the daffodil formula, arranged by most frequent colour combinations. Hover over the bars to change the colour of the daffodil!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"md`Sometimes as part of the formula, there will be two or more colours (e.g. YOO) - most often on the right side of the formula, which describes the corona. These tell us whether there are multiple colours present, and their ordering.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"md`The pattern here is probably a reflection of multiple underlying factors, both cultural and biological. For example, we expect daffodils to be mainly yellow. Therefore a proliferation of cultivars with this colour is not unusual. In addition, robustness, disease resistance, and flowering time length are highly desirable traits - and may be correlated with flower colour (but this is a guess). Lastly, cultivars with desirable mutations (flore pleno, split coronas), or crossability with wild species or other cultivars may be biased to certain daffodil cultivars.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"md`Luckily, the IDR provides in some cases the known parentage of a particular cultivar - and we can see which are the most common pollen parents:\n\n${mdTable3\n .replace(/{|}/g, \"\")\n .replace(/([A-z]{1}\\. [a-z]*)/g, x => \"\" + x + \"\")}\n\nAnd which are the most common seed parents in a cross:\n\n${mdTable4}\n\nSomething that immediately sticks out to me is that there are two wild daffodil species, Narcissus jonquilla and Narcissus cyclamineus, which have been used extensively to generate new cultivars. This reliance on wild species has made some wild daffodil species pretty scarce and vulnerable due to over-collecting. I'm not sure why seed parents don't have any wild species in the top five most common seed parents. My best guess is that growing seed on is easier with cultivars as they have been bred to reproduce efficiently and quickly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`Daffodils have been cultivated for hundreds of years - at least since the 16C. Pulling all of the information from the IDR, we can see at what time in history has been the busiest for cultivar generation. It appears very few cultivars from pre-1800 survive today, and almost all cultivars were created between 1930-1950. Today, comparatively few new cultivars appear to be created.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"dateChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#a1d99b\")\n .selectAll(\"rect\")\n .data(chartData2)\n .join(\"rect\")\n .attr(\"x\", d => xDate(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, xDate(d.x1) - xDate(d.x0) - 1))\n .attr(\"y\", d => yDate(d.length))\n .attr(\"height\", d => yDate(0) - yDate(d.length))\n .append(\"title\")\n .text(d => `${d.length} cultivars in ${d.x0.getUTCFullYear()}-${d.x1.getUTCFullYear()}`);\n\n svg.append(\"g\").call(xAxisDate);\n\n svg.append(\"g\").call(yAxisDate);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"ploidyChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#a1d99b\")\n .selectAll(\"rect\")\n .data(chartData3)\n .join(\"rect\")\n .attr(\"x\", d => xPloidy(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, xPloidy(d.x1) - xPloidy(d.x0) - 1))\n .attr(\"y\", d => yPloidy(d.length))\n .attr(\"height\", d => yPloidy(0) - yPloidy(d.length))\n .append(\"title\")\n .text(d => `${d.length} cultivars`);\n\n svg.append(\"g\").call(xAxisPloidy);\n\n svg.append(\"g\").call(yAxisPloidy);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"md`I had fun making this - any critiques/comments welcome. See how I scraped the data here and have a good day!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"html`

“ She turned to the sunlight\n And shook her yellow head,\nAnd whispered to her neighbor:\n \"Winter is dead.\" ”\n

A. A. Milne
When We Were Very Young

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`${createBib(parseRefer(refs))}\n\n[3] The International Daffodil Register, accessed 1-3/04/21`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`### Helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d.count)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, chartData.format))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"# Cultivars\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .tickFormat(i => chartData[i].colour)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width / 2 - margin.right)\n .attr(\"y\", 35)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Daffodil flower colours\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"x = d3.scaleBand()\n .domain(d3.range(chartData.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"xDate = d3.scaleTime()\n .domain(dateTimeExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"xAxisDate = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(xDate)\n .tickValues(\n thresholds.filter(function(value, index, Arr) {\n return index % 3 == 0;\n })\n ) // <-- aligns ticks with bins correctly\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width / 2 - margin.right)\n .attr(\"y\", 35)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Date in five-year bins\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"yDate = d3\n .scaleLinear()\n .domain([0, d3.max(chartData2, d => d.length)])\n // .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"yAxisDate = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yDate).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"# Cultivars\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"xPloidy = d3\n .scaleLinear()\n .domain([chartData3[0].x0, chartData3[chartData3.length - 1].x1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"yPloidy = d3\n .scaleLinear()\n .domain([0, d3.max(chartData3, d => d.length)])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"xAxisPloidy = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(xPloidy)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width / 2 - margin.right)\n .attr(\"y\", 35)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Chromosome numbers\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"yAxisPloidy = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yPloidy).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"# Cultivars\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`### Dimensions & margins`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"margin = ({ top: 30, right: 0, bottom: 40, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"chartData3 = {\n const bins = d3.bin().thresholds(60)(ploidy);\n return bins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"ploidy = daffData\n .map(d => d.description.split(\"2n=\"))\n .filter(d => d.length > 1)\n .map(d => +d[1].substr(0, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"dateTimeExtent = d3.extent(daffData, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"thresholds = d3.timeYear.every(5).range(...dateTimeExtent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"chartData2 = {\n const bins = d3\n .bin()\n .domain(dateTimeExtent)\n .thresholds(thresholds)\n .value(d => d.date)(daffData);\n return bins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"chartData = {\n const formulas = daffData.map(d => d.formula);\n const data = formulas.reduce((acc, curr) => {\n const foundObject = acc.find(e => e.colour === curr);\n if (foundObject) ++foundObject.count;\n else\n acc.push({\n colour: curr,\n count: 1\n });\n return acc;\n }, []);\n\n let data2 = data.sort((a, b) => d3.descending(a.count, b.count)).slice(0, 20);\n\n for (let i = 0; i < data2.length; i++) {\n data2[i].thisId = i;\n }\n return data2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// define the colours\ncolours = ({\n Y: \"#ffff00\",\n W: \"white\",\n O: \"#FFA500\",\n P: \"#FFB6C1\",\n R: \"#FF6347\",\n G: \"#a1d99b\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"mdTable4 = dataToMarkdown(seedParents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"seedParents = {\n const pollen = daffData.map(d => d.seed_parent);\n const data = pollen.reduce((acc, curr) => {\n const foundObject = acc.find(e => e[\"Seed Parent\"] === curr);\n if (foundObject) ++foundObject.Count;\n else\n acc.push({\n \"Seed Parent\": curr,\n Count: 1\n });\n return acc;\n }, []);\n\n let data2 = data\n .filter(d => d[\"Seed Parent\"] !== \"Sdlg\" && d[\"Seed Parent\"] !== \"\")\n .sort((a, b) => d3.descending(a.Count, b.Count))\n .slice(0, 5);\n\n return data2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"mdTable3 = dataToMarkdown(pollenParents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"pollenParents = {\n const pollen = daffData.map(d => d.pollen_parent);\n const data = pollen.reduce((acc, curr) => {\n const foundObject = acc.find(e => e[\"Pollen Parent\"] === curr);\n if (foundObject) ++foundObject.Count;\n else\n acc.push({\n \"Pollen Parent\": curr,\n Count: 1\n });\n return acc;\n }, []);\n\n let data2 = data\n .filter(d => d[\"Pollen Parent\"] !== \"\")\n .sort((a, b) => d3.descending(a.Count, b.Count))\n .slice(0, 5);\n\n return data2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"mdTable = dataToMarkdown(\n daffData\n .filter(d => !isNaN(d.date))\n .map(function(d) {\n return {\n \"Cultivar Name\": d.cultivar,\n Formula: \"D\" + d.division + \" \" + d.formula,\n Date: d.date.getUTCFullYear()\n };\n }).sort((a, b) => a.Date - b.Date).slice(0, 10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"daffData = data.map(function(d) {\n return {\n cultivar: d.cultivar,\n division: +d.division,\n perianth: d.perianth,\n corona: d.corona,\n formula: d.perianth + \"-\" + d.corona,\n orig_name: d.orig_name,\n date: new Date(d.datenew),\n seed_parent: d.seed_parent,\n pollen_parent: d.pollen_parent,\n description: d.description\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"data = FileAttachment(\"clean_daff_register@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"refs = FileAttachment(\"refs.ref\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"import { dataToMarkdown } from \"@john-guerra/csv-to-markdown-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"import {\n parseRefer,\n createBib\n} from \"@euphrasiologist/refer-database-to-javascript-object\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}