2e:null 2f:["$","title",null,{"children":"IGME-460 Week 3 Day 3: Making a scatterplot with scales - SKELETON | Arin R. Greenwood | Observable"}] 34:Td6c,svg``35:T501,{ const w = 500; const h = 400; // now create an svg element to use for our visualization const svg = d3 .create("svg") .attr("width", w) // setup width and height of svg to start .attr("height", h); const coffeeMax = d3.max(dataset, (d) => d.coffees); const wakeMax = d3.max(dataset, (d) => d.wake_time); // now let's make our scatterplot using the coffee to wake_time dataset // 5 is a good estimate of maximum number of coffees // 30 is a good estimate of maximum number of hours of wake_time // Use these two values to figure out each circle's 'cx' and 'cy' // values. const margin = { left: 20, right: 20, top: 50, bottom: 20 }; const yScale = d3 .scaleLinear() .domain(d3.extent(dataset, (d) => d.wake_time)) .range([400 - margin.bottom, 0 + margin.top]); svg .selectAll("circle") .data(dataset) .join("circle") .attr("r", 5) .style("fill", "orange") //.attr("cx", (d, i) => d.coffees * (w / coffeeMax) - 20) .attr("cx", (d, i) => xScale(d.coffees)) .attr("cy", (d, i) => yScale(d.wake_time)); //.attr("cy", (d, i) => h - d.wake_time * (h / wakeMax) + 20); // Now append some 'text' elements for each dot's label svg.selectAll("text"); return svg.node(); }36:[{"id":"98d4c3044c48c3aaaf32c915a5291e16c56c519d5da0d58821e98962538ab9580909934e28e05490bb5df4e31d7fd2e8b21b9bafe3a9951a7eae3840511cfd1c","href":"https://static.observableusercontent.com/files/98d4c3044c48c3aaaf32c915a5291e16c56c519d5da0d58821e98962538ab9580909934e28e05490bb5df4e31d7fd2e8b21b9bafe3a9951a7eae3840511cfd1c","name":"CoffeeWake.csv","type":"text/csv","lastModified":1643388246543.035,"size":229}] 32:{"id":"7c675b871966f270","slug":"igme-460-week-3-day-3-making-a-scatterplot-with-scales-skelet","title":"IGME-460 Week 3 Day 3: Making a scatterplot with scales - SKELETON","thumbnail":"ee9366ffc2f3e5113a5ce6bd61d36f36ae5ae19bcf13606eecb886df51bfef7a","access_level":"public","create_time":"$D2022-01-28T16:44:06.543Z","update_time":"$D2023-02-08T20:44:03.756Z","view_time":null,"first_public_time":"$D2023-02-06T19:39:05.536Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fe509c97e5bd30c6","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":"starter_2024"},"version":281,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null}],"members":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"IGME-460 Week 3 Day 3: Making a scatterplot with scales - SKELETON","cells":[{"id":0,"value":"md`# IGME-460 Week 3 Day 3: Making a scatterplot with scales - SKELETON`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"dataFile = await FileAttachment('CoffeeWake.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dataset = d3.csvParse(dataFile, (row) => {\n return {\n coffees: +row.coffees,\n wake_time: +row.wake_time\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\n\nYou're looking to make something that looks like the above.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"coffeeMax = d3.max(dataset, (d) => d.coffees)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"coffeeMin = d3.min(dataset, (d) => d.coffees)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"wakeMax = d3.max(dataset, (d) => d.wake_time)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"xScale = d3\n .scaleLinear()\n .domain([0, coffeeMax])\n .range([0, 500 - 20])\n\n//.domain(0,d3.max(dataset, (d) => d.coffees))\n//.range([0, 500])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(dataset, (d) => d.wake_time))\n .range([400 - 20, 0 + 20])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"yScale(20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"xScalePow = d3.scalePow().exponent(3).domain([0, 5]).range([0, 500])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"xScaleTime = d3\n .scaleTime()\n .domain([new Date(), d3.timeDay.offset(new Date(), 7)])\n .range([0, 500])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"xScaleTime(d3.timeDay.offset(new Date(), 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"scaleOrd = d3\n .scaleOrdinal()\n .domain([\"A\", \"AA\", \"AAA\"])\n .range([\"orange\", \"red\", \"yellow\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"