3e:null 3f:["$","title",null,{"children":"Introduction to D3 Course: Lesson 2 | Kallol Chatterjee | Observable"}] 45:T4b7,chart = { // Specify the chart’s dimensions. const width = 500; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; // Prepare the scales for positional encoding. const x = d3.scaleLinear() .domain(d3.extent(cars, d => d.mpg)).nice() .range([0, width]); const y = d3.scaleLinear() .domain(d3.extent(cars, d => d.hp)).nice() .range([height, 0]); // Create the SVG container. 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})`); // Create the axes. g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 80)) g.append("g") .call(d3.axisLeft(y)) // Add a layer of dots. g.append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(cars) .join("circle") .attr("cx", d => x(d.mpg)) .attr("cy", d => y(d.hp)) .attr("r", 3); return svg.node(); }46:T443,{ const width = 600; const height = 400; const margin = { top: 20, bottom: 20, left: 50, right: 50 }; const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("border", "1px dotted #000"); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // g.append("rect").attr("width", width).attr("height", height); const x = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalLength"])) .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalWidth"])) .range([height, 0]); const colorScale = d3 .scaleOrdinal() .domain(Array.from(new Set(iris.map((d) => d.species)))) .range(["red", "orange", "yellow"]); g.append("g") .selectAll("circle") .data(iris) .join("circle") .attr("r", 3) .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => colorScale(d.species)); return svg.node(); }47:T44c,testYourKnowledge([ { title: 'SVG', backText: [`The inverted coordinate plane means that the origin is in the top left corner.`, `Because web pages start from the top going down, we follow the same convention for SVG.`], question: "The inverted coordinate plane means that the origin is in the bottom left corner.", answer: false }, { title: 'The Data Join', backText: ['For creating new elements when there is data but no existing elements, we use the enter method.', 'Update is used when there is a 1:1 match for elements to datapoints, and exit is used when there is more elements than datapoints.'], question: 'The enter method is used for creating elements when there is data but no existing elements.', answer: true }, { title: 'Scales', backText: [`Color scales are commonly implemented using linear scales, ordinal scales or sequential scales.`, `For a linear scale, it will attempt to interpolate the colors, which can sometimes produce odd results.`], question: `You can use a linear scale for handling colors.`, answer: true }, ], 300, 300)48:T6cd,{ const width = 300; const height = 300; const margin = {top: 50, bottom: 50, left: 50, right: 50}; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("border", "2px dotted #000"); const defs = svg.append("defs") const arrowId = DOM.uid("arrow"); const marker = defs.append("marker") .attr("id", arrowId.id) .attr("viewbox", "0 0 10 10") .attr("refY", 5) .attr("refX", 5) .attr("markerWidth", 10) .attr("markerHeight", 10) .attr("orient", "auto-start-reverse"); marker.append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") const markers = svg.append("g") .attr("marker-end", arrowId) .style('stroke', "#000") .style("fill", "none") markers.append("path") .attr("d", `M0,${height / 2 + margin.top}h${margin.left - 5}`) markers.append("path") .attr("d", `M${width + margin.left + margin.right},${height / 2 + margin.top}L${width + margin.left + 5},${height / 2 + margin.top}`) markers.append("path") .attr("d", `M${width / 2 + margin.left},0v${margin.top - 5}`) markers.append("path") .attr("d", `M${width / 2 + margin.left},${height + margin.top + margin.bottom}L${width / 2 + margin.left},${height + margin.top + 5}`) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const origin = svg.append("circle") .attr('r', 5) svg.append("text") .text("origin") .style("font", "12px sans-serif") .attr("y", 12) .attr("x", 5) g.append("rect") .attr("width", width) .attr("height", height) .style("fill", "#ddd") .style("stroke", "#000") return svg.node() }49:[{"id":"12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","href":"https://static.observableusercontent.com/files/12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","name":"mtcars.csv","type":"text/csv","lastModified":1695744429911.802,"size":1699},{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1695744429911.802,"size":3712}] 43:{"id":"2364015dca274356","slug":null,"title":"Introduction to D3 Course: Lesson 2","thumbnail":"264eb3bed1255c6e3f70951b9a2843ba87198649e5c7e0cc391860b876509ad6","access_level":"public","create_time":"$D2023-09-26T16:07:09.911Z","update_time":"$D2023-09-27T14:24:22.353Z","view_time":null,"first_public_time":"$D2023-09-26T16:07:09.911Z","has_unpublished_edits":null,"fork":{"id":"7fd9ce859a93aa14","slug":"introduction-to-d3-course-lesson-2","title":"Introduction to D3 Course: Lesson 2","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":975,"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 2","cells":[{"id":0,"value":"# Introduction to D3 Course: Lesson 2\n## Scatterplots\n\n[Session 2 slide deck](https://docs.google.com/presentation/d/1IrZiaKZ86m0Ll25HsWHesEsEYbtsH_-TFIrBZBLMMfE/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"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":67,"value":"### What makes a Scatterplot?\n- Write up a checklist of all the things we'll need to generate to make a Scatterplot.\n- Which parts need data?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"## Scatterplot Checklist\nThings we would require to create a scatter plot viz:\n-axes -data\n-circles -data\n-ticks\n-container / canvas\n-text -data\n-data of x and y values\n-scales - data \n-colour/styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"Plot.plot({\n height: 500,\n color: { reverse: true, scheme: \"Blues\" },\n title: \"How are different cylinder differ in terms of perfomance and mpg.\",\n subtitle: \"Here we have three categories of cylinder 8, 6 and 4.\",\n x: { label: \"Miles per Gallon\", type: \"linear\" },\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }),\n Plot.dot(cars, {\n fy: \"cyl\",\n x: \"mpg\",\n y: \"wt\",\n stroke: \"#ff77a7\",\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":284,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"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":69,"value":"### Linear scales\n- Create a linear scale that takes a value between 0 and 1 and outputs a value between 0 and 100\n- Create a linear scale that takes the extent of values for the sepalLength in the iris dataset and outputs a value between 0 and 1\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"\nmyLinearScale = d3.scaleLinear().domain([0, 1]).domain([0,1]).range([0,100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"myLinearScale(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"iris","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"mySepalValues = iris.map(d => d.sepalLength)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"d3.min(mySepalValues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"maxValues = d3.max(mySepalValues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"extentValues = d3.extent(mySepalValues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"d3.scaleLinear().domain(extentValues).range([0,1])(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"d3\n .scaleLinear()\n .domain(d3.extent(iris, (d) => d.sepalLength)) \n .range([0, 1])(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"d3.extent(mySepalValues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"d3\n .scaleLinear()\n .domain(d3.extent(iris.map((d) => d.sepalLength)))\n .range([0, 1])(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"extentValues1 = d3.extent(mySepalValues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"extract = (value, data) => {\n return data.map((d) => d[value]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"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":78,"value":"### Ordinal scales\n- Create an ordinal scale that takes apple and outputs red, takes orange and outputs orange, takes banana and outputs yellow.\n- Create an ordinal scale that checks all the distinct categories of iris species and gives each a distinct color.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"myDataOrdinalScale = d3\n .scaleOrdinal()\n .domain([\"apple\",\"orange\",\"banana\"])\n .range([\"red\", \"orange\", \"yellow\"])// Write JS here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"Plot.plot({\n title: \"The Ordinal Scale Graph for Iris Data Set\",\n subtitle: \"I hope this subtitle works\",\n caption: \"I hope this caption works\",\n marginTop: 10,\n marginLeft: 68,\n marginRight: 27,\n insetTop: 2,\n width: width,\n height: 150,\nx: {\n type: \"linear\",\n label: \"Width of the Petal\"\n },\n y: {\n label: \"Species Types\"\n },\n color: {\n scheme: \"Blues\"\n },\n marks: [\n Plot.auto(iris, {x: \"sepalWidth\", y: \"species\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":960,"value":"Plot.plot({\n marks: [\n Plot.auto(iris, {x: \"petalLength\", y: \"petalWidth\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":949,"value":"Plot.plot({\n x: { type: \"linear\", label: \"Width of the Petal\" },\n y: { label: \"Species Types\" },\n color: { scheme: \"Blues\" },\n title: \"The Ordinal Scale Graph for Iris Data Set\",\n width,\n height: 150,\n caption: \"I hope this caption works\",\n insetTop: 1,\n subtitle: \"I hope this subtitle works\",\n marginTop: 10,\n marginLeft: 20,\n marginRight: 25,\n marks: [\n Plot.dot(iris, {\n x: \"sepalWidth\",\n y: \"species\",\n r: \"petalWidth\",\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":915,"value":"Plot.plot({\n height: 150,\n width,\n title: \"The Ordinal Scale Graph for Iris Data Set\",\n subtitle: \"I hope this subtitle works\",\n caption: \"I hope this caption works\",\n marginTop: 10,\n insetTop: 2,\n marginRight: 27,\n marginLeft: 68,\n x: { label: \"Width of the Petal\", type: \"linear\" },\n y: { label: \"Species Types\" },\n color: { scheme: \"Blues\" },\n marks: [\n Plot.dot(iris, {\n x: \"petalWidth\",\n y: \"species\",\n r: \"petalWidth\",\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":82,"value":"iris","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"htl.html`

${\"banana\"}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"new Set(iris.map((d) => d.species))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"note(md`__Note:__ a JavaScript Set is an object lets you store unique values of any type, and Array.from() will return an array from a Set.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"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":95,"value":"### The canvas\n- Create an SVG that has a width of 600 pixels and a height of 400 pixels\n- Add margins and a `` container that lives within those margins\n- Add a black rectangle to that container to show that its within the margin.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"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":87,"value":"### Build your first Scatterplot\n- Using your checklist and the topics we've covered, let's make our first Scatterplot!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"{\n const svg = d3.create(\"svg\")\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":13,"value":"---\n## Wrap Up\nTest your knowledge from session two with these short questions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"

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

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

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"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":21,"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":22,"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":23,"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":136,"value":"cars = FileAttachment(\"mtcars.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"myScale = d3.scaleLinear()\n .domain([1, 100]) // data\n .range([5, 25]) // pixels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"myColorScale = d3.scaleOrdinal()\n .domain([1, 50, 100]) // data\n .range([\"steelblue\", \"orange\", \"magenta\"]) // colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"{\n const width = 300;\n const height = 300;\n const margin = {top: 10, bottom: 10, left: 40, right: 40};\n \n const svg = d3.create(\"svg\")\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n\n const g = svg.append('g')\n .attr('transform', `translate(${margin.left}, ${margin.top})`)\n\n const x = d3.scaleLinear()\n .domain([1, 100])\n .range([0, width])\n\n g.selectAll(\"circle\")\n .data([1, 50, 100])\n .join(\"circle\")\n .attr(\"r\", d => myScale(d))\n .attr(\"cy\", height / 2)\n .attr(\"cx\", d => x(d))\n .style(\"fill\", d => myColorScale(d))\n\n g.selectAll(\"text\")\n .data([1, 50, 100])\n .join(\"text\")\n .text(d => d)\n .attr(\"y\", height / 2 - 50)\n .attr(\"x\", d => x(d))\n .style(\"text-anchor\", \"middle\")\n .style(\"font\", \"24px sans-serif\")\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":75,"value":"iris = await FileAttachment(\"iris.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"iris","database":"$undefined"},{"id":141,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"- []()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"