45:["$","title",null,{"children":"Visualization of the number of foreign visitors to Japan | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 4d:Tb94,chart = { const plot = Plot.plot({ width: 1200, height: 640, // marginLeft: 140, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "gray" }, y: { grid: false, axis: false, label: null }, marks: [ Plot.text([`訪日外国人数の推移を\n可視化してみる`], { frameAnchor: "top-left", fontSize: 50, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "700", // fill: "deeppink", fill: "#313131", dy: 30, lineHeight: 1.1 }), Plot.text( // グラフ内の任意の位置にテキストをプロットするコード [ `日本政府観光局（ＪＮＴＯ）データより徒然研究室（仮称）作成。単位は人。` ], { frameAnchor: "top-left", fontSize: 10, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "300", fill: "black", dy: 5 } ), Plot.areaY( data, Plot.stackY({ x: "date", y: "value", z: "country", fill: (d) => colorScale(d.country), order: "value", offset: "center", tip: true, title: (d) => `Date: ${formatDateToYYYYMM(new Date(d.date))}\nCountry: ${ d.country }\nValue: ${numberWithCommas(d.value)}`, curve: "basis", opacity: 0.5 }) ), Plot.text( sortedDataOnDate.filter((d) => topCountriesOnDate.includes(d.country)), { x: "date", y: (d) => totalValueOnDate - d.cumulativeValue, text: "country", dy: "-0.5em", fontSize: 21, fill: (d) => colorScale(d.country), fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold", stroke: "white" } ), Plot.text( sortedDataOnLastDate.filter((d) => topCountriesOnLastDate.includes(d.country) ), { x: "date", y: (d) => totalValueOnLastDate - d.cumulativeValueLast + (totalValueOnDate - totalValueOnLastDate) / 2, text: "country", dy: "-0.5em", fontSize: 21, fill: (d) => colorScale(d.country), fontFamily: "Noto Sans JP ExtraBold, sans-serif", fontWeight: "bold", stroke: "white" } ), Plot.ruleY([0]) ] }); const paths = d3.select(plot).selectAll("path"); paths .on("pointerenter", function () { paths.attr("opacity", 0.1); d3.select(this).attr("opacity", 0.7); }) .on("pointerleave", function () { paths.attr("opacity", 0.5); }); return plot; }4e:T744,chart1 = { const plot = Plot.plot({ width: 1200, height: 640, // marginLeft: 140, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "gray" }, y: { grid: false, axis: false, label: null }, marks: [ Plot.areaY( data, Plot.stackY({ x: "date", y: "value", z: "country", fill: (d) => colorScale(d.country), order: "value", offset: "center", tip: true, title: (d) => `Date: ${formatDateToYYYYMM(new Date(d.date))}\nCountry: ${ d.country }\nValue: ${numberWithCommas(d.value)}`, curve: "basis", opacity: 0.65 }) ), Plot.text( sortedDataOnDate, Plot.selectLast( Plot.stackY({ // filter: (d) => d.date < new Date(2019, 7, 1), x: "date", y: "value", z: "rank", text: "country", dy: -15, textAnchor: "start", fontSize: (d) => 30 / ((d.rank - 1) * 0.5 + 1) + 4, // フォントサイズの計算 fill: (d) => colorScale(d.country), order: "value", fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold", stroke: "white", strokeWidth: 1.5, opacity: 0.8, offset: "center" }) ) ), Plot.ruleY([0]) ] }); const paths = d3.select(plot).selectAll("path"); paths .on("pointerenter", function () { paths.attr("opacity", 0.1); d3.select(this).attr("opacity", 0.7); }) .on("pointerleave", function () { paths.attr("opacity", 0.65); }); return plot; }4f:Td4b,chart3 = { const margin = { top: 20, right: 20, bottom: 40, left: 20 }; const width = 1200 - margin.left - margin.right; const height = 640 - margin.top - margin.bottom; // SVG オブジェクトを作成 const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const xScale = d3.scaleTime().range([0, width]); const yScale = d3.scaleLinear().range([height, 0]); const maxY = d3.max(data, (d) => d.value); xScale.domain(d3.extent(data, (d) => new Date(d.date))); yScale.domain([0, maxY]); const stackedData = d3 .stack() .keys(["value"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetCenter)( d3 .group(data, (d) => d.country) .entries() .map((d) => ({ country: d.key, ...Array.from(d.values).reduce( (acc, val) => ({ date: val[0].date, value: val[0].value, ...acc }), {} ) })) ); g.selectAll(".area") .data(stackedData) .enter() .append("path") .attr("class", "area") .attr("d", (d) => d3 .area() .x((d) => xScale(new Date(d.data.date))) .y0((d) => yScale(d[0])) .y1((d) => yScale(d[1])) .curve(d3.curveBasis)(d) ) .attr("fill", (d) => colorScale(d.key)) .attr("opacity", 0.65) .on("pointerenter", function (event, d) { g.selectAll("path.area").attr("opacity", 0.1); d3.select(this).attr("opacity", 0.7); }) .on("pointerleave", function (event, d) { g.selectAll("path.area").attr("opacity", 0.65); }); // sortedDataOnDate に rank プロパティを追加 const sortedDataOnDateWithRank = sortedDataOnDate.map((d, i) => ({ ...d, rank: i + 1 // データの順序に基づいて rank を割り当てます })); g.selectAll(".text") .data(sortedDataOnDateWithRank) .enter() .append("text") .attr("class", "text") .attr("x", (d) => xScale(new Date(d.date))) .attr("y", (d) => yScale(d.value) - 15) .text((d) => d.country) .attr("font-size", (d) => 30 / ((d.rank - 1) * 0.5 + 1) + 4) .attr("fill", (d) => colorScale(d.country)) .attr("font-family", "Noto Sans JP ExtraBold, sans-serif") .attr("font-weight", "bold") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("opacity", 0.8) .attr("text-anchor", "start") .on("pointerenter", function (event, d) { g.selectAll("path.area").attr("opacity", 0.1); d3.select(this).attr("opacity", 1); }) .on("pointerleave", function (event, d) { g.selectAll("path.area").attr("opacity", 0.65); d3.select(this).attr("opacity", 0.8); }); g.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", yScale(0)) .attr("y2", yScale(0)) .attr("stroke", "gray") .attr("stroke-width", 1); const xAxis = d3 .axisBottom(xScale) .ticks(d3.timeYear.every(1)) .tickFormat((d) => formatDateToYYYYMM(new Date(d))); g.append("g").attr("transform", `translate(0,${height})`).call(xAxis); const yAxis = d3 .axisLeft(yScale) .tickFormat((d) => numberWithCommas(d)) .ticks(5); g.append("g").call(yAxis); return svg.node(); }50:[{"id":"0b68015cbccd218965b5760fb6a87f629c4d01267aca6215a0fcf060d09fa7a10b28022ebe82146a08dcf9b35ed7a435dcbb1e6914f4b4ef8b775a13dc01087c","href":"https://static.observableusercontent.com/files/0b68015cbccd218965b5760fb6a87f629c4d01267aca6215a0fcf060d09fa7a10b28022ebe82146a08dcf9b35ed7a435dcbb1e6914f4b4ef8b775a13dc01087c","name":"ranked_data_2003_to_202406.csv","type":"text/csv","lastModified":1724733104203.672,"size":616884},{"id":"cf01734004f8b9b2349a03360280415069baf7246cbadd36da7f67a50b41f4e022980b2579a76ddef832b5aaf5d9907ff6d139cf470362ca3cc1018e8003df0d","href":"https://static.observableusercontent.com/files/cf01734004f8b9b2349a03360280415069baf7246cbadd36da7f67a50b41f4e022980b2579a76ddef832b5aaf5d9907ff6d139cf470362ca3cc1018e8003df0d","name":"ranked_data_2003_to_2023.csv","type":"text/csv","lastModified":1692253166356.081,"size":576139}] 49:{"id":"60012c8b35afb37c","slug":"visitors-to-japan","title":"Visualization of the number of foreign visitors to Japan","thumbnail":"b603b1353b510ca6cb0509fdb3fe849428f91d607266e58074d344543678386e","access_level":"public","create_time":"$D2023-08-17T05:03:25.654Z","update_time":"$D2024-09-02T13:49:21.237Z","view_time":null,"first_public_time":"$D2023-08-17T22:13:12.523Z","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":838,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization of the number of foreign visitors to Japan","cells":[{"id":0,"value":"# Visualization of the number of foreign visitors to Japan\n## 訪日外国人数の推移を可視化してみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"\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":178,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"　　日本政府観光局（ＪＮＴＯ）データより徒然研究室（仮称）作成。単位は人。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"after_removal_merged_data_2003_to_2023 = await FileAttachment(\"ranked_data_2003_to_202406.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"after_removal_merged_data_2003_to_2023","database":"$undefined"},{"id":14,"value":"data = after_removal_merged_data_2003_to_2023","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// データの前処理\n// 中央値の計算など、データを加工して新しいデータセットを作成します。\n\n// ここでのコードは一例です。実際のデータ構造に応じて変更が必要かもしれません。\ndata.forEach((d) => {\n d.center = d.value / 2; // これは単純な例です。実際にはz（カテゴリ）ごとの累計や中央値の計算が必要です。\n d.upper = d.center + d.value / 2;\n d.lower = d.center - d.value / 2;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"data.forEach((d) => {\n if (isNaN(d.value)) {\n d.value = 0;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// colorScale = d3.scaleOrdinal(d3.schemeDark2\ncolorScale = d3\n .scaleOrdinal()\n // .domain([/* ドメインの値をここに指定 */])\n .range([\n \"#8bc34a\",\n \"#e81e63\",\n \"#ff5722\",\n \"#2196f3\",\n \"#673ab7\",\n \"#cddc39\",\n \"#f44336\",\n \"#00bcd4\",\n \"#ff9800\",\n \"#03a9f4\",\n \"#607d8b\",\n \"#9c27b0\",\n \"#009688\",\n \"#000000\",\n \"#ffeb3b\",\n \"#795548\",\n \"#ffc107\",\n \"#4caf50\",\n \"#3f51b5\",\n \"#9e9e9e\"\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// ラベル用に特定に日付を指定\ndateToFilter = new Date(Date.UTC(2019, 6, 1)) // 5 is June in JavaScript's Date.UTC","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"// データを value の順にソート\nsortedDataOnDate = dataOnDate.sort((a, b) => b.value - a.value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"// 上位10ヵ国のリストを作成\ntopCountriesOnDate = sortedDataOnDate.slice(0, 6).map((d) => d.country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"function calculateCumulativeValue(dataArray, topCountries) {\n let cumulative = 0;\n dataArray.forEach((d) => {\n if (topCountries.includes(d.country)) {\n d.cumulativeValue = cumulative + d.value / 2;\n cumulative += d.value;\n }\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"calculateCumulativeValue(sortedDataOnDate, topCountriesOnDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"lastDataPoints = data.reduce((acc, curr) => {\n acc[curr.country] = curr;\n return acc;\n}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"// 特定の日付のデータを抽出\ndataOnDate = data.filter(d => d.date.getTime() === dateToFilter.getTime());\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"// 2019-06-01の全国の累積値を計算\ntotalValueOnDate = dataOnDate.reduce((sum, d) => sum + d.value, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"// 1. 最後の日付を取得\n// lastDate = new Date(\n// Math.max.apply(\n// null,\n// data.map((d) => new Date(d.date))\n// )\n// )\n\nlastDate = new Date(Date.UTC(2024, 4, 1)) // 5 is June in JavaScript's Date.UTC","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"// 2. その日付のデータをフィルタリング\ndataOnLastDate = data.filter(d => new Date(d.date).getTime() === lastDate.getTime());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"// データを value の順にソート\nsortedDataOnLastDate = dataOnLastDate.sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"// 3. フィルタリングしたデータをvalueでソートして上位6カ国を取得\ntopCountriesOnLastDate = dataOnLastDate.sort((a, b) => b.value - a.value).slice(0, 6).map(d => d.country);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"// 2023-05-01の全国の累積値を計算\ntotalValueOnLastDate = dataOnLastDate.reduce((sum, d) => sum + d.value, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"function calculateCumulativeValueLast(dataArray, topCountriesOnLastDate) {\n let cumulativeValueLastDate = 0;\n dataArray.forEach((d) => {\n if (topCountriesOnLastDate.includes(d.country)) {\n d.cumulativeValueLast = cumulativeValueLastDate + d.value / 2;\n cumulativeValueLastDate += d.value;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"calculateCumulativeValueLast(sortedDataOnLastDate, topCountriesOnLastDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"// 日付の表示形式を変更\nfunction formatDateToYYYYMM(date) {\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, \"0\"); // 月は0から始まるので、1を加える必要があります。\n return `${year}-${month}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"// 人数にカンマを付加する \nfunction numberWithCommas(x) {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:null