25:["$","title",null,{"children":"Fujii Kaze YouTube views cartogram | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T93d,bertin.draw({ params: { background: "#faf5f0", projection: "user", margin: 0 }, // 投影方法を"user"に設定 layers: [ // { // type: "header", // ヘッダータイプのレイヤーを定義 // background: "#faf5f0", // fontSize: 35, // fill: "#3c3c3c", // text: "YouTubeにおける藤井風さん楽曲の視聴回数地図" // }, { type: "text", // ヘッダータイプのレイヤーを定義 position: "top", background: "#faf5f0", fontSize: 32, borderWith: 5.0, fill: "#3c3c3c", text: "YouTubeにおける藤井風さん楽曲の視聴回数地図\nFujii Kaze YouTube Views Map" }, { type: "footer", position: "bottomleft", background: "#faf5f0", fontSize: 9.5, fill: "#3c3c3c", text: "YouTubeデータより徒然研究室（仮称）作成。2023年８月27日データ取得。視聴回数に比例させて各国の面積を描画している。" }, // { // type: "label", // geojson: subregions, // values: "label", // fontWeight: "bold", // fontSize: 12, // halo: true // }, { geojson: cartogram, // ジオJSONデータをカートグラムとして使用する fill: { type: "choro", // 塗りつぶしタイプをコロプレスに設定 values: "gdppercapita", // 値としてgdppercapita（一人当たりのGDP）を使用 leg_x: 50, // 凡例のX座標を50に設定 leg_y: 300, // 凡例のY座標を300に設定 leg_title: "６月２４日以降の視聴回数", // 凡例のタイトルを設定　"一人当たりのGDP\n（$で）" leg_round: 0, // 凡例の数値を小数点以下0桁で表示 leg_format: numberWithCommas, // colors: d3.schemePuRd[5] // 色のスキームをgreenred.colors（緑から赤までの色）に設定 colors: d3.schemeYlGnBu[5] // 色のスキームをgreenred.colors（緑から赤までの色）に設定 }, stroke: "#cccccc", strokeWidth: 0.5, tooltip: [ "$name", // ツールチップに地名を表示 (d) => "一人当たりのGDP：" + numberWithCommas(Math.round(d.views)) + " $/人" // ツールチップに丸められた一人当たりのGDPを表示 ] } ] })4a:T646,worlddata = { // 最小値を1として設定 let minval = 1; // データの各要素をidをキーとしてアクセス可能なMapに変換 let accessor = new Map( data.map((d) => [d.id, { views: d.views, views: d.views }]) ); // world.featuresの各要素に対して処理を行い、新しい配列featuresを作成 let features = world.features.map((d) => ({ // ジオメトリのタイプを"Feature"に設定 type: "Feature", // プロパティ情報を設定 properties: { // ISO3コードをidとして設定 id: d.properties.ISO3_CODE, // 英語名をnameとして設定 name: d.properties.NAME_ENGL, // もしアクセッサからpopが取得可能ならばその値を、そうでなければ最小値を設定 pop: accessor.get(d.properties.ISO3_CODE)?.views ? +accessor.get(d.properties.ISO3_CODE)?.views : minval, // もしアクセッサからgdpが取得可能ならばその値を、そうでなければ最小値を設定 gdp: accessor.get(d.properties.ISO3_CODE)?.views ? +accessor.get(d.properties.ISO3_CODE)?.views : minval, // 一人当たりのGDPを計算して設定 // gdppercapita: // +accessor.get(d.properties.ISO3_CODE)?.views / // +accessor.get(d.properties.ISO3_CODE)?.views gdppercapita: +accessor.get(d.properties.ISO3_CODE)?.views }, // ジオメトリ情報を設定 geometry: d.geometry })); // FeatureCollectionとしてfeaturesをまとめて返す return { type: "FeatureCollection", features }; }4b:[{"id":"c197dbe6569717e40a36448f1a797405939d02d6c042c6b3861bb4e7678dc9e477fe02b4f69215dffd6d629b1a1c3d19b6921a849c46a98298a88689f5333127","href":"https://static.observableusercontent.com/files/c197dbe6569717e40a36448f1a797405939d02d6c042c6b3861bb4e7678dc9e477fe02b4f69215dffd6d629b1a1c3d19b6921a849c46a98298a88689f5333127","name":"230827_YouTubeMC_FujiiKaze_239624_230825.csv","type":"text/csv","lastModified":1693142535422.476,"size":1936},{"id":"ff03b502c09355bc12dfaad40e4012d9a1805a043424118a4186190d427b80e76ddc129b3880ce4322cfba2a9f09b3b68bd816c36f4a69ff5e01f8470d81877a","href":"https://static.observableusercontent.com/files/ff03b502c09355bc12dfaad40e4012d9a1805a043424118a4186190d427b80e76ddc129b3880ce4322cfba2a9f09b3b68bd816c36f4a69ff5e01f8470d81877a","name":"world@1.json","type":"application/json","lastModified":1693130210940.504,"size":990220},{"id":"675fba9eb8a0757ca666fe9f581cb1cbf08c7d7b0702ab43228b60585cea9c8d6cc289a7abc284788682a51618459b4ad580798a60e99d6f81378fc53c4807aa","href":"https://static.observableusercontent.com/files/675fba9eb8a0757ca666fe9f581cb1cbf08c7d7b0702ab43228b60585cea9c8d6cc289a7abc284788682a51618459b4ad580798a60e99d6f81378fc53c4807aa","name":"cartogram_pop@1.json","type":"application/json","lastModified":1693130210940.504,"size":1733066},{"id":"6abf97fc4110e005e1718949f3fa1dc2984cef656bdf2d458408f1253c95fe620682d097291f0f09fc5019034eb29283604c85fb9c2865a12b61f5d81b5e26a3","href":"https://static.observableusercontent.com/files/6abf97fc4110e005e1718949f3fa1dc2984cef656bdf2d458408f1253c95fe620682d097291f0f09fc5019034eb29283604c85fb9c2865a12b61f5d81b5e26a3","name":"cartogram_gdp@1.json","type":"application/json","lastModified":1693130210940.504,"size":1732097}] 29:{"id":"0433461156837383","slug":null,"title":"Fujii Kaze YouTube views cartogram","thumbnail":"ec7925f9ecb2cda19ef77a7167466f5b1da8fb0ab87a90db49bbb3bea5119a2a","access_level":"public","create_time":"$D2023-08-27T09:56:50.940Z","update_time":"$D2023-09-17T03:28:14.672Z","view_time":null,"first_public_time":"$D2023-08-27T09:56:50.940Z","has_unpublished_edits":null,"fork":{"id":"9da009c71fe651de","slug":"go-cart-wasm","title":"go-cart-wasm library","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"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":753,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fujii Kaze YouTube views cartogram","cells":[{"id":0,"value":"# Fujii Kaze YouTube views cartogram\n## YouTubeにおける藤井風さん楽曲の視聴回数地図","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"- **`npm`** - https://www.npmjs.com/package/go-cart-wasm\n- **`github`** - https://github.com/riatelab/go-cart-wasm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"To load the library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"GoCart = Promise.all([\n require(\"go-cart-wasm@0.3.0\"),\n require.resolve(\"go-cart-wasm@0.3.0/dist/cart.wasm\")\n]).then(([initGoCart, url]) => initGoCart({ locateFile: () => url }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"**1** - **Attach** a basemap (source: [GISCO/Eurostat](https://ec.europa.eu/eurostat/fr/web/gisco/geodata/reference-data/administrative-units-statistical-units/countries))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"world = FileAttachment(\"world@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"**2** - **Join** data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"data = FileAttachment(\"230827_YouTubeMC_FujiiKaze_239624_230825.csv\").csv()\n","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"function numberWithCommas(x) {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"**3** - Define the map **projection**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3\", \"d3-geo-projection@4\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"worlddataproj = d3.geoProject(worlddata, d3.geoNaturalEarth1().reflectY(true))","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"**4** - **Compute** the cartogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"```js\nGoCart.makeCartogram(geojson, field)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"viewof value = Inputs.radio([\"pop\", \"gdp\"], {\n label: \"Indicator\",\n value: \"pop\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"// ラジオボタンの選択肢を定義\nviewof compute = Inputs.radio([\"Live\"], {\n label: \"Computation\", // ラベルを指定\n value: \"Live\" // 初期値を指定\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"cartogram = {\n // カートグラムデータを保持する変数を宣言\n let cartogram;\n\n // もしcomputeが\"Live\"であれば\n if (compute == \"Live\") {\n // GoCartライブラリを使用してworlddataprojとvalueを指定してカートグラムを生成\n cartogram = GoCart.makeCartogram(worlddataproj, value);\n\n } else {\n // computeが\"Live\"でない場合、valueに基づいて異なるカートグラムを選択\n\n // もしvalueが\"pop\"であれば\n if (value == \"pop\") {\n // \"cartogram_pop@1.json\"ファイルを読み込んでJSON形式としてカートグラムデータを取得\n cartogram = FileAttachment(\"cartogram_pop@1.json\").json();\n }\n\n // もしvalueが\"gdp\"であれば\n if (value == \"gdp\") {\n // \"cartogram_gdp@1.json\"ファイルを読み込んでJSON形式としてカートグラムデータを取得\n cartogram = FileAttachment(\"cartogram_gdp@1.json\").json();\n }\n }\n // カートグラムデータを返す\n return cartogram;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"**5** - **Display** the cartogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"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":379,"value":"data1 = await FileAttachment(\"230827_YouTubeMC_FujiiKaze_239624_230825.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data1","database":"$undefined"},{"id":724,"value":"subregions = d3.json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/datasets/UNmigrantstock/data/regional/subregions.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null