45:["$","title",null,{"children":"Spike Map of Furusato Nouzei Tax | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 4d:T1348,chart_grd = { const svg = d3.create("svg").attr("viewBox", [-170, 0, 1100, 635]); let linearGradient = svg .append("linearGradient") .attr("id", "gd") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", "0") .attr("x2", "0") .attr("y1", 0) .attr("y2", -50); linearGradient .selectAll("stop") .data(d3.range(10)) .join("stop") .attr("offset", (d) => `${d / 5}`) .attr("stop-color", (d) => gradient(d)); // 選択されたインターポレーター名を指定します // 地理パスを作成します const path = d3.geoPath(); svg // 背景色を設定します .attr("fill", "#e3ceaa") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // 市区町村の境界線を描画します if (drawMunicipalities) { svg .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.4) .attr( "d", path( topojson.mesh( japan, japan.objects.municipalities, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ); } // 都道府県の境界線を描画します if (drawPrefectures) { svg .append("path") .attr("stroke-width", 0.4) .attr( "d", path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)) ); } // 国境線を描画します if (drawCountry) { svg .append("path") .attr("stroke-width", 0.1) .attr("d", path(topojson.feature(japan, japan.objects.country))); } // 凡例を作成します const legend = svg .append("g") .attr("fill", "#777") // グラデーションを適用します .attr("text-anchor", "middle") .attr("font-family", "Noto Sans JP") // フォントファミリーの設定 // .attr("font-weight", 100) // ウェイトの設定 .attr("stroke-width", 0.0) .attr("font-size", 8) .selectAll("g") .data( [4000000000, 8000000000, 12000000000, 16000000000, 20000000000].reverse() ) .join("g") .attr("transform", (d, i) => `translate(${625 - (i + 1) * 18},605)`); // 位置を調整 // 凡例のカラムを作成します legend.append("path"); legend .append("path") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke-width", 0.3) // スパイクのストロークの線を細くする値を設定します .attr("d", (d) => spike(d)); // ここでdをspike関数に渡します // 凡例のテキストを表示します legend .append("text") .attr("dy", "1.3em") .text((d) => d3.format(".2s")(d)); // 人口データを含む地域のパスを描画します // スパイクを描画する部分のコード svg .append("g") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) // .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke", colorValue) // グラデーションを適用します .attr("stroke-width", 0.7) // スパイクのストロークの線を細くする値を設定します .attr("stroke-opacity", 0.5) .selectAll("path") .data(counties.features) .join("path") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("d", (d) => spike(population.get(d.id))) .append("title") .text((d) => `${d.n}${format(d[population])}`); const text = svg .append("text") .attr("x", 5) .attr("y", 35) .attr("fill", "#777") .attr("font-family", "Noto Sans JP") .attr("font-size", 40) .attr("stroke-width", 0.0) .attr("font-weight", 700); text.append("tspan").text("ふるさと納税の"); text .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("fill", "#18A558") .text("流入額"); text .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("fill", "#B21368") .text("流出額を"); text.append("tspan").attr("x", 5).attr("dy", "1.2em").text("可視化してみる"); svg .append("text") .attr("x", 5) // x座標を設定します .attr("y", 630) // y座標を設定します .attr("fill", " #777") // テキストの色を設定します .attr("font-family", "Noto Sans JP") // フォントファミリーを設定します .attr("font-size", 8) // フォントサイズを設定します .attr("stroke-width", 0.0) .text( "総務省の2022年実績データより徒然研究室（仮称）作成。金額の単位Gは10億を示す。離島／無人島の位置にも帰属する市区町村と同額のスパイクが表示されている場合がある。" ); // テキストを設定します return svg.node(); }4e:T10a0,chart_east = { const svg = d3.create("svg").attr("viewBox", [380, -25, 420, 405]); let linearGradient = svg .append("linearGradient") .attr("id", "gd") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", "0") .attr("x2", "0") .attr("y1", 0) .attr("y2", -50); linearGradient .selectAll("stop") .data(d3.range(10)) .join("stop") .attr("offset", (d) => `${d / 5}`) .attr("stop-color", (d) => gradient(d)); // 選択されたインターポレーター名を指定します // 地理パスを作成します const path = d3.geoPath(); svg // 背景色を設定します .attr("fill", "#e3ceaa") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // 市区町村の境界線を描画します if (drawMunicipalities) { svg .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.4) .attr( "d", path( topojson.mesh( japan, japan.objects.municipalities, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ); } // 都道府県の境界線を描画します if (drawPrefectures) { svg .append("path") .attr("stroke-width", 0.4) .attr( "d", path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)) ); } // 国境線を描画します if (drawCountry) { svg .append("path") .attr("stroke-width", 0.1) .attr("d", path(topojson.feature(japan, japan.objects.country))); } // 凡例を作成します const legend = svg .append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "Noto Sans JP") // フォントファミリーの設定 // .attr("font-color", "gray") // ウェイトの設定 .attr("font-size", 5) .attr("stroke-width", 0.0) .selectAll("g") .data( [4000000000, 8000000000, 12000000000, 16000000000, 20000000000].reverse() ) .join("g") .attr("transform", (d, i) => `translate(${620 - (i + 1) * 18},350)`); // 位置を調整 // 凡例のカラムを作成します legend.append("path"); legend .append("path") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke-width", 0.3) // スパイクのストロークの線を細くする値を設定します .attr("d", (d) => spike(d)); // ここでdをspike関数に渡します // 凡例のテキストを表示します legend .append("text") .attr("dy", "1.3em") .text((d) => d3.format(".2s")(d)); // 人口データを含む地域のパスを描画します // スパイクを描画する部分のコード svg .append("g") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) // .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke", colorValue) // グラデーションを適用します .attr("stroke-width", 0.7) // スパイクのストロークの線を細くする値を設定します .attr("stroke-opacity", 0.5) .selectAll("path") .data(counties.features) .join("path") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("d", (d) => spike(population.get(d.id))) .append("title") .text((d) => `${d.n}${format(d[population])}`); svg .append("text") .attr("x", 385) // x座標を設定します .attr("y", 375) // y座標を設定します .attr("fill", " #777") // テキストの色を設定します .attr("font-family", "Noto Sans JP") // フォントファミリーを設定します .attr("font-size", 5) // フォントサイズを設定します .attr("stroke-width", 0.0) .text( "総務省の2022年実績データより徒然研究室（仮称）作成。金額の単位Gは10億を示す。離島や無人島の位置にも帰属する市区町村と同額のスパイクが表示されている。" ); // テキストを設定します return svg.node(); }4f:T12d2,chart_west = { const svg = d3.create("svg").attr("viewBox", [0, 235, 420, 405]); let linearGradient = svg .append("linearGradient") .attr("id", "gd") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", "0") .attr("x2", "0") .attr("y1", 0) .attr("y2", -50); linearGradient .selectAll("stop") .data(d3.range(10)) .join("stop") .attr("offset", (d) => `${d / 5}`) .attr("stop-color", (d) => gradient(d)); // 選択されたインターポレーター名を指定します // 地理パスを作成します const path = d3.geoPath(); svg // 背景色を設定します .attr("fill", "#e3ceaa") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // 市区町村の境界線を描画します if (drawMunicipalities) { svg .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.4) .attr( "d", path( topojson.mesh( japan, japan.objects.municipalities, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ); } // 都道府県の境界線を描画します if (drawPrefectures) { svg .append("path") .attr("stroke-width", 0.4) .attr( "d", path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)) ); } // 国境線を描画します if (drawCountry) { svg .append("path") .attr("stroke-width", 0.1) .attr("d", path(topojson.feature(japan, japan.objects.country))); } // 凡例を作成します const legend = svg .append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "Noto Sans JP") // フォントファミリーの設定 // .attr("font-color", "gray") // ウェイトの設定 .attr("font-size", 5) .attr("stroke-width", 0.0) .selectAll("g") .data( [4000000000, 8000000000, 12000000000, 16000000000, 20000000000].reverse() ) .join("g") .attr("transform", (d, i) => `translate(${415 - (i + 1) * 18},620)`); // 位置を調整 // 凡例のカラムを作成します legend.append("path"); legend .append("path") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke-width", 0.3) // スパイクのストロークの線を細くする値を設定します .attr("d", (d) => spike(d)); // ここでdをspike関数に渡します // 凡例のテキストを表示します legend .append("text") .attr("dy", "1.3em") .text((d) => d3.format(".2s")(d)); // 人口データを含む地域のパスを描画します // スパイクを描画する部分のコード svg .append("g") .attr("fill", "url(#gd)") // グラデーションを適用します .attr("fill-opacity", 0.3) // .attr("stroke", "url(#gd)") // グラデーションを適用します .attr("stroke", colorValue) // グラデーションを適用します .attr("stroke-width", 0.7) // スパイクのストロークの線を細くする値を設定します .attr("stroke-opacity", 0.5) .selectAll("path") .data(counties.features) .join("path") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("d", (d) => spike(population.get(d.id))) .append("title") .text((d) => `${d.n}${format(d[population])}`); // svg // .append("text") // .attr("x", -10) // x座標を設定します // .attr("y", 260) // y座標を設定します // .attr("fill", " #777") // テキストの色を設定します // .attr("font-family", "Noto Sans JP") // フォントファミリーを設定します // .attr("font-size", 20) // フォントサイズを設定します // .attr("stroke-width", 0.0) // .text( // "　総務省データより徒然研究室（仮称）作成。金額の単位Gは10億を示す。" // ); // テキストを設定します svg .append("text") .attr("x", 1) // x座標を設定します .attr("y", 635) // y座標を設定します .attr("fill", " #777") // テキストの色を設定します .attr("font-family", "Noto Sans JP") // フォントファミリーを設定します .attr("font-size", 5) // フォントサイズを設定します .attr("stroke-width", 0.0) .text( "総務省の2022年実績データより徒然研究室（仮称）作成。金額の単位Gは10億を示す。無人島の位置にも帰属する市区町村と同額のスパイクが表示されている。" ); // テキストを設定します return svg.node(); }50:Taf4,chart_mini = { // SVG要素を作成し、ビューボックスを設定します const svg = d3.create("svg").attr("viewBox", [-170, 0, 1100, 635]); // 地理パスを作成します const path = d3.geoPath(); svg // 背景色を設定します // .attr("fill", "#FAF5F0") .attr("fill", "white") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // 市区町村の境界線を描画します if (drawMunicipalities) { svg .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.4) .attr( "d", path( topojson.mesh( japan, japan.objects.municipalities, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ); } // 都道府県の境界線を描画します if (drawPrefectures) { svg .append("path") .attr("stroke-width", 0.4) .attr( "d", path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)) ); } // 国境線を描画します if (drawCountry) { svg .append("path") .attr("stroke-width", 0.4) .attr("d", path(topojson.feature(japan, japan.objects.country))); } // 凡例を作成します const legend = svg .append("g") .attr("fill", colorValue) .attr("text-anchor", "middle") .attr("font-family", "Noto Sans JP") // フォントファミリーの設定 .attr("font-weight", 100) // ウェイトの設定 .attr("font-size", 8) .selectAll("g") .data( [4000000000, 8000000000, 12000000000, 16000000000, 20000000000].reverse() ) .join("g") .attr("transform", (d, i) => `translate(${615 - (i + 1) * 18},620)`); // 位置を調整 // 凡例のカラムを作成します legend .append("path") .attr("fill", colorValue) .attr("fill-opacity", 0.3) .attr("stroke", colorValue) .attr("d", (d) => spike(d)); // ここでdをspike関数に渡します // 凡例のテキストを表示します legend .append("text") .attr("dy", "1.3em") .text((d) => d3.format(".2s")(d)); // 人口データを含む地域のパスを描画します // スパイクを描画する部分のコード svg .append("g") .attr("fill", colorValue) .attr("fill-opacity", 0.3) .attr("stroke", colorValue) .selectAll("path") .data(counties.features) .join("path") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("d", (d) => spike(population.get(d.id))) .attr("stroke-width", 0.6) // スパイクのストロークの線を細くする値を設定します .append("title") .text((d) => `${d.n}${format(d[population])}`); return svg.node(); }51:Ta53,chart = { // SVG要素を作成し、ビューボックスを設定します const svg = d3.create("svg").attr("viewBox", [0, 0, 700, 680]); // 地理パスを作成します const path = d3.geoPath(); svg // 背景色を設定します // .attr("fill", "#FAF5F0") .attr("fill", "white") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // 市区町村の境界線を描画します if (drawMunicipalities) { svg .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.4) .attr( "d", path( topojson.mesh( japan, japan.objects.municipalities, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ); } // 都道府県の境界線を描画します if (drawPrefectures) { svg .append("path") .attr("stroke-width", 0.4) .attr( "d", path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)) ); } // 国境線を描画します if (drawCountry) { svg .append("path") .attr("stroke-width", 0.4) .attr("d", path(topojson.feature(japan, japan.objects.country))); } // 凡例を作成します const legend = svg .append("g") .attr("fill", colorValue) .attr("text-anchor", "middle") .attr("font-family", "Noto Sans JP") // フォントファミリーの設定 .attr("font-weight", 100) // ウェイトの設定 .attr("font-size", 8) .selectAll("g") .data( [4000000000, 8000000000, 12000000000, 16000000000, 20000000000].reverse() ) .join("g") .attr("transform", (d, i) => `translate(${615 - (i + 1) * 18},620)`); // 位置を調整 // 凡例のカラムを作成します legend .append("path") .attr("fill", colorValue) .attr("fill-opacity", 0.3) .attr("stroke", colorValue) .attr("d", (d) => spike(d)); // ここでdをspike関数に渡します // 凡例のテキストを表示します legend .append("text") .attr("dy", "1.3em") .text((d) => d3.format(".2s")(d)); // 地域のパスを描画します svg .append("g") .attr("fill", colorValue) .attr("fill-opacity", 0.3) .attr("stroke", colorValue) .selectAll("path") .data(counties.features) .join("path") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("d", (d) => spike(population.get(d.id))) .append("title") .text((d) => `${d.n}${format(d[population])}`); // SVG要素を返します return svg.node(); }52:[{"id":"e6a2a5f7c73f96c5407a303f2b9273065cb43f555ea3f0a216fa6463cd2ba8fcb50519bfe2c246a605494487137d5603d38b79ec8f31538a89af67909fad052c","href":"https://static.observableusercontent.com/files/e6a2a5f7c73f96c5407a303f2b9273065cb43f555ea3f0a216fa6463cd2ba8fcb50519bfe2c246a605494487137d5603d38b79ec8f31538a89af67909fad052c","name":"230807_令和4年度_寄付金受け入れ額_merged.csv","type":"text/csv","lastModified":1692487047616.933,"size":327406}] 49:{"id":"c142bb0975191ec6","slug":"spike-map-furusato","title":"Spike Map of Furusato Nouzei Tax","thumbnail":"8bc15a8ecb2000766d0dc777d095bc0a0c6bc4c51442b8974b80e232ea514782","access_level":"public","create_time":"$D2023-08-19T15:57:48.559Z","update_time":"$D2023-09-03T02:53:41.906Z","view_time":null,"first_public_time":"$D2023-08-20T00:26:17.188Z","has_unpublished_edits":null,"fork":{"id":"9c2ac914a9965c94","slug":"japan-atlas-topojson","title":"Japan Atlas TopoJSON","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"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":925,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Spike Map of Furusato Nouzei Tax","cells":[{"id":0,"value":"md`# Spike Map of Furusato Nouzei Tax\n\nふるさと納税をスパイクマップで可視化してみる`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"viewof selectedData = Inputs.radio(\n [\"流入（寄付受け入れ額）\", \"流出（住民から控除された額）\"],\n {\n label: \"selectedData\",\n value: [\n \"金額_1_令和4年度に受け入れた寄附件数_金額\",\n \"市町村民税_控除額_（円）_※推計値含む\"\n ],\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"gradient = selectedData === \"流入（寄付受け入れ額）\"\n ? d3.interpolateGreens\n : selectedData === \"流出（住民から控除された額）\"\n ? d3.interpolateReds\n : d3.interpolateGreens // 他の値に対するデフォルトの色","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`~~~js\nimport {viewof sequentialSingleHueInterpolator} from \"@zechasault/color-schemes-and-interpolators-picker\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"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":243,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"　　総務省データより徒然研究室（仮称）作成。金額の単位Gは10億を示す。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"colorValue = selectedData === \"流入（寄付受け入れ額）\"\n ? \"green\"\n : selectedData === \"流出（住民から控除された額）\"\n ? \"#E43E50\"\n : \"green\" // 他の値に対するデフォルトの色","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"length = (d) => population.get(d.id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"format = d3.format(\",.0f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"function legendSpike(values, svgContainer) {\n const format = d3.format(\"~s\");\n const legend = svgContainer.append(\"g\")\n .attr(\"fill\", \"#777\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(values.reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${975 - (i + 1) * 18},590)`);\n\n // スパイクを描画\n legend.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"y1\", 0)\n .attr(\"x2\", 0)\n .attr(\"y2\", d => -d)\n .attr(\"stroke\", \"green\")\n .attr(\"stroke-opacity\", 0.7);\n\n // テキストを描画\n legend.append(\"text\")\n .attr(\"dy\", \"-1.3em\")\n .text(d => format(d));\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"spike = (length, width = 7) =>\n `M${-width / 2},0L0,${-length * 0.000000004}L${width / 2},0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"geoIdentity = d3.geo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"// // プロットを作成します\n// map = Plot.plot({\n// projection: \"identity\",\n// width: 975, // より大きな幅に変更します\n// length: { range: [0, 80] },\n// marks: [\n// Plot.geo(nation, { fill: \"#e0e0e0\" }),\n// Plot.geo(statemesh, { stroke: \"white\" }),\n// Plot.spike(\n// counties.features,\n// Plot.centroid({\n// stroke: \"green\",\n// opacity: 0.8,\n// length: (d) => population.get(d.id)\n// })\n// ),\n// legendSpike(\n// [4000000000, 8000000000, 12000000000, 16000000000, 20000000000],\n// {\n// stroke: \"green\"\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":14,"value":"japan = d3.json(\"https://unpkg.com/jpn-atlas@1/japan/japan.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// // 凡例のスパイクとテキストを作成する関数\n// function legendSpike(\n// values,\n// { frameAnchor = \"bottom-right\", format = \"~s\", stroke } = {}\n// ) {\n// if (!Array.isArray(values)) values = Array.from(values); // valuesが配列でない場合、配列に変換します\n// if (typeof format !== \"function\") format = d3.format(format); // フォーマットが関数でない場合、d3.formatでフォーマット関数を作成します\n// return Plot.marks(\n// values.map((v, i) => {\n// const dx = (i - values.length) * 18; // dx値を計算します\n// return [\n// Plot.spike([v], {\n// length: [v], // スパイクの長さを設定します\n// dx,\n// dy: -20,\n// frameAnchor,\n// stroke,\n// opacity: 0.7 // 透明度を設定します（例として0.7を指定）\n// }),\n// Plot.text([v], {\n// text: [format(v)], // テキストとしてフォーマットした値を表示します\n// dx,\n// dy: -10,\n// frameAnchor,\n// textAnchor: \"middle\",\n// })\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":125,"value":"population = FileAttachment(\"230807_令和4年度_寄付金受け入れ額_merged.csv\")\n .csv()\n .then((data) => {\n const selectedColumn =\n selectedData === \"流入（寄付受け入れ額）\"\n ? \"金額_1_令和4年度に受け入れた寄附件数_金額\"\n : \"市町村民税_控除額_（円）_※推計値含む\"; // 条件を2つに集約\n\n return new Map(\n data.map(({ 市区町村団体コード, [selectedColumn]: value }) => [\n `${市区町村団体コード}`,\n +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":144,"value":"_4__cleaned1 = await FileAttachment(\"230807_令和4年度_寄付金受け入れ額_merged.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_4__cleaned1","database":"$undefined"},{"id":116,"value":"nation = topojson.feature(japan, japan.objects.country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"statemap = new Map(\n topojson\n .feature(japan, japan.objects.prefectures)\n .features.map((d) => [d.id, d])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"counties = topojson.feature(japan, japan.objects.municipalities)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"statemesh = topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 44:null