2b:null 2c:["$","title",null,{"children":"Day 8: Humans #30DayChartChallenge | Roman Sverdan | Observable"}] 31:T6fd,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => (d[xCategory] != null ? x(d[xCategory]) : x(0))) .attr("cy", (d) => (d[yCategory] != null ? y(d[yCategory]) : y(0))) .attr("r", 8) .style("stroke", "#333") // .style("stroke-width", 1) .style("fill", (d) => colors[d["World part"]]) .style("fill-opacity", 0.7) .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut); svg .append("text") .attr("x", width - 20) .attr("y", height - 20) .style("text-anchor", "end") .style("font-weight", "bold") .text(xCategory + " (minutes per day)"); svg .append("text") .attr("x", margin.left + 10) .attr("y", 30) .style("text-anchor", "start") .style("font-weight", "bold") .text(yCategory + " (minutes per day)"); svg .append("path") .datum(regressionData) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); function nodeMouseOver(event, d) { let x = event.pageX + 18; let y = event.pageY; x > width - 200 ? (x = x - 218) : x; toolTip .style("left", x + "px") .style("top", y + 2 + "px") .style("display", "block").html(`${d.Country}
${xCategory}: ${d[xCategory]} minutes
${yCategory}: ${d[yCategory]} minutes`); } function nodeMouseOut(event, d) { toolTip.classed("right", false).style("display", "none"); } return svg.node(); }32:[{"id":"fe57ce25391ea661b4552634fc0d02fbdbc6320eaa38ecbb6d95d1b9333d433d16a242bc07bb9639ebae4820d695d665fbc2397656e0d1563465d62bc5d58fb0","href":"https://static.observableusercontent.com/files/fe57ce25391ea661b4552634fc0d02fbdbc6320eaa38ecbb6d95d1b9333d433d16a242bc07bb9639ebae4820d695d665fbc2397656e0d1563465d62bc5d58fb0","name":"Time-Use-in-OECD-Countries-OECD.csv","type":"text/csv","lastModified":1680977088786.332,"size":2229}] 2f:{"id":"f43483cb21f0f31c","slug":"30daychartchallenge-day-8","title":"Day 8: Humans #30DayChartChallenge","thumbnail":"759f225c7a55c1f90285d7693fa065ecef53809b8cc484c607ed059fe32e8ea3","access_level":"public","create_time":"$D2023-04-08T18:04:00.847Z","update_time":"$D2023-04-08T19:08:28.507Z","view_time":null,"first_public_time":"$D2023-04-08T18:04:00.847Z","fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":128,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 8: Humans #30DayChartChallenge","cells":[{"id":0,"value":"# Day 8: Humans #30DayChartChallenge\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Data source: Our World in Data\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"viewof xCategory = Inputs.select(categories, {\n value: \"Paid work\",\n label: \"Select X-axis category\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof yCategory = Inputs.select(categories, {\n value: \"Sleep\",\n label: \"Select Y-axis category\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"Swatches(\n d3.scaleOrdinal(\n [\"Europe\", \"Africa\", \"Americas\", \"Asia\", \"Oceania\"],\n [colors.Europe, colors.Africa, colors.Americas, colors.Asia, colors.Oceania]\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"colors = ({\n Europe: \"#4575b4\",\n Asia: \"#91bfdb\",\n Americas: \"#fee090\",\n Africa: \"#fc8d59\",\n Oceania: \"#d73027\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({ top: 25, right: 20, bottom: 55, left: 40 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[xCategory]))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[yCategory]))\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"line = d3\n .line()\n .x((d) => x(d.x))\n .y((d) => y(d.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"linearRegression = simpleStat.linearRegression(\n sortedData.map((p) => [p[xCategory], p[yCategory]])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"regressionData = (() => {\n let first = sortedData[0];\n let last = sortedData[sortedData.length - 1];\n\n let linearRegressionLine = simpleStat.linearRegressionLine(linearRegression);\n return [\n {\n x: first[xCategory],\n y: linearRegressionLine(first[xCategory])\n },\n {\n x: last[xCategory],\n y: linearRegressionLine(last[xCategory])\n }\n ];\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"categories = Object.keys(data[0]).slice(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = FileAttachment(\"Time-Use-in-OECD-Countries-OECD.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"sortedData = data.sort((a, b) => (a[xCategory] > b[xCategory] ? 1 : -1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"simpleStat = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"