31:T1367,chart = { const zoom = d3 .zoom() .scaleExtent([0.5, 32]) .on("zoom", zoomed); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); // construct linear gradients from three vertexes const mkGradient = function(x1, x2, y1, y2, id, colour0, colour1) { const grads = svg .append("linearGradient") .attr("id", `grad${id + 1}`) .attr("x1", `${x1}`) .attr("y1", `${y1}`) .attr("x2", `${x2}`) .attr("y2", `${y2}`); grads .append("stop") .attr("offset", "0%") .attr("stop-color", colour0); grads .append("stop") .attr("offset", "100%") .attr("stop-color", colour1); }; // blue from top to bottom const grad1 = mkGradient(`0%`, `0%`, `100%`, `0%`, 0, "blue", "white"); // now from bottom to top // purple bottom left to top right const grad2 = mkGradient(`0%`, `100%`, `0%`, `100%`, 1, "purple", "white"); // now top left to bottom right // green bottom right to top left const grad3 = mkGradient(`100%`, `0%`, `0%`, `100%`, 2, "green", "white"); // now top right to bottom left // increase the brightness const mkFilter = function(id, slope) { const filt = svg.append("filter").attr("id", `filt${id + 1}`); const feComponentTransfer = filt.append("feComponentTransfer"); // add the feFuncR/B/G feComponentTransfer .append("feFuncR") .attr("type", "linear") .attr("slope", slope); feComponentTransfer .append("feFuncG") .attr("type", "linear") .attr("slope", slope); feComponentTransfer .append("feFuncB") .attr("type", "linear") .attr("slope", slope); }; const filt1 = mkFilter(0, 3); const hexOffsetX = 30; const hexOffsetY = 15; const hexG = svg.append("g"); hexG .append("g") .append("path") .attr("d", polygon(6).scale(hexSize)) .attr("fill", "url(#grad1)") .attr("filter", "url(#filt1)") .attr("opacity", "0.9") .attr("stroke", "black") .attr("transform", `translate(${width / 2},${height / 2})`); hexG .append("path") .attr("d", polygon(6).scale(hexSize)) .attr("fill", "url(#grad2)") .attr("filter", "url(#filt1)") .attr("opacity", "0.6") .attr("transform", `translate(${width / 2},${height / 2})`); hexG .append("path") .attr("d", polygon(6).scale(hexSize)) .attr("fill", "url(#grad3)") .attr("filter", "url(#filt1)") .attr("opacity", "0.3") .attr("stroke", "black") .attr("transform", `translate(${width / 2},${height / 2})`); // add vertex labels hexG .selectAll("text") .data(vertexLabels) .join("text") .attr("x", d => (d.lab === "Blue-green" ? d.x + 10 : d.x)) .attr("y", d => d.y) .attr("fill", "black") .text(d => d.lab) .attr("text-anchor", "middle") .attr("transform", `translate(${width / 2},${height / 2})`); const gDot = svg .append("g") .attr("fill", "none") .attr("stroke-linecap", "round"); gDot .selectAll("path") .data(data2) .join("path") .attr("d", d => `M${x(d.colHexX)},${y(d.colHexY)}h0`) .attr("stroke", "black") .on('mouseover', function(d, i) { tooltip .html( `

Family: ${d.family}

Species: ${d.genus + " " + d.species}

Bee colour: ${capitalizeFirstLetter( d.bee )}

Human colour: ${capitalizeFirstLetter( d.human )}

` ) .style('visibility', 'visible'); d3.select(this) .transition() .attr('stroke', hoverColor); }) .on('mousemove', function() { tooltip .style('top', d3.event.pageY + 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); }) .on('mouseout', function() { tooltip.html(``).style('visibility', 'hidden'); d3.select(this) .transition() .attr('stroke', "black"); }) .on("click", d => window.open(`https://en.wikipedia.org/wiki/${d.genus + "_" + d.species}`) ); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed() { const transform = d3.event.transform; const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); gDot.attr("transform", transform).attr("stroke-width", 6 / transform.k); hexG.attr("transform", transform); gx.call(xAxis, zx); gy.call(yAxis, zy); } return Object.assign(svg.node(), { reset() { svg .transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } }); }32:[{"id":"89b2bd6f2c2a06f7cddfe65faebd210b8104ff91cecf8daa6ff8af10eef0ab52d38626b077c6ed4cd9e69ff3baf8418eaf3c32b27103071a0ee03db6b9e90f13","href":"https://static.observableusercontent.com/files/89b2bd6f2c2a06f7cddfe65faebd210b8104ff91cecf8daa6ff8af10eef0ab52d38626b077c6ed4cd9e69ff3baf8418eaf3c32b27103071a0ee03db6b9e90f13","name":"FReD_all2.csv","type":"text/csv","lastModified":1597601166368.615,"size":776755}] 2f:{"title":"The flower colour spectra","cells":[{"id":0,"value":"md`# The flower colour spectra`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`The floral reflectance database (FReD) is an online catalogue of a variety of plant species with relation to the colour of their flowers [1]. One of the features it highlights is that bees percieve flower colour very differently to humans. In particular, they can detect wavelengths in the ultraviolet (UV) range, which is invisible to humans. It is noticeable that flower reflectance never approaches pure UV, green, or blue, as models predict that these pure colours are difficult for bees to identify under changing conditions [2].`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"md`Bees therefore, must have a very different view of the world to us. To name a few examples, we see buttercups as yellow; bees as green, we see white campions as, well, white; bees as blue-green, and we see some poppy species as red; bees as totally ultraviolet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`The diagram below shows some of the data extracted from the database (see here) on a colour hexagon. Each vertex is labelled as a colour (note purple is a proxy for UV colour...) with the flowers superposed on this. Hover to see which plant you are looking at, click to go to wikipedia to see the species, and zoom to explore the points in finer detail. If you get lost zooming and dragging, reset at any time!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"viewof reset = html`