2f:T1085,chart = { // Specify the chart’s dimensions. const width = 928; const height = width * 1.2; const cx = width * 0.5; // adjust as needed to fit const cy = height * 0.59; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 30; // Create a radial tree layout. The layout’s first dimension (x) // is the angle, while the second (y) is the radius. const tree = d3.tree() .size([Math.PI * rot, radius]) .separation((a, b) => (a.parent == b.parent ? 5 : 1.5) / a.depth); // Sort the tree and apply the layout. const root = tree(d3.hierarchy(btData) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); // Creates the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx, -cy, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); // Gradients let defs=svg.append("defs"); let gradient=defs.append("radialGradient") .attr("id","svgGradient1") .attr("x1","0%") .attr("x2","0%") .attr("y1","0%") .attr("y2","100%"); gradient.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#6B8B01") .attr("stop-opacity",1) gradient.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#8EB24C") .attr("stop-opacity",1) .attr("offset", "61%") gradient.append("stop") .attr("class","end") .attr("offset","100%") .attr("stop-color","#E6D091") .attr("stop-opacity",1); let gradient2=defs.append("radialGradient") .attr("id","svgGradient2") .attr("x1","0%") .attr("x2","0%") .attr("y1","0%") .attr("y2","100%"); gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#015630") .attr("stop-opacity",1) gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#11753D") .attr("stop-opacity",1) .attr("offset", "33.7%") gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#91B552") .attr("stop-opacity",1) .attr("offset", "95%") gradient2.append("stop") .attr("class","end") .attr("offset","100%") .attr("stop-color","#E3E2E8") .attr("stop-opacity",1); // // Append links. svg.append("g") .attr("fill", "none") .attr("stroke", "#91B552") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // Append nodes. svg.append("g") .selectAll() .data(root.descendants()) //.join("circle") .join("path") //.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) scale(${ radScale(d.data.WT) * 0.65 })`) //.attr("fill", d => { return colorScale(d.data.WT); }) .style("fill", d => d.data.WT > halfPoint ? "url(#svgGradient1)" : "url(#svgGradient2)") .attr("fill-opacity", d => opacityScale(d.data.WT)) .attr("stroke", "#FEFFDF") .attr("stroke-width", 0.3) .attr("d", petalPath) .attr("r", d => { return radScale(d.data.WT); }); return svg.node(); }30:Tc2a,chart2 = { // Specify the chart’s dimensions. const width = 928; const height = width * 1.2; const cx = width * 0.5; // adjust as needed to fit const cy = height * 0.59; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 30; // Create a radial tree layout. The layout’s first dimension (x) // is the angle, while the second (y) is the radius. const tree = d3.tree() .size([Math.PI * rot, radius]) .separation((a, b) => (a.parent == b.parent ? 5 : 1.5) / a.depth); // Sort the tree and apply the layout. const root = tree(d3.hierarchy(rData) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); // Creates the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx, -cy, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); // Gradients let defs=svg.append("defs"); let gradient=defs.append("linearGradient") .attr("id","svgGradient1") .attr("x1","0%") .attr("x2","0%") .attr("y1","0%") .attr("y2","100%"); gradient.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#6B8B01") .attr("stop-opacity",1) gradient.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#8EB24C") .attr("stop-opacity",1) .attr("offset", "61%") gradient.append("stop") .attr("class","end") .attr("offset","100%") .attr("stop-color","#E6D091") .attr("stop-opacity",1); let gradient2=defs.append("linearGradient") .attr("id","svgGradient2") .attr("x1","0%") .attr("x2","0%") .attr("y1","0%") .attr("y2","100%"); gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#015630") .attr("stop-opacity",1) gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#11753D") .attr("stop-opacity",1) .attr("offset", "33.7%") gradient2.append("stop") .attr("class","start") .attr("offset","0%") .attr("stop-color","#91B552") .attr("stop-opacity",1) .attr("offset", "95%") gradient2.append("stop") .attr("class","end") .attr("offset","100%") .attr("stop-color","#E3E2E8") .attr("stop-opacity",1); // Append links. svg.append("g") .attr("fill", "none") .attr("stroke", "#91B552") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); // Append nodes. svg.append("g") .selectAll() .data(root.descendants()) .join("circle") //.join("path") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .style("stroke", d => d.data.Weight > 50 ? "url(#svgGradient1)" : "url(#svgGradient2)") .attr("stroke-width", 3) .attr("fill", "None") .attr("r", d => radScale2(d.data.Weight)) return svg.node(); }31:[{"id":"02fb3200f99cb4637b0c20a3b3aa7d079fbc4fe1f8a094a5a7be31d3035ca26be262ae3ebdf45beb5239e1ccbe823bda86cc61322f7bd803e56e657d6dec1d73","href":"https://static.observableusercontent.com/files/02fb3200f99cb4637b0c20a3b3aa7d079fbc4fe1f8a094a5a7be31d3035ca26be262ae3ebdf45beb5239e1ccbe823bda86cc61322f7bd803e56e657d6dec1d73","name":"hormone-expression@3.csv","type":"text/csv","lastModified":1690385238122.568,"size":6523},{"id":"b21fa39ea64ae7f6bdf0e992caf6b2f24d0c76f4fae5e1d80aae433147f29991763dea3b0e97c5c5a589fcd84a6ea95769c641adc4051259006236d25615031c","href":"https://static.observableusercontent.com/files/b21fa39ea64ae7f6bdf0e992caf6b2f24d0c76f4fae5e1d80aae433147f29991763dea3b0e97c5c5a589fcd84a6ea95769c641adc4051259006236d25615031c","name":"root-shoot-weight.csv","type":"text/csv","lastModified":1690433052481.969,"size":394}] 2d:{"title":"nature-viz-draft","cells":[{"id":0,"value":"# nature-viz-draft\n\n- change path\n- add color\n- make radius randomised\n- create root to shoot","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"Legend(d3.scaleSequential(lDomain, d3.interpolateViridis), {\n title: \"Temperature (°F)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof n = Inputs.range([0.1, 10], {step: 0.5, label: \"Radius number\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof rot = Inputs.range([0.1, 2], {step: 0.1, label: \"Rotation number\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"petalPath = 'M 0,0 C -40,-10 -20,-40 0,-50 C 20,-40 40,-10 0,0';","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"data = d3.json('https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json').then(data => _.values(data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"colorScale = d3.scaleSequential(lDomain, d3.interpolateYlGn)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"opacityScale = d3.scalePow(lDomain, opacityRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"opacityRange = [0.3, 0.7]","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"radScale = d3.scalePow().domain(lDomain).range(radRange);","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"radScale2 = d3.scalePow().domain(lDomain).range(radRange);","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"radRange = [n/3, n/1.5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"halfPoint = (lDomain[0] + lDomain[1])/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"wDomain = d3.extent(botData.map(row => row.Weight));","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"lDomain = d3.extent(topData.map(row => row.WT));","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"btData = buildData(topData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function buildData (data) {\n let obj = {name: \"flare\", children: []}\n\n for (let i in mainKeys) {\n let mk = mainKeys[i];\n let mobj = {name: mk, children: []};\n let rows = data.filter(row => row.Maintype === mk);\n for (let j in subKeys) {\n let sk = subKeys[j]\n let subrows = rows.filter(row => row.Subtype === sk);\n \n if (sk === \"na\") {\n mobj.children = subrows;\n } else {\n let sobj = {name: sk, children: []};\n if (subrows.length > 0) {\n sobj.children = subrows;\n mobj.children.push(sobj);\n }\n }\n }\n obj.children.push(mobj);\n // sobj.children = rows;\n // obj.children.push(sobj);\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"rData = buildData2(botData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"function buildData2 (data) {\n let obj = {name: \"flare\", children: []}\n\n for (let i in wKeys) {\n let mk = wKeys[i];\n let mobj = {name: mk, children: []};\n let rows = data.filter(row => row.Type === mk);\n console.log('!!!!!!', rows);\n for (let j in pKeys) {\n let sk = pKeys[j]\n let subrows = rows.filter(row => row.Part === sk);\n \n if (sk === \"na\") {\n mobj.children = subrows;\n } else {\n let sobj = {name: sk, children: []};\n if (subrows.length > 0) {\n sobj.children = subrows;\n mobj.children.push(sobj);\n }\n }\n }\n obj.children.push(mobj);\n // sobj.children = rows;\n // obj.children.push(sobj);\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"topKeys = [...new Set(topData.map(row => row[\"Genotype\"]))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"mainKeys = [...new Set(topData.map(row => row[\"Maintype\"]))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"subKeys = [...new Set(topData.map(row => row[\"Subtype\"]))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"wKeys = [\"WT\", \"EL-KD#10\", \"EL-OE#16\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"lKeys = [1, 2, 3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"pKeys = [\"Root\", \"Shoot\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topData = FileAttachment(\"hormone-expression@3.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"botData = FileAttachment(\"root-shoot-weight.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}