｢男子高校生のなりたい職業｣の移り変わり

34:["$","title",null,{"children":"Ranking of occupations Japanese high school students would like to become | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 3c:Tcab,chart_1 = { const plot = Plot.plot({ width: 1200, height: 500, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "gray" }, x: { tickSize: 0, tickPadding: 25, domain: [2014.6, 2025.6], ticks: [2017, 2018, 2019, 2020, 2021, 2022, 2023], tickFormat: d3.format("d"), label: "調査年" }, y: { label: null, ticks: false, reverse: true }, font: { family: "Noto Sans JP, sans-serif" }, marks: [ Plot.lineY(_naritai_job_17_23_ml, { x: "Year", y: "Ranking", z: "Occupation", stroke: customColors(), strokeWidth: 20, opacity: 0.5, curve: "bump-x" }), Plot.dot(_naritai_job_17_23_ml, { x: "Year", y: "Ranking", fill: (d) => customColors()[_naritai_job_17_23_ml.indexOf(d)], size: 60, opacity: 0.8, stroke: (d) => customColors()[_naritai_job_17_23_ml.indexOf(d)], strokeWidth: 6, shape: "circle", fillOpacity: 0.8, strokeOpacity: 1.0, sizeMin: 120, sizeMax: 120, fillRule: "evenodd", shapeRendering: "auto", title: (d) => `${d.Occupation}: ${Number(d.Percentage)}%`, // ツールチップに職業名と割合を表示 tip: true }), Plot.text(_naritai_job_17_23_ml, { filter: (d) => d.Year === 2017, text: (d) => d.Occupation + " " + d.Ranking, textAnchor: "end", fontSize: 19, y: "Ranking", x: 2016.85, fill: (d) => customColors()[_naritai_job_17_23_ml.indexOf(d)], fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold " }), Plot.text(_naritai_job_17_23_ml, { filter: (d) => d.Year === 2023, text: (d) => d.Ranking + " " + d.Occupation, textAnchor: "start", fontSize: 19, y: "Ranking", x: 2023.15, fill: (d) => customColors()[_naritai_job_17_23_ml.indexOf(d)], fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold" }), Plot.text(_naritai_job_17_23_mid_ml, { x: "Year", y: "Ranking", text: (d) => d.Ranking + " " + d.Occupation, // Occupation列の値を表示 textAnchor: "middle", // テキストの位置 dy: -20, // テキストの位置の微調整 fontSize: 19, // テキストのフォントサイズ fill: (d) => customColors()[ _naritai_job_17_23_ml.findIndex( (entry) => entry.Occupation === d.Occupation ) ], // カスタムカラーを適用 fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定, fontWeight: "bold", stroke: "white" }) ] }); const paths = d3.select(plot).selectAll("path"); paths .on("pointerenter", function () { paths.attr("opacity", 0.1); d3.select(this).attr("opacity", 1); }) .on("pointerleave", function () { paths.attr("opacity", 0.5); }); return plot; }3d:Tcb9,chart_2 = { const plot = Plot.plot({ width: 1200, height: 500, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "gray" }, x: { tickSize: 0, tickPadding: 25, domain: [2014.6, 2025.6], ticks: [2017, 2018, 2019, 2020, 2021, 2022, 2023], tickFormat: d3.format("d"), label: "調査年" }, y: { label: null, ticks: false, reverse: true }, font: { family: "Noto Sans JP, sans-serif" }, marks: [ Plot.lineY(_naritai_job_17_23_fm, { x: "Year", y: "Ranking", z: "Occupation", stroke: customColors_fm(), strokeWidth: 20, opacity: 0.5, curve: "bump-x" }), Plot.dot(_naritai_job_17_23_fm, { x: "Year", y: "Ranking", fill: (d) => customColors_fm()[_naritai_job_17_23_fm.indexOf(d)], size: 60, opacity: 1.0, stroke: (d) => customColors_fm()[_naritai_job_17_23_fm.indexOf(d)], strokeWidth: 6, shape: "circle", fillOpacity: 0.8, strokeOpacity: 1.0, sizeMin: 120, sizeMax: 120, fillRule: "evenodd", shapeRendering: "auto", title: (d) => `${d.Occupation}: ${Number(d.Percentage)}%`, // ツールチップに職業名と割合を表示 tip: true }), Plot.text(_naritai_job_17_23_fm, { filter: (d) => d.Year === 2017, text: (d) => d.Occupation + " " + d.Ranking, textAnchor: "end", fontSize: 19, y: "Ranking", x: 2016.85, fill: (d) => customColors_fm()[_naritai_job_17_23_fm.indexOf(d)], fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold " }), Plot.text(_naritai_job_17_23_fm, { filter: (d) => d.Year === 2023, text: (d) => d.Ranking + " " + d.Occupation, textAnchor: "start", fontSize: 19, y: "Ranking", x: 2023.15, fill: (d) => customColors_fm()[_naritai_job_17_23_fm.indexOf(d)], fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold" }), Plot.text(_naritai_job_17_23_mid_fm, { x: "Year", y: "Ranking", text: (d) => d.Ranking + " " + d.Occupation, // Occupation列の値を表示 textAnchor: "middle", // テキストの位置 dy: -20, // テキストの位置の微調整 fontSize: 19, // テキストのフォントサイズ fill: (d) => customColors_fm()[ _naritai_job_17_23_fm.findIndex( (entry) => entry.Occupation === d.Occupation ) ], // カスタムカラーを適用 fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold", stroke: "white" }) ] }); const paths = d3.select(plot).selectAll("path"); paths .on("pointerenter", function () { paths.attr("opacity", 0.1); d3.select(this).attr("opacity", 1); }) .on("pointerleave", function () { paths.attr("opacity", 0.5); }); return plot; }3e:[{"id":"38f156056a1f9594a31f72ab47c04f83940094079ce5227abe27461c8043202d56900c2a48744f5ad076ddd03b6237ad5930f2dcb2c15bf8dd9f72f263f8bf1d","href":"https://static.observableusercontent.com/files/38f156056a1f9594a31f72ab47c04f83940094079ce5227abe27461c8043202d56900c2a48744f5ad076ddd03b6237ad5930f2dcb2c15bf8dd9f72f263f8bf1d","name":"230813_naritai_job_17_23_fm@3.csv","type":"text/csv","lastModified":1691962149075.117,"size":1990},{"id":"8dfb78ad9f86623a92b2e579b5c1bc820d8706dfdfee96cdc579e59c5f0a91aeedcffcf95360764bb95bc57e5b7a56a8b01031d18d6ccca7d53ab05cfc3f0915","href":"https://static.observableusercontent.com/files/8dfb78ad9f86623a92b2e579b5c1bc820d8706dfdfee96cdc579e59c5f0a91aeedcffcf95360764bb95bc57e5b7a56a8b01031d18d6ccca7d53ab05cfc3f0915","name":"230813_naritai_job_17_23_mid_fm@3.csv","type":"text/csv","lastModified":1691962154826.231,"size":140},{"id":"f98e867b1305f7a809d3ead8715c65944242557d55382fe6a6ffd36abeb40ee5b7a54db18bca9175ac68fed5c2dcf1df680906b457a74532af3f3bb7fdbe4d9c","href":"https://static.observableusercontent.com/files/f98e867b1305f7a809d3ead8715c65944242557d55382fe6a6ffd36abeb40ee5b7a54db18bca9175ac68fed5c2dcf1df680906b457a74532af3f3bb7fdbe4d9c","name":"230813_naritai_job_17_23_mid_ml@3.csv","type":"text/csv","lastModified":1691962161263.733,"size":216},{"id":"1b05783d55730bc124591b925ad6958ec250e8953015386de11cf86ff51e2fbd6befdb29264ced5d23428e736034a3523387344a7bf78da2f6f2b6a42e4e2121","href":"https://static.observableusercontent.com/files/1b05783d55730bc124591b925ad6958ec250e8953015386de11cf86ff51e2fbd6befdb29264ced5d23428e736034a3523387344a7bf78da2f6f2b6a42e4e2121","name":"230813_naritai_job_17_23_ml@4.csv","type":"text/csv","lastModified":1691962197932.967,"size":2144}] 38:{"id":"518be987a7509bbc","slug":"ranking-of-occupations-japanese-high-school-students-woul","title":"Ranking of occupations Japanese high school students would like to become","thumbnail":"8bd1a77fff3ea5507c14ea70e6915cd7cf4162b3774c28ec9123886843716f2b","access_level":"public","create_time":"$D2023-08-13T09:05:15.826Z","update_time":"$D2023-12-30T00:48:00.807Z","view_time":null,"first_public_time":"$D2023-08-13T19:42:21.136Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false},"version":687,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"role":"editor"},{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ranking of occupations Japanese high school students would like to become","cells":[{"id":0,"value":"# Ranking of occupations Japanese high school students would like to become\n## 高校生がなりたい職業ランキングを可視化してみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"\n\n\n \n ｢男子高校生のなりたい職業｣の移り変わり\n\n\n \n

\n ｢男子高校生のなりたい職業｣の移り変わり\n

\n ｢女子高校生のなりたい職業｣の移り変わり\n

\n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"　　ソニー生命調べ「中高生が思い描く将来についての意識調査」データより徒然研究室（仮称）作成。調査は隔年。同率同位が生じている場合は元データの表示順に順位付けを行った。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"_naritai_job_17_23_ml = await FileAttachment(\"230813_naritai_job_17_23_ml@4.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_ml","database":"$undefined"},{"id":542,"value":"_naritai_job_17_23_mid_ml = await FileAttachment(\"230813_naritai_job_17_23_mid_ml@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_mid_ml","database":"$undefined"},{"id":544,"value":"_naritai_job_17_23_fm = await FileAttachment(\"230813_naritai_job_17_23_fm@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_fm","database":"$undefined"},{"id":546,"value":"_naritai_job_17_23_mid_fm = await FileAttachment(\"230813_naritai_job_17_23_mid_fm@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_mid_fm","database":"$undefined"},{"id":141,"value":"function customColors() {\n const uniqueOccupations = Array.from(new Set(_naritai_job_17_23_ml.map(d => d.Occupation)));\n const colorMapping = {};\n\n const randomizedColors = [\n \"#bcbd22\", \"#1f77b4\",\n \"#9467bd\", \"#2ca02c\",\n \"#aec7e8\", \"#c7c7c7\",\n \"#9edae5\", \"#ff7f0e\",\n \"#e377c2\", \"#ffbb78\",\n \"#f7b6d2\", \"#c49c94\",\n \"#8c564b\", \"#dbdb8d\",\n \"#98df8a\", \"#7f7f7f\",\n \"#d62728\", \"#17becf\",\n \"#ff9896\", \"#b3d7ff\",\n \"#1f77b4\", \"#ff7f0e\",\n \"#ffbb78\", \"#aec7e8\"\n ];\n\n uniqueOccupations.forEach((occupation, index) => {\n colorMapping[occupation] = randomizedColors[index % randomizedColors.length];\n });\n\n return _naritai_job_17_23_ml.map(d => colorMapping[d.Occupation]);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"function customColors_fm() {\n const uniqueOccupations = Array.from(new Set(_naritai_job_17_23_fm.map(d => d.Occupation)));\n const colorMapping = {};\n\n const randomizedColors = [\n \"#bcbd22\", \"#1f77b4\",\n \"#9467bd\", \"#2ca02c\",\n \"#aec7e8\", \"#c7c7c7\",\n \"#9edae5\", \"#ff7f0e\",\n \"#e377c2\", \"#ffbb78\",\n \"#f7b6d2\", \"#c49c94\",\n \"#8c564b\", \"#dbdb8d\",\n \"#98df8a\", \"#7f7f7f\",\n \"#d62728\", \"#17becf\",\n \"#ff9896\", \"#b3d7ff\",\n \"#1f77b4\", \"#ff7f0e\",\n \"#ffbb78\", \"#aec7e8\"\n ];\n\n uniqueOccupations.forEach((occupation, index) => {\n colorMapping[occupation] = randomizedColors[index % randomizedColors.length];\n });\n\n return _naritai_job_17_23_fm.map(d => colorMapping[d.Occupation]);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"// Noto Sans JP Blackフォントをロードする関数\nasync function loadFont() {\n return new Promise((resolve) => {\n const font = new FontFace('Noto Sans JP Black', 'url(https://cdn.plot.ly/plotly-texture/fonts/v1.3/noto-sans-jp-v13-latin-700.woff)');\n font.load().then(() => {\n document.fonts.add(font);\n resolve();\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null