2f:Tccb,chart = { const root = partition(dinoHierarchy); root.each(d => d.current = d); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, width]) .style("font", "10px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width / 2},${width / 2})`); const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.7 : 0.4 ) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name); const parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = g.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }30:[{"id":"62b0ecdc710d5eb7112f069e46daf6cefc469de670c0af63136d5c5eb063b9864be1c19fd93dc08f799bd37e9619ceda23f0600329c3c050b816cad077977bf7","href":"https://static.observableusercontent.com/files/62b0ecdc710d5eb7112f069e46daf6cefc469de670c0af63136d5c5eb063b9864be1c19fd93dc08f799bd37e9619ceda23f0600329c3c050b816cad077977bf7","name":"data.csv","type":"text/csv","lastModified":1681491584154.502,"size":91737},{"id":"96fe47bedff85980b48f00a3196d73aff62bc165fe241c5b26a6746f8abebb5d77c99fc03f9972cff9efe13ea91587a5df49550f06e6f1897ba5ad1bae33d1fd","href":"https://static.observableusercontent.com/files/96fe47bedff85980b48f00a3196d73aff62bc165fe241c5b26a6746f8abebb5d77c99fc03f9972cff9efe13ea91587a5df49550f06e6f1897ba5ad1bae33d1fd","name":"Frame 6.png","type":"image/png","lastModified":1681491584154.502,"size":875642},{"id":"5e8c168a2b71a6cce23c7f5833c9dcce1ccaaccd565c28f9a01e6cdf593320b3a500059f52263c3448980bcf46e6931e2c76c3b1a068b583d44f32db122c231d","href":"https://static.observableusercontent.com/files/5e8c168a2b71a6cce23c7f5833c9dcce1ccaaccd565c28f9a01e6cdf593320b3a500059f52263c3448980bcf46e6931e2c76c3b1a068b583d44f32db122c231d","name":"Frame 10.png","type":"image/png","lastModified":1681491584154.502,"size":423473},{"id":"28b930b26dd02e254d168e1de35528d2c6b62b6f2660add8878aa00907fef0b34115370ef399d7cedbddab4072c85054b975e395345d56d38e76f03ec321ea53","href":"https://static.observableusercontent.com/files/28b930b26dd02e254d168e1de35528d2c6b62b6f2660add8878aa00907fef0b34115370ef399d7cedbddab4072c85054b975e395345d56d38e76f03ec321ea53","name":"Frame 11.png","type":"image/png","lastModified":1681491584154.502,"size":469363},{"id":"0ebabfcc0fe825f8a0e350707ae21a8cc94d31848f1be34b6cff0d92a3ad8d79ef1179537f72f91529164e604a305f9f77298ad6f2a0c26ab347502dfb968264","href":"https://static.observableusercontent.com/files/0ebabfcc0fe825f8a0e350707ae21a8cc94d31848f1be34b6cff0d92a3ad8d79ef1179537f72f91529164e604a305f9f77298ad6f2a0c26ab347502dfb968264","name":"Frame 8.png","type":"image/png","lastModified":1681491584154.502,"size":387038},{"id":"0c9fe9d2584db966f57e5bc04a57133cd2831c6195a0f95134ed373ae8fcfecb139a3d45c33f702bcdd1b9c187d95e957ee19d5a21aca377ab59247b645a1aec","href":"https://static.observableusercontent.com/files/0c9fe9d2584db966f57e5bc04a57133cd2831c6195a0f95134ed373ae8fcfecb139a3d45c33f702bcdd1b9c187d95e957ee19d5a21aca377ab59247b645a1aec","name":"Frame 9.png","type":"image/png","lastModified":1681491584154.502,"size":523670}] 2d:{"title":"Dinosaurs ","cells":[{"id":0,"value":"# Dinosaurs ","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"

This Tyrannosaurus Rex (artists rendering) was a carnivore, living in the Late Cretaceous period in the area now known as the USA. \n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"
Did you know: The word dinosaur comes from the Greek language and means ‘terrible lizard’. The Greek words dienos (“terrible”) and sauros (“reptile”). They were called this because of their huge size, not because they were particularly terrible!
","pinned":false,"hidden":false,"mode":"html"},{"id":210,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":107,"value":"dino_Chart = Plot.plot({\n marginTop: 0,\n marginLeft: 150,\n marginRight: 50,\n marginBottom: 40,\n insetTop: 8,\n width: 950,\n height: 150,\nx: {\n grid: true,\n label: \"Number of dinosaurs\"\n },\n y: {\n label: \"Dinosaur diet\"\n },\n marks: [\n Plot.auto(dinosaurs, {x: {value: \"name\", reduce: \"count\"}, y: \"diet\", color: \"#ffc850\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":52,"value":"
\n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"
This Stegosaurus (artists rendering) was an herbivore, living in the Late Cretaceous period in the area now known as the USA. \n

","pinned":false,"hidden":false,"mode":"html"},{"id":56,"value":"
Did you know: Although they’re known for being massive monsters, many dinosaurs were actually smaller than a turkey and most scientists believe that the average dinosaur was the size of a small car.
","pinned":false,"hidden":false,"mode":"html"},{"id":333,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":306,"value":"viewof range = Inputs.range([3, 33], {label: \"Top n countries\", step: 1, value: 33})","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"addTooltips\n(\nPlot.plot({\n style: {fontFamily: \"Londrina Solid\"},\n marks: [\n Plot.barX(dinosaurs, Plot.groupY({x: \"count\"}, {y: \"lived_in\", fill: \"diet\", title: (d) =>\n `${d.diet} \\n country: ${d.lived_in}`, sort: {y: \"x\", reverse: true, limit: range}})),\n Plot.ruleX([0])\n ],\n marginLeft: 150,\n x: {label: \"Count\"},\n y: {label: \"Country\"},\n color: {legend: true, range: dino_Colors}\n}),\n { fill: \"none\", opacity: 1, \"stroke-width\": \"2px\", stroke: \"#7A1D45\" }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":325,"value":"
\n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":327,"value":"
This Parasaurolophus (artists rendering) was a herbivore that walked both as a biped and as a quadruped.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":329,"value":"
Did you know: It has recently been discovered that some dinosaurs even had feathers, specifically a group of dinosaurs known as theropods (“beast footed”). So, you never know. That pigeon you see on the pavement could have evolved from a dinosaur!
","pinned":false,"hidden":false,"mode":"html"},{"id":339,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":408,"value":"Credit: Code for the chart below is from Mike Bostock's [Zoomable Sunburst](https://observablehq.com/@d3/zoomable-sunburst) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":352,"value":"
\n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":354,"value":"
This Triceratops (artists rendering) first appeared during the late Maastrichtian stage of the Late Cretaceous period, about 68 million years ago in what is now North America.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":356,"value":"
Did you know: Dinosaurs were huge and all ranged in different sizes. It is believed that the Argentinosaurus weighed up to 100 tonnes which is the same as around 15 elephants! The Argentinosaurus’ poo was the equivalent of 26 pints. Yuck! 💩
","pinned":false,"hidden":false,"mode":"html"},{"id":348,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":491,"value":"Plot.plot({\n style: {fontFamily: \"Londrina Solid\"},\n marks: [\n Plot.barX(dinosaurs2, {x: \"length\", y: \"diet\", fill: \"#d2c700\", sort: {y: \"x\", reverse: true }}),\n Plot.ruleX([0])\n ],\n marginLeft: 150,\n x: {label: \"Dinosaur length\"},\n y: {label: \"Dinosaur name\"}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":364,"value":"
\n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":366,"value":"
This Spinosaurus (artists rendering) which was longer and heavier than Tyrannosaurus, is the largest known carnivorous dinosaur.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":368,"value":"
Did you know: The Micropachycephalosaurus was found in China and is the longest dinosaur name there is.
","pinned":false,"hidden":false,"mode":"html"},{"id":362,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":281,"value":"{\n const div = d3.create('div')\n .style('display', 'flex')\n div.selectAll('div')\n .data(dino_Colors)\n .join('div')\n .style('width', 'auto')\n .style('padding', '5px')\n .style('margin', '2px')\n .style('border-radius', '2px')\n .style('background-color', d => d)\n .text(d => d).node()\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"dino_Colors=[\"#7A1D45\", \"#E5DBD0\", \"#D2C700\", \"#BAE7E4\", \"#FE4E30\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"dinosaurs = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"style1 = {\n yield html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"fontName = \"Londrina Solid\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"dinoHierarchy = {\n const group = (data, [name, ...path]) => d3.groups(data, d => d[name])\n .map(([value, rows]) => {\n const returnObject = {};\n returnObject[\"name\"] = value; // Add in to also include property: name + ': ' + \n if(path.length) {\n returnObject[\"children\"] = group(rows, path);\n } else {\n returnObject[\"value\"] = rows.length \n }\n return returnObject\n \n });\n \n return {name: \"dinoData\", children: group(dinosaurs, [\"diet\", \"type\", \"lived_in\", \"name\"]) }; // Update variables for children\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"partition = data => {\n const root = d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value);\n return d3.partition()\n .size([2 * Math.PI, root.height + 1])\n (root);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"color = d3.scaleOrdinal([\"#7A1D45\", \"#E5DBD0\", \"#D2C700\", \"#BAE7E4\", \"#FE4E30\"]) // Update array here with new colors","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"radius = width / 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"arc = d3.arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n .padRadius(radius * 1.5)\n .innerRadius(d => d.y0 * radius)\n .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"dinosaurs2","pinned":true,"hidden":true,"mode":"ojs"},{"id":460,"value":"dinosaurs2 = dinosaurs.map(d => ({...d, length: +d.length.substring(0, d.length.length-1)}))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}