2f:T729,Plot.plot({ marginLeft: 170, marginBottom: 30, width: 1000, height: checkboxes[0] === "Đông Á" ? 170 : 120, x: { inset: 50, label: "Mean Average Scores", domain: [340, 600] }, y: { inset: 10, label: null, grid: true }, symbol: { scheme: "Category10", legend: true }, //color: { scheme: "Category10", legend: true }, marks: [ Plot.ruleX([472], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#f28e2c" //"#4e79a7" }), Plot.ruleX([476], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#76b7b2" //"#e15759" }), Plot.ruleX([478], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#e15759" }), Plot.ruleX([485], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#4e79a7" }), Plot.ruleY( Na, Plot.groupY( { x1: "min", x2: "max" }, { y: "state", x1: "values", x2: "values" //markerStart: "dot", //markerEnd: "arrow", //sort: {y: "x2"}, //stroke: "min" //strokeWidth: 2 } ) ), /*Plot.dot(apv, { x: "values", y: "state", sort: { y: "-data", reduce: (D) => D.find((d) => d.subject === "Tổng hợp")?.values }, stroke: "subject", //fill: "subject", tip: true, symbol: "subject" //r: 3 }),*/ Plot.dot(Na, { x: "values", y: "state", stroke: "subject", //fill: "subject", symbol: "subject", //strokeWidth: 3, tip: true //r: 6 }), Plot.text(["Điểm Trung bình khối OECD"], { frameAnchor: "top", x: 478, dy: -5, fontSize: 10, fontWeight: "bold", lineAnchor: "bottom", text: (d) => d }) ] })30:T6e3,Plot.plot({ marginLeft: 170, marginTop: checkboxes[0] === "Đông Á" ? -25 : -10, width: 1000, height: checkboxes[0] === "Đông Á" ? 500 : 1500, x: { inset: 50, label: "Mean Average Scores", domain: [340, 600] }, y: { inset: 10, label: null, grid: true }, symbol: { scheme: "Category10", legend: false }, //color: { scheme: "Category10", legend: true }, marks: [ Plot.ruleX([472], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#f28e2c" //"#4e79a7" }), Plot.ruleX([476], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#76b7b2" //"#e15759" }), Plot.ruleX([478], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#e15759" }), Plot.ruleX([485], { strokeDasharray: 15, //strokeWidth: 0.5, stroke: "#4e79a7" }), Plot.ruleY( checkboxes[0] === "Đông Á" ? apv : overall, Plot.groupY( { x1: "min", x2: "max" }, { y: "state", x1: "values", x2: "values" //markerStart: "dot", //markerEnd: "arrow", //sort: {y: "x2"}, //stroke: "min" //strokeWidth: 2 } ) ), Plot.dot(checkboxes[0] === "Đông Á" ? apv : overall, { x: "values", y: "state", sort: { y: "-data", reduce: (D) => D.find((d) => d.subject === "Tổng hợp")?.values }, stroke: "subject", //fill: "subject", tip: true, symbol: "subject" //r: 3 }) /*Plot.text(["Điểm Trung bình khối OECD"], { frameAnchor: "top", x: 478, dy: -5, fontSize: 10, fontWeight: "bold", lineAnchor: "bottom", text: (d) => d })*/ ] })31:T72b,Plot.plot({ marginLeft: 170, width: 1000, height: 500, x: { inset: 50, label: "Overall Scores", domain: [340, 600] }, y: { inset: 10, label: "Reading - Max Score", grid: true }, //symbol: { scheme: "Category10", legend: true }, color: { scheme: "Category10", legend: true }, marks: [ Plot.dot(overall2, { y: "Gap", x: "Overall", fill: "Region", //symbol: "Region", channels: { Country: "state", Math: "Math", Reading: "Reading", Science: "Science" }, tip: true //sort: (a, b) => b.subject - a.subject, // explicitly sort by descending population, //stroke: "subject", //fill: "subject", //symbol: "subject" //r: 3 }), d3 .groups(overall2, (d) => d.Region) .map(([s]) => Plot.density(overall2, { x: "Overall", y: "Gap", weight: (d) => (d.Region === s ? 1 : -1), fill: () => s, fillOpacity: 0.2, thresholds: [0.005] }) ), Plot.ruleX([478], { strokeDasharray: 15, strokeWidth: 1.5, stroke: "black" }), Plot.ruleY( [ d3.mean( overall2.filter((d) => OECD.includes(d.state)).map((d) => d.Gap) ) ], { strokeDasharray: 15, strokeWidth: 1.5, stroke: "black" } ), Plot.text(["Điểm Trung bình khối OECD"], { frameAnchor: "top", x: 478, dy: -5, fontSize: 10, fontWeight: "bold", lineAnchor: "bottom", text: (d) => d }), /*Plot.voronoi(overall2, { x: "Overall", y: "Gap", fill: "Region", fillOpacity: 0.2, stroke: "var(--vp-c-bg)" }),*/ //Plot.frame(), Plot.crosshair(overall2, { x: "Overall", y: "Gap" }) ] })32:T55a,Na = [ { state: "14-year-old Na", values: 600, subject: "Đọc hiểu" }, { state: "14-year-old Na", values: 590, subject: "Toán" }, { state: "14-year-old Na", values: "—", subject: "Khoa học" }, { state: "14-year-old Na", values: "—", subject: "Tổng hợp" }, { state: "13-year-old Na", values: 510, subject: "Đọc hiểu" }, { state: "13-year-old Na", values: 540, subject: "Toán" }, { state: "13-year-old Na", values: "—", subject: "Khoa học" }, { state: "13-year-old Na", values: "—", subject: "Tổng hợp" }, { state: "09-year-old Na", values: 340, subject: "Đọc hiểu" }, { state: "09-year-old Na", values: 400, subject: "Toán" }, { state: "09-year-old Na", values: "—", subject: "Khoa học" }, { state: "09-year-old Na", values: "—", subject: "Tổng hợp" } /*{ state: "10-year-old Na", values: 480, subject: "Đọc hiểu" }, { state: "10-year-old Na", values: 430, subject: "Toán" }, { state: "10-year-old Na", values: "—", subject: "Khoa học" }, { state: "10-year-old Na", values: "—", subject: "Tổng hợp" }, { state: "11-year-old Na", values: 490, subject: "Đọc hiểu" }, { state: "11-year-old Na", values: 450, subject: "Toán" }, { state: "11-year-old Na", values: "—", subject: "Khoa học" }, { state: "11-year-old Na", values: "—", subject: "Tổng hợp" }*/ ]33:[{"id":"3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","href":"https://static.observableusercontent.com/files/3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","name":"us-population-state-age.csv","type":"text/csv","lastModified":1702393500188.743,"size":3516},{"id":"69eff8b37258fcd1c285373ffcccce9abe362cecc373051ce41de174d6bfca385ac4c01ea20c254d67fc3966f4ab3a76fffb90e8223163e1a307ebb55e7665c8","href":"https://static.observableusercontent.com/files/69eff8b37258fcd1c285373ffcccce9abe362cecc373051ce41de174d6bfca385ac4c01ea20c254d67fc3966f4ab3a76fffb90e8223163e1a307ebb55e7665c8","name":"science.csv","type":"text/csv","lastModified":1702393516321.704,"size":2160},{"id":"4545ef7cb34122399585744625f60f12d7f5565fe70212dc9048f28419b079c6642d97e67ca47cc0b36016df303a62532e1b225b4a1f4ee82357daf8cb77fa9a","href":"https://static.observableusercontent.com/files/4545ef7cb34122399585744625f60f12d7f5565fe70212dc9048f28419b079c6642d97e67ca47cc0b36016df303a62532e1b225b4a1f4ee82357daf8cb77fa9a","name":"math.csv","type":"text/csv","lastModified":1702393516552.613,"size":2160},{"id":"b231af5e1db36b3a9abc48c499e92f78828875aa687e2e400f03aacbcfe4f69a90f2b217f8d7aad585468c23d4f3f4e88e1b5ec026cfd9ff06ccb2d63879d691","href":"https://static.observableusercontent.com/files/b231af5e1db36b3a9abc48c499e92f78828875aa687e2e400f03aacbcfe4f69a90f2b217f8d7aad585468c23d4f3f4e88e1b5ec026cfd9ff06ccb2d63879d691","name":"reading.csv","type":"text/csv","lastModified":1702393516761.928,"size":2160}] 2d:{"title":"Plot: Dot plot","cells":[{"id":0,"value":"

Plot: Dot plot

Observable Plot › Gallery

\n\n# Dot plot\n\nComparing demographics by state. *Color* represents age group, *y* represents the state, and *x* represents the proportion of the state’s population in that age group. The [normalize transform](https://observablehq.com/plot/transforms/normalize) is used to compute the relative proportion of each age group within each state, while the [group transform](https://observablehq.com/plot/transforms/group) is used to pull out the *min* and *max* values for each state for a horizontal [rule](https://observablehq.com/plot/marks/rule).","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"md`### Điểm PISA 2022 của học sinh 15 tuổi ${\n checkboxes[0] === \"Đông Á\" ? \"ở Đông Á\" : \"trên Thế Giới\"\n} ([Nguồn: OECD](https://pisadataexplorer.oecd.org/ide/idepisa/report.aspx))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"viewof checkboxes = Inputs.checkbox([\"Đông Á\"], {\n label: \"Chọn số liệu\",\n value: [\"Đông Á\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"tick = (size = 5) =>\n (color) =>\n htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"stateage = FileAttachment(\"us-population-state-age.csv\").csv({typed: true}).then((data) => {\n const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"apv = overall\n .filter((d) => ap.includes(d.state))\n .filter((d) => d.state != \"Australia\")\n .filter((d) => d.state != \"New Zealand\")\n .concat(overall.filter((d) => d.state === \"Viet Nam\"))\n .concat(overall.filter((d) => d.state === \"Chinese Taipei\"))\n .concat(overall.filter((d) => d.state === \"Macao (China)\"))\n .concat(overall.filter((d) => d.state === \"Hong Kong (China)\"))\n .concat(overall.filter((d) => d.state === \"Korea\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"East_Asia = apv\n .map((d) => d.state)\n .filter(function (item, pos, self) {\n return self.indexOf(item) == pos;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"OECD = math\n .slice(2, 40)\n .filter((d) => !East_Asia.includes(d.state))\n .map((d) => d.state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"Partners = math\n .slice(40)\n .filter((d) => !East_Asia.includes(d.state))\n .map((d) => d.state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"overall = math\n .concat(reading)\n .concat(science)\n .concat(overall_avg)\n .filter((d) => d.values != \"—\")\n .filter((d) => isNaN(d.values) != true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"math = FileAttachment(\"math.csv\")\n .csv({ typed: true })\n .then((data) => {\n //const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(\n data.map((d) => ({\n state: d.Jurisdiction,\n values: d.Average,\n subject: \"Toán\"\n }))\n );\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"math2 = FileAttachment(\"math.csv\")\n .csv({ typed: true })\n .then((data) => {\n //const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(\n data.map((d) => ({\n state: d.Jurisdiction,\n Math: d.Average\n }))\n );\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"reading = FileAttachment(\"reading.csv\")\n .csv({ typed: true })\n .then((data) => {\n //const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(\n data.map((d) => ({\n state: d.Jurisdiction,\n values: d.Average,\n subject: \"Đọc hiểu\"\n }))\n );\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"science = FileAttachment(\"science.csv\")\n .csv({ typed: true })\n .then((data) => {\n //const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(\n data.map((d) => ({\n state: d.Jurisdiction,\n values: d.Average,\n subject: \"Khoa học\"\n }))\n );\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"science_map = new Map(\n d3.map(await FileAttachment(\"science.csv\").csv({ typed: true }), (d) => [\n d[\"Jurisdiction\"],\n d.Average\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"reading_map = new Map(\n d3.map(await FileAttachment(\"reading.csv\").csv({ typed: true }), (d) => [\n d[\"Jurisdiction\"],\n d.Average\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"overall_avg = math.map((d) => ({\n state: d.state,\n values: Math.round(\n (d.values + reading_map.get(d.state) + science_map.get(d.state)) / 3\n ),\n subject: \"Tổng hợp\"\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"overall2 = math2\n .map((d) => ({\n state: d.state,\n Math: d.Math,\n Reading: reading_map.get(d.state),\n Science: science_map.get(d.state),\n Overall: Math.round(\n (d.Math + reading_map.get(d.state) + science_map.get(d.state)) / 3\n ),\n Gap: reading_map.get(d.state) - d3.max([d.Math, science_map.get(d.state)]),\n Region: OECD.includes(d.state)\n ? \"OECD\"\n : East_Asia.includes(d.state)\n ? \"East Asia\"\n : Partners.includes(d.state)\n ? \"Partners\"\n : \"N/A\"\n }))\n .filter((d) => d.state != \"Selected countries and jurisdictions\")\n .filter((d) => d.state != \"International Average (OECD)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"d3.mean(overall2.map((d) => d.Gap))","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"import { group } from \"@cadasa/gdp-simulation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"ap = group\n .filter((d) => d.Region === \"East Asia & Pacific\")\n .map((d) => d.TableName)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}