43:["$","title",null,{"children":"Intro to D3.js 🥣 Animation and Interactivity | Kie Ichikawa | Observable"}] 4b:T425,

- Fields in the dataset: - Name: Name of cereal - mfr: Manufacturer of cereal - A = American Home Food Products; - G = General Mills - K = Kelloggs - N = Nabisco - P = Post - Q = Quaker Oats - R = Ralston Purina - type: - cold - hot - calories: calories per serving - protein: ~~grams~~ milligrams of protein - fat: ~~grams~~ milligrams of fat - sodium: milligrams of sodium - fiber: ~~grams~~ milligrams of dietary fiber - carbo: ~~grams~~ milligrams of complex carbohydrates - sugars: ~~grams~~ milligrams of sugars - potass: milligrams of potassium - vitamins: vitamins and minerals - 0, 25, or 100, indicating the typical percentage of FDA recommended - shelf: display shelf (1, 2, or 3, counting from the floor) - weight: weight in ounces of one serving - cups: number of cups in one serving - rating: a rating of the cereals (Possibly from Consumer Reports?)

---4c:T678,scatterplot = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightSp]); svg .append("text") .attr("y", margin.top) .attr("x", width - marginSp.right * 4) .attr("text-anchor", "end") .attr("fill", "currentColor") .attr("id", "cerealInformation") .style("font-family", "sans-serif") .style("font-size", "13px") .text("Hover on a circle!"); svg .selectAll(".cerealCircles") .data(cereals) .enter() .append("circle") // .transition() // .ease(d3.easeElasticOut) .attr("cx", (d) => parseFloat(xSpScale(d[xRadio]))) .attr("cy", (d) => parseFloat(ySpScale(d[yRadio]))) .attr("fill", (d) => d3.interpolateYlOrRd(colorScale(d.calories))) .attr("r", (d) => parseFloat(radScale(d.rating))) .attr("opacity", 1) .attr("stroke", "currentColor") .attr("stroke-width", "0") .attr("class", "cerealCircles") .on("mouseover", function (event, d) { d3.select(this).raise().transition().attr("stroke-width", "2"); d3.select("#cerealInformation").text(d.name + " | " + setMfr(d.mfr)); }) .on("mouseout", function (d) { d3.select(this).transition().attr("stroke-width", "0"); d3.select("#cerealInformation").text("Hover on a circle!"); }); svg .append("g") .attr("transform", `translate(0,${heightSp - margin.bottom})`) .attr("class", "xAxis") .call(d3.axisBottom(xSpScale).tickSizeOuter(0)); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "yAxis") .call(d3.axisLeft(ySpScale)) .call((g) => g.select(".domain").remove()); return svg.node(); }4d:T1187,transitions = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightSp]); svg .append("text") .attr("y", margin.top) .attr("x", width - marginSp.right * 4) .attr("text-anchor", "end") .attr("fill", "currentColor") .attr("id", "cerealText") .style("font-family", "sans-serif") .style("font-size", "12px") .text("Hover on a circle!"); svg .selectAll(".cerealCircles") .data(cereals) .enter() .append("circle") .attr("cx", (d) => parseFloat(defaultxScale(d.sodium))) .attr("cy", (d) => parseFloat(defaultyScale(d.potass))) .attr("fill", (d) => d3.interpolateYlOrRd(colorScale(d.calories))) .attr("r", (d) => parseFloat(radScale(d.rating))) .attr("opacity", 1) .attr("stroke", "currentColor") .attr("stroke-width", "0") .attr("class", "cerealCircles") .on("mouseover", function (event, d) { d3.select(this).raise().transition().attr("stroke-width", "2"); d3.select("#cerealText").text(d.name + " | " + setMfr(d.mfr)); }) .on("mouseout", function (d) { d3.select(this).transition().attr("stroke-width", "0"); d3.select("#cerealText").text("Hover on a circle!"); }); svg .append("g") .attr("transform", `translate(0,${heightSp - margin.bottom})`) .attr("class", "xAxis") .call(d3.axisBottom(defaultxScale).tickSizeOuter(0)); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "yAxis") .call(d3.axisLeft(defaultyScale)) .call((g) => g.select(".domain").remove()); //X-Axis-------------------------------------------------------------------------- svg .append("text") .attr("y", marginSp.top / 2) .attr("x", margin.left * 2) .attr("fill", "currentColor") .style("font-family", "sans-serif") .style("font-size", "11px") .text("X-Axis:"); svg .selectAll(".xMenu") .data(xMenuSet) .enter() .append("text") .attr("y", (d, i) => ((i + 1) / (xMenuSet.length + 1)) * marginSp.top) .attr("x", marginSp.left * 3) .attr("fill", "currentColor") .attr("stroke", "currentColor") .attr("stroke-width", 0) .style("font-family", "sans-serif") .style("font-size", "11px") .attr("class", "xMenu") .attr("id", (d) => d.value) .text((d) => d.name) .on("click", function (event, xC) { d3.selectAll(".xMenu").attr("stroke-width", 0); d3.select(this).attr("stroke-width", 1); let cerealScale = d3 .scaleLinear() .domain(d3.extent(cereals, (d) => parseFloat(d[xC.value]))) .range([marginSp.left, width - marginSp.right]); d3.selectAll(".cerealCircles") .transition() .ease(d3.easeElasticOut) .duration(1000) .attr("cx", (d) => cerealScale(parseFloat(d[xC.value]))); svg .selectAll(".xAxis") .attr("transform", `translate(0,${heightSp - margin.bottom})`) .call(d3.axisBottom(cerealScale).tickSizeOuter(0)); }); //Y-Axis-------------------------------------------------------------------------- svg .append("text") .attr("y", marginSp.top / 2) .attr("x", margin.left * 5) .attr("fill", "currentColor") .style("font-family", "sans-serif") .style("font-size", "11px") .text("Y-Axis:"); svg .selectAll(".yMenu") .data(yMenuSet) .enter() .append("text") .attr("y", (d, i) => ((i + 1) / (yMenuSet.length + 1)) * marginSp.top) .attr("x", marginSp.left * 6) .attr("fill", "currentColor") .style("font-family", "sans-serif") .style("font-size", "11px") .attr("stroke", "currentColor") .attr("stroke-width", 0) .attr("class", "yMenu") .attr("id", (d) => d.value) .text((d) => d.name) .on("click", function (event, yC) { d3.selectAll(".yMenu").attr("stroke-width", 0); d3.select(this).attr("stroke-width", 1); let cerealScale = d3 .scaleLinear() .domain(d3.extent(cereals, (d) => parseFloat(d[yC.value]))) .range([heightSp - margin.bottom, margin.top]); d3.selectAll(".cerealCircles") .transition() .ease(d3.easeElasticOut) .duration(1000) .attr("cy", (d) => cerealScale(parseFloat(d[yC.value]))); svg .selectAll(".yAxis") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(cerealScale)) .call((g) => g.select(".domain").remove()); }); return svg.node(); }4e:T671,html`

thank you!

`4f:[] 47:{"id":"92267fe56b2f264d","slug":"intro-to-d3-js-animation-and-interactivity","title":"Intro to D3.js 🥣 Animation and Interactivity","thumbnail":"a1295c1e029344a1e7182bdc59bce98e66ec28c975270fa0a9a5a5b5f5169557","access_level":"public","create_time":"$D2020-09-30T13:46:50.293Z","update_time":"$D2021-07-16T12:45:38.310Z","view_time":null,"first_public_time":"$D2020-09-30T13:55:33.046Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1727,"publish_version":1727,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"010a514e167ce9e2","slug":"intro-to-d3-js","title":"Intro to D3.js","owner":{"id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa"}},"type":"notebook","body":{"titling":"auto","title":"Intro to D3.js 🥣 Animation and Interactivity","cells":[{"id":640,"value":"# Intro to D3.js 🥣 Animation and Interactivity\n## Handling Events, Motion, and Dynamism in Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"

\n- Data: [Nutrition data on 80 cereal products](https://www.kaggle.com/crawford/80-cereals)\n- Reference:\n - [Sortable Bar Chart](https://observablehq.com/@d3/sortable-bar-chart) \n - [ID IIT Fall 2020 Data Visualization Workshop](https://observablehq.com/collection/@zachpino/id-iit-fall-2020-data-visualization-workshop)\n - [D3 6.0 migration guide](https://observablehq.com/@d3/d3v6-migration-guide)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"## Exploring the Dataset\n### *Sortable Bar Chart*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof cerealNames = Inputs.select([null].concat(cerealNamesList), {\n label: \"Cereals\",\n value: \"100% Bran\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const bar = svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"x\", (d) => x(d.name))\n .attr(\"y\", (d) => y(d.value))\n .attr(\"height\", (d) => y(0) - y(d.value))\n .attr(\"fill\", (d) => d3.interpolateCubehelixDefault(color(d.name)))\n .attr(\"width\", x.bandwidth());\n\n const gx = svg.append(\"g\").call(xAxis);\n\n const gy = svg.append(\"g\").call(yAxis);\n\n return Object.assign(svg.node());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"color = d3\n .scaleBand()\n .domain(data.map((d) => d.name))\n .range([1, 0.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"x = d3\n .scaleBand()\n .domain(data.map((d) => d.name))\n .range([margin.left, width - margin.right])\n .padding(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"data = {\n let data = [];\n\n for (let i = 3; i < 10; i++) {\n data.push({\n name: keys[i],\n value: Object.values(vizCereals[0])[i]\n });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"keys = Object.keys(vizCereals[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1643,"value":"cerealNamesList = cereals.map((d) => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"vizCereals = {\n return _.map(cereals, (d, i) => {\n return {\n name: d.name,\n mfr: d.mfr,\n type: d.type,\n protein: d.protein * 1000,\n fat: d.fat * 1000,\n sodium: +d.sodium,\n fiber: d.fiber * 1000,\n carbo: d.carbo * 1000,\n sugars: d.sugars * 1000,\n potass: +d.potass,\n vitamins: d.vitamins,\n shelf: d.shelf,\n weight: d.weight,\n cups: d.cups,\n rating: d.rating\n };\n }).filter((d) => d.name == cerealNames);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"cereals","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"margin = ({top: 20, right: 0, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"## Creating the animated interactive visualization\nThe visualization is a scatterplot of cereals, with the y-axis user-selectable for good nutrients: fiber, potassium, and protein. The x-axis is user-selectable for not great stuff: sugars, sodium, and fat. The circles are colored by the calories. The sizes are defined by the cereal ratings.\n\n### *Scatterplot without transitions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"legend({\n color: d3.scaleSequential([50, 160], d3.interpolateYlOrRd),\n title: \"Calories per serving\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"{\n const svg = d3\n .select(DOM.svg())\n .attr(\"height\", 35)\n .attr(\"width\", 180 + tickSize);\n\n // Call it on a g element\n svg.append(\"g\").call(clegend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"viewof xRadio = Inputs.radio(\n new Map([\n [\"Sugar\", \"sugars\"],\n [\"Sodium\", \"sodium\"],\n [\"Fat\", \"fat\"]\n ]),\n { value: \"sodium\", label: \"X-Axis\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"viewof yRadio = Inputs.radio(\n new Map([\n [\"Fiber\", \"fiber\"],\n [\"Potassium\", \"potass\"],\n [\"Protein\", \"protein\"]\n ]),\n { value: \"potass\", label: \"Y-Axis\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"xSpScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d[xRadio])))\n .range([marginSp.left, width - marginSp.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"ySpScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d[yRadio])))\n .range([heightSp - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"### *Scatterplot with transitions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"legend({\n color: d3.scaleSequential([50, 160], d3.interpolateYlOrRd),\n title: \"Calories per serving\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"{\n const svg = d3\n .select(DOM.svg())\n .attr(\"height\", 35)\n .attr(\"width\", 180 + tickSize);\n\n // Call it on a g element\n svg.append(\"g\").call(clegend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"d3.extent(cereals, (d) => parseFloat(d.rating))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"radScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d.rating)))\n .range([4, 12])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"d3.extent(cereals, (d) => parseFloat(d.calories))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"colorScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d.calories)))\n .range([0, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"defaultxScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d.sodium)))\n .range([marginSp.left, width - marginSp.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"defaultyScale = d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d.potass)))\n .range([heightSp - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"setMfr = (mfr) => {\n let fullMfr;\n if (mfr == \"A\") {\n fullMfr = \"American Home Food Products\";\n } else if (mfr == \"G\") {\n fullMfr = \"General Mills\";\n } else if (mfr == \"K\") {\n fullMfr = \"Kelloggs\";\n } else if (mfr == \"N\") {\n fullMfr = \"Nabisco\";\n } else if (mfr == \"P\") {\n fullMfr = \"Post\";\n } else if (mfr == \"Q\") {\n fullMfr = \"Quaker Oats\";\n } else if (mfr == \"R\") {\n fullMfr = \"Ralston Purina\";\n }\n return fullMfr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"xMenuSet = [\n { name: \"Sugar\", value: \"sugars\" },\n { name: \"Sodium\", value: \"sodium\" },\n { name: \"Fat\", value: \"fat\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"yMenuSet = [\n { name: \"Fiber\", value: \"fiber\" },\n { name: \"Potassium\", value: \"potass\" },\n { name: \"Protein\", value: \"protein\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"heightSp = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"marginSp = ({ top: 75, right: 20, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"// Create a legend generator like so:\nclegend = legendCircle()\n .scale(\n d3\n .scaleLinear()\n .domain(d3.extent(cereals, (d) => parseFloat(d.rating)))\n .range([4, 12])\n )\n .tickValues([\n // d3.min(cereals, (d) => parseFloat(d.rating)),\n d3.median(cereals, (d) => parseFloat(d.rating)),\n d3.max(cereals, (d) => parseFloat(d.rating))\n ])\n .tickFormat((d, i, e) => (i === e.length - 1 ? d + \" rating\" : d))\n .tickSize(tickSize) // defaults to 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"viewof tickSize = slider({\n title: \"Tick size\",\n value: 15,\n min: 0,\n max: 100,\n step: 1,\n description: \"What happens when you adjust this?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"import { legendCircle } from \"@harrystevens/circle-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {cereals} from '@zachpino/week-5-animation-and-interactivity'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null