3e:null 3f:["$","title",null,{"children":"Introduction to D3 Course: Lesson 3 | Kallol Chatterjee | Observable"}] 45:T59d,chart = { const width = 900; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; const margin = { top: 10, bottom: 30, left: 10, right: 10 }; const x = d3 .scaleUtc() .domain(d3.extent(appleStockData, (d) => d.Date)) .nice() .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(appleStockData, (d) => d.Close)) .nice() .range([height, 0]); const line = d3 .line() .curve(d3.curveBasis) .x((d) => x(d.Date)) .y((d) => y(d.Close)); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 80)); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(appleStockData) .join("circle") .attr("cx", (d) => x(d.Date)) .attr("cy", (d) => y(d.Close)) .attr("r", 2); g.append("g") .append("path") .datum(appleStockData) .attr("d", line) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 1.5); return svg.node(); }46:T5ac,{ const width = 900; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; const x = d3 .scaleUtc() .domain(d3.extent(appleStockData, (d) => d.Date)) .nice() .range([0, width]); const bandScale = d3 .scaleBand() .domain(Array.from(new Set(appleStockData.map((d) => d.Date)))) .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(appleStockData, (d) => d.Close)) .nice() .range([height, 0]); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 80)); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(appleStockData) .join("rect") .attr("x", (d) => x(d.Date)) .attr("y", (d) => y(d.Close)) .attr("width", bandScale.bandwidth()) .style("opacity", 0.5) .attr("height", (d) => height - y(d.Close)); g.append("g") .attr("fill", "#000") .selectAll("circle") .data(appleStockData) .join("circle") .attr("cx", (d) => x(d.Date)) .attr("cy", (d) => y(d.Close)) .attr("r", 2); return svg.node(); }47:T5ee,{ const width = 900; const height = 700; const marginTop = 20; const marginRight = 20; const marginBottom = 20; const marginLeft = 20; const x = d3 .scaleUtc() .domain(d3.extent(appleStockData, (d) => d.Date)) .nice() .range([0, width]); const bandScale = d3 .scaleBand() .domain(Array.from(new Set(appleStockData.map((d) => d.Date)))) .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(appleStockData, (d) => d.Close)) .nice() .range([height, 0]); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft+10}, ${marginTop})`); g.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(appleStockData) .join("rect") .attr("x", (d) => x(d.Date)) .attr("y", (d) => y(d.Close)) .attr("width", bandScale.bandwidth()) .style("opacity", 0.5) .attr("height", (d) => height - y(d.Close)); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("fill", "Blue") .attr("stroke", "steelBLue") .selectAll("circle") .data(appleStockData) .join("circle") .attr("cx", (d) => x(d.Date)) .attr("cy", (d) => y(d.Close)) .attr("r", 3); g.attr(d3.tooltip); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 50)); return svg.node(); }48:T443,testYourKnowledge([ { title: 'SVG Paths', backText: [`SVG Paths have their own mini-language for generating custom shapes. They use commands like M and L that mean "MoveTo" and "LineTo" respectively`, `There are many different commands for generating complex shapes.`], question: "SVG Paths have their own mini-language for generating custom shapes.", answer: true }, { title: 'Line Charts', backText: [`d3.line() is a function for creating the SVG Path attributes, given a dataset`, `You can style your line by supplying an optional curve factory.`], question: 'd3.line() is a function for styling line charts, like adding their stroke color.', answer: false }, { title: 'Stack Layouts', backText: [`The D3 stack function calculates the cumulative total of values across a set of keys.`, `While these value can be used for computing the layout, the function itself does not calculate out the positioning of elements.`], question: `Stack layouts compute the layout of all the rectangles in a stacked bar chart.`, answer: false }, ], 300, 300)49:[{"id":"3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","href":"https://static.observableusercontent.com/files/3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","name":"us-population-state-age.csv","type":"text/csv","lastModified":1695841129166.212,"size":3516}] 43:{"id":"85cf942f4c94676d","slug":null,"title":"Introduction to D3 Course: Lesson 3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-27T18:58:49.166Z","update_time":"$D2023-09-28T14:14:11.140Z","view_time":null,"first_public_time":"$D2023-09-27T18:58:49.166Z","has_unpublished_edits":null,"fork":{"id":"855def707ff78455","slug":"introduction-to-d3-course-lesson-3","title":"Introduction to D3 Course: Lesson 3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc97a2766ef9be06","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":"starter_2024","bio":"","following":false},"version":538,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3 Course: Lesson 3","cells":[{"id":5,"value":"# Introduction to D3 Course: Lesson 3\n## Line Charts & Bar Charts\n\n[Session 3 slide deck](https://docs.google.com/presentation/d/1zjmdZPXXm6Nq7UFm4Yj1pcZgAtZ3_rJCdjIOoqKrCT0/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## Activity 1\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"### SVG Path\n- Create a new SVG Path of a diagonal line from the top left corner to the bottom right corner.\n- Create a new SVG Path of a triangle\n\n*For reference, here is a list of all the [path commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"note(md`__Note:__ to automatically close an SVG Path, write Z at the end of our path code.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"---\n## Activity 2\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"### D3 Path Generators\n- Create a path generator that takes the values [0, 10, 5, 20] and draws a straight line to each point.\n - For the x axis, you can use the index of the points.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"myData = [0, 10, 5, 30]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"{\n const width = 500;\n const height = 700;\n const margin = { top: 10, bottom: 30, left: 10, right: 10 };\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top}`);\n\n const x = d3.scaleLinear().domain([0, 3]).range([0, width]);\n\n const y = d3.scaleLinear().domain(d3.extent(myData)).range([height, 0]);\n\n const line = d3\n .line()\n .curve(d3.curveStep)\n .x((d, i) => x(i))\n .y((d) => y(d));\n\n g.append(\"path\")\n .datum(myData)\n .attr(\"d\", line)\n .style(\"stroke\", \"steelblue\")\n .style(\"stroke-width\", 10)\n .style(\"fill\", \"none\");\n\n g.selectAll(\".line\")\n .data([myData])\n .join(\"path\")\n .attr(\"d\", line)\n .attr(\"class\", \"line\")\n .style(\"stroke\", \"#000\")\n .style(\"stroke-width\", 1)\n .style(\"fill\", \"none\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"note(md`__Hint:__ you will need to define scales.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---\n## Activity 3\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"### Build Your First Line Chart\n- Convert this Scatterplot* into a line chart using the D3 Path Generator\n\n*Note axes components*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(aapl, Plot.windowY({x: \"Date\", y: \"Close\", k: 10, reduce: \"mean\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"Plot.plot({\n height: 1200,\n width,\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }),\n Plot.dot(appleStockData, {\n fx: \"Close\",\n x: \"Close\",\n y: \"Date\",\n stroke: \"#158192\",\n r: \"Volume\",\n tip: true \n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"note(md`__Hint:__ You only need to create one path, so you want to use .datum() instead of .data()`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"---\n## Activity 4\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"### SVG Rect\n- Create a new rectangle that is 50 pixels wide, starts in the middle of the SVG, and is 100 pixels tall.\n- Make the rectangle end at the bottom of the SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"---\n## Activity 5\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"### Build Your First Bar Chart\n- Convert this Scatterplot to a Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"appleStockData.filter((d, i) => i < 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"---\n## Activity 6\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"### Stack Layout\n- Create a new stack layout function, using the population dataset by state, making the keys the various age buckets.\n- Create a stacked bar chart with the x-axis being each state, and the y axis being the total population, bars colored by their key.\n - Use a band scale to handle for the bar widths\n - Nest a d3.max within the d3.max to get the max y scale value.\n - Use a nested structure to our elements, so that there is a group for each key.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"functionX = populationData.slice([5, 50]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"data = populationData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":355,"value":"Plot.plot({\n marginTop: 25,\n marginRight: 18,\n marginBottom: 58,\n width: width,\n height: 800,\nx: {\n label: \"Function\"\n },\n y: {\n label: \"States\"\n },\n marks: [\n Plot.auto(data, {x: \"name\", y: \"<10\", fx: \"name\", color: \"#1eb8d0\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"Plot.plot({\n width: 900,\n marks: [\n Plot.auto(populationData, {x: \"name\", y: \"60-69\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"Plot.plot({\n width: 900,\n marks: [\n Plot.barY(populationData, { x: \"name\", y: \"60-69\", tip: true, legend: true }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"keys = [\"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"≥80\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"stackLayout = d3.stack()\n .keys()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"{\n\n const width = 900;\n const height = 400;\n const marginTop = 25;\n const marginRight = 20;\n const marginBottom = 35;\n const marginLeft = 100;\n\n const x = d3.scaleBand()\n\n const y = d3.scaleLinear()\n\n const color = d3.scaleOrdinal()\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width + marginLeft + marginRight)\n .attr(\"height\", height + marginTop + marginBottom);\n\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${marginLeft}, ${marginTop})`);\n\n g.append(\"g\")\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisBottom(x))\n \n g.append(\"g\")\n .call(d3.axisLeft(y))\n\n g.selectAll(\".states\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n## Wrap Up\nTest your knowledge from session three with these short questions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"appleStockData = aapl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {note} from \"@observablehq/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {testYourKnowledge} from \"@observablehq/test-your-knowledge-cards\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"color = d3.schemeBlues[7]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"populationData = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"