2b:null 2c:["$","title",null,{"children":"AMIP to CMIP6 | wolfiex | Observable"}] 31:Tbd4,{ const height = 300; const maxRadius = 20; const margin = 100; const width = 600; // Replace with the desired width of the SVG element const xScale = d3 .scaleBand() .domain(dataset.map((d) => d.mip)) .range([margin, width - margin]); const yScale = d3 .scaleBand() .domain(dataset.map((d) => d.mip)) .range([Math.PI, -Math.PI / 4]); const radiusScale = d3 // .scaleSqrt() .scaleLinear() .domain([0, d3.max(newdata, (d) => d.val)]) .range([0, 1]); const colorScale = d3 .scaleOrdinal() .domain([...new Set(newdata.map((d) => d.kind))]) .range(colors); console.log(colorScale.domain()); const svg = d3 .create("svg") .attr("viewBox", [0, -height / 2, width, 1.5 * height]); const simulation = d3 .forceSimulation(newdata) .force( "x", d3 .forceX() .x((d, i) => xScale(d.mip) + i * 10 + Math.random()) .strength(100) ) .force( "y", d3 .forceY() .y(height / 2) .strength(0.1) ) .force( "collision", d3 .forceCollide() .radius((d) => maxRadius * radiusScale(d.val) ** 0.95 + 5) .strength(1) ) .force("charge", d3.forceManyBody().strength(-30).distanceMax(40)) .stop(); svg .selectAll("circle") .data(newdata) .join("circle") .attr("r", (d) => maxRadius * radiusScale(d.val) ** 0.6) .attr("cx", (d, i) => xScale(d.mip) + i * Math.random()) .attr( "cy", (d, i) => 0.1 * height + (Math.sin(yScale(d.mip)) * height) / 2 + (i + 1) * Math.random() ) .attr("fill", (d) => colorScale(d.kind)) .attr("fill-opacity", 0.4) .attr("stroke", (d) => colorScale(d.kind)); const circles = svg.selectAll("circle"); simulation.alpha(1).restart(); function adjustCollisions() { const padding = 2; circles.each((currentData, i, nodes) => { const currentCircle = nodes[i]; const x1 = +currentCircle.getAttribute("cx") + Math.random() * Math.random(); const y1 = +currentCircle.getAttribute("cy") + Math.random() * Math.random(); const r1 = +currentCircle.getAttribute("r") + Math.random(); for (let j = 0; j < i; j++) { const prevCircle = nodes[j]; const x2 = +prevCircle.getAttribute("cx"); const y2 = +prevCircle.getAttribute("cy"); const r2 = +prevCircle.getAttribute("r"); const dx = x1 - x2; const dy = y1 - y2; const distance = Math.sqrt(dx * dx + dy * dy); const minDistance = r1 + r2 + padding; if (distance < minDistance) { const moveX = (dx / distance) * (minDistance - distance); const moveY = (dy / distance) * (minDistance - distance); currentCircle.setAttribute("cx", x1 + moveX); currentCircle.setAttribute("cy", y1 + moveY); } } }); simulation.tick(); } setInterval(adjustCollisions, 1000 / 3); return svg.node(); }32:Td73,// { // const height = 300; // const maxRadius = 10; // const margin = 100; // const width = 600; // Replace with the desired width of the SVG element // const xScale = d3 // .scaleBand() // .domain(dataset.map((d) => d.mip)) // .range([margin, width - margin]); // const radiusScale = d3 // .scaleSqrt() // .domain([ // 0, // // d3.max(dataset.map((d) => d3.max(Object.values(d).map((e) => +e || 0)))) // d3.max(newdata.map((d) => d.val)) // ]) // .range([0, maxRadius]); // const colorScale = d3 // .scaleOrdinal() // .domain(new Set(newdata.map((d) => d.kind))) // .range(colors); //d3.schemeCategory10); // const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // const simulation = d3 // .forceSimulation(newdata) // .force( // "x", // d3 // .forceX() // .x((d, i) => i + xScale(d.mip)) // .strength(1) // ) // .force( // "y", // d3 // .forceY() // .y(height / 2) // .strength(1) // ) // .force( // "collision", // d3 // .forceCollide() // .radius((d) => radiusScale(d.val) + 2) // .strength(1) // ) // .force( // "charge", // d3 // .forceManyBody() // .strength(-3) // Repulsive force strength (adjust as needed) // .distanceMax(400) // Maximum distance over which the force is applied (optional) // ) // .stop(); // svg // .selectAll("circle") // .data(newdata) // .join("circle") // .attr("r", (d) => radiusScale(d.val)) // .attr("cx", (d, i) => xScale(d.mip) + i * Math.random()) // .attr("cy", (d) => height / 2 + 20 * Math.random()) // .attr("fill", (d) => colorScale(d.kind)) // .attr("fill-opacity", 0.4) // .attr("stroke", (d) => colorScale(d.kind)); // var node = d3.selectAll("circle"); // const circles = svg.selectAll("circle"); // simulation.alpha(10).restart(); // simulation.on("tick", () => { // node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); // }); // function adjustCollisions() { // const padding = 2; // Adjust the padding between circles as needed // circles.each((d, i, nodes) => { // const currentCircle = nodes[i]; // const x1 = currentCircle.getAttribute("cx"); // const y1 = currentCircle.getAttribute("cy"); // const r1 = +currentCircle.getAttribute("r"); // for (let j = 0; j < i; j++) { // const prevCircle = nodes[j]; // const x2 = prevCircle.getAttribute("cx"); // const y2 = prevCircle.getAttribute("cy"); // const r2 = +prevCircle.getAttribute("r"); // const dx = x1 - x2; // const dy = y1 - y2; // const distance = Math.sqrt(dx * dx + dy * dy); // const minDistance = r1 + r2 + padding; // if (distance < minDistance) { // // Adjust positions of overlapping circles // const moveX = (dx / distance) * (minDistance - distance); // const moveY = (dy / distance) * (minDistance - distance); // currentCircle.setAttribute("cx", +x1 + moveX); // currentCircle.setAttribute("cy", +y1 + moveY); // } // } // }); // // console.log("crash"); // } // setInterval(() => { // adjustCollisions(); // // simulation.tick(); // }, 1000 / 60); // return svg.node(); // }33:[] 2f:{"id":"d553bae285eace18","slug":null,"title":"AMIP to CMIP6","thumbnail":"fa984381ccc63242d45795fafb7aaa6da43592ca6cac557e54bbe2fa86adb2a8","access_level":"public","create_time":"$D2023-05-17T14:20:16.969Z","update_time":"$D2023-05-23T09:31:46.846Z","view_time":null,"first_public_time":"$D2023-05-17T14:20:16.969Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024"},"version":332,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null}],"members":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"AMIP to CMIP6","cells":[{"id":0,"value":"# AMIP to CMIP6\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"dataset = [\n {\n mip: \"AMIP1\",\n models: 29,\n experiments: 1,\n institutions: 28,\n countries: 9,\n forcings: 2\n },\n {\n mip: \"AMIP2\",\n models: 32,\n experiments: 1,\n institutions: 25,\n countries: 9,\n forcings: 2\n },\n {\n mip: \"CMIP1\",\n models: 20,\n experiments: 1,\n institutions: 16,\n countries: 8,\n forcings: 1\n },\n {\n mip: \"CMIP2\",\n models: 17,\n experiments: 2,\n institutions: 15,\n countries: 8,\n forcings: 1\n },\n {\n mip: \"CMIP3\",\n models: 24,\n experiments: 12,\n institutions: 16,\n countries: 11,\n forcings: 15\n },\n {\n mip: \"CMIP5\",\n models: 59,\n experiments: 34,\n institutions: 26,\n countries: 12,\n forcings: 24\n },\n {\n mip: \"CMIP6\",\n models: 131,\n experiments: 322,\n institutions: 49,\n countries: 26,\n forcings: 63\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"\n\n\n Colored Words Example\n \n\n\n

Colored Words Example

\n Here are the words in different colors:\n

\n models,\n experiments,\n institutions,\n countries,\n forcings.\n

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"colors = [\"#000546\", \"#f2b30d\", \"#a40e4C\", \"#0e0f0f\", \"#22bfb7\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"data = `mip,models,experiments,institutions,countries,Forcings\n AMIP1,29,1,28,9,2\n AMIP2,32,1,25,9,2\n CMIP1,20,1,16,8,1\n CMIP2,17,2,15,8,1\n CMIP3,24,12,16,11,15\n CMIP5,59,34,26,12,24\n CMIP6,131,322,49,26,63`\n .trim()\n .split(\"\\n\")\n .map((row) => row.split(\",\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"newdata = {\n var nd = [];\n dataset.forEach((d) => {\n Object.entries(d).forEach((e) => {\n if (e[0] != \"mip\") {\n nd.push({ mip: d.mip, kind: e[0], val: e[1] });\n }\n });\n });\n console.log(nd);\n return nd;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"{\n var nd = [];\n dataset.forEach((d) => {\n Object.entries(d).forEach((e) => {\n if (e[0] != \"mip\") {\n nd.push({ mip: d.mip, kind: e[0], val: e[1] });\n }\n });\n });\n console.log(nd);\n return nd;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"