31:Tc52,scatter_plot = { // サイズと余白 const width = 1152; const height = 450; const margin = { top: 80, right: 30, bottom: 40, left: 50 }; // スケール関数（x, y, 円の半径） const xScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d["1873年人口（千人）"])]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d["歴史（年）"])]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(data, (d) => 3)]) .nice() .range([0, 20]); // 軸関数 tickSizeで目盛りの線を反対方向に伸ばしている const xAxis = d3 .axisBottom() .scale(xScale) /*.ticks(5) .tickFormat(d3.utcFormat(data, (d) => d["1873年人口（千人）"]))*/ .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .tickSize(-(width - margin.left - margin.right)); // SVGの生成 const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("text") .attr("x", 40) .attr("y", 35) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("font-weight", "bold") .text("１８７３年の人口と花火大会の歴史"); svg .append("g") .append("text") .attr("x", 20) .attr("y", 60) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("歴史（年） "); svg .append("g") .append("text") .attr("x", 1000) .attr("y", 440) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("１８７３年の人口（千人）"); // 背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "blue") .attr("opacity", 0.1); // X,Y軸の生成 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // 円の生成 svg .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => xScale(d["1873年人口（千人）"])) .attr("cy", (d) => yScale(d["歴史（年）"])) .attr("r", (d) => rScale(0.1)) .attr("fill", "black") .attr("opacity", 0.5); // 軸の線を白色に svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg .append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d3.median(data, (d) => xScale(d["1873年人口（千人）"]))) .attr("y1", (d) => height) .attr("x2", d3.median(data, (d) => xScale(d["1873年人口（千人）"]))) .attr("y2", (d) => 0) .attr("stroke", "red") .attr("stroke-width", 2); return svg.node(); }32:Tbda,scatter_plot2 = { // サイズと余白 const width = 1152; const height = 450; const margin = { top: 80, right: 30, bottom: 40, left: 50 }; // スケール関数（x, y, 円の半径） const xScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => 4000)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d["歴史（年）"])]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(data, (d) => 3)]) .nice() .range([0, 20]); // 軸関数 tickSizeで目盛りの線を反対方向に伸ばしている const xAxis = d3 .axisBottom() .scale(xScale) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .tickSize(-(width - margin.left - margin.right)); // SVGの生成 const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("text") .attr("x", 40) .attr("y", 35) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("font-weight", "bold") .text("２０２１年の人口と花火大会の歴史"); svg .append("g") .append("text") .attr("x", 20) .attr("y", 60) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("歴史（年） "); svg .append("g") .append("text") .attr("x", 1000) .attr("y", 440) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("２０２１年の人口（千人）"); // 背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "blue") .attr("opacity", 0.1); // X,Y軸の生成 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // 円の生成 svg .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => xScale(d["2021年人口（千人）"])) .attr("cy", (d) => yScale(d["歴史（年）"])) .attr("r", (d) => rScale(0.1)) .attr("fill", "black") .attr("opacity", 0.5); // 軸の線を白色に svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg .append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d3.median(data, (d) => xScale(d["2021年人口（千人）"]))) .attr("y1", (d) => height) .attr("x2", d3.median(data, (d) => xScale(d["2021年人口（千人）"]))) .attr("y2", (d) => 0) .attr("stroke", "red") .attr("stroke-width", 2); return svg.node(); }33:T431,map3 = { const svg = d3.create("svg").attr("viewBox", [0, 0, 850, 680]); const projection = d3 .geoAzimuthalEqualArea() .center([138.5, 36 - 18 / 60]) .rotate([-138.5, -36 + 18 / 60]) .scale([1700]) .translate([2500, -1930]); const path = d3.geoPath(); // const path = d3.geoPath(projection); svg .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.5) .attr("d", path) //.attr("fill", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`) .attr("fill", (d, i) => color3(data.find((dd) => dd.id === +d.id)["人出（千人）"]/data.find((dd) => dd.id === +d.id)["2021年人口（千人）"]) ) .append("title") svg .append("path") .attr("stroke-width", 1) .attr("d", path(topojson.feature(japan, japan.objects.country))); return svg.node(); }34:[] 2f:{"title":"日本の花火文化はどのように広がったのか？","cells":[{"id":0,"value":"# 日本の花火文化はどのように広がったのか？","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"
\nみなさんは花火大会に参加したことがあるだろうか。日本には地元の人に親しまれるものや多くの観光客を集めるものなど様々な花火大会があり、今や日本の夏の風物詩となっている。では花火文化はどのように人々に浸透していったのだろうか。今回は花火大会の歴史と人出に注目して花火文化の広がりについて考える。\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"## 1.花火の発祥\n
日本の花火文化を調べる前に、まずは花火の発祥について解説する。\n

花火の原料となる火薬の発明については諸説あるものの、一般的には紀元前中国の錬丹術（薬づくり）によって生み出されたとされており、１２世紀ごろに火器などの軍事に利用されるようになったことでヨーロッパに伝わったといわれる。\n

その後１４世紀にはイタリアで観賞用としての役割を経たものの、日本へは、はじめ火器および「のろし」として１６世紀に火縄銃とともに伝わった。\n

日本で観賞用の花火が登場するのはさらに後の江戸時代のことである。\n

（ [日本煙火協会](http://www.hanabi-jpa.jp/)「花火入門」参考）\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"## 2.都道府県別花火大会の歴史\n
２項、３項では日本煙火協会ホームページ「花火大会スケジュール」に記載されている全国３６０の花火大会を対象に、「第１回からの経過年」・「例年の人出」を調査した結果を示す。","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"map = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 850, 680]);\n\n const projection = d3\n .geoAzimuthalEqualArea()\n .center([138.5, 36 - 18 / 60])\n .rotate([-138.5, -36 + 18 / 60])\n .scale([1700])\n .translate([2500, -1930]);\n\n const path = d3.geoPath();\n // const path = d3.geoPath(projection);\n\n svg\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n svg\n .selectAll(\".prefecture\")\n .data(topojson.feature(japan, japan.objects.prefectures).features)\n .join(\"path\")\n .classed(\"prefecture\", true)\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", path)\n //.attr(\"fill\", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`)\n .attr(\"fill\", (d, i) =>\n color(data.find((dd) => dd.id === +d.id)[\"歴史（年）\"])\n )\n .append(\"title\")\n\n svg\n .append(\"path\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path(topojson.feature(japan, japan.objects.country)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"上の図は各都道府県で一番古くから行われている花火大会の歴史を地図に示したもので、最も長い２４０年以上の区分に該当したのは、
東京都（両国の花火→隅田川花火大会）
三重県（熊野大花火大会）
岡山県（備中名物成羽愛宕大花火）
広島県（おのみち住吉花火まつり）
福岡県（水天宮奉納花火大会→筑後川花火大会）
の５都県となった。\n\nまた、戦後まもなく始まった花火大会は多く、８０年前の時点で花火大会が存在しなかった県のうち長崎県を除くすべての県でそれから４０年以内に誕生することとなった。\n\nそれでは歴史のある花火大会がある都道府県にはどのような関係があるのか。まず考えられるのは織田信長の存在である。１項で述べたように花火の火薬はもともと火縄銃とともに火器として日本に伝わった。その火縄銃を大きく活用した織田信長といえば現在の愛知県、岐阜県、滋賀県を拠点とした武将で、三重県を含めたこの地域に歴史ある花火大会が多いことと関係があるだろう。\n\nまた、東京都は観賞用花火が伝わった江戸時代の中心地で花火大会が始まるのも早かったと考えられる。\n\nしかし残りの岡山県、広島県、福岡県について考えられる理由を見つけることはできず、ひとつの仮説を立て、データを集めることにした。\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"## 仮説：「観賞用花火が日本に伝わった江戸時代当時の人口が多い都道府県ほど歴史のある花火大会がある」","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"図A","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"図B（比較）","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"※ここでは正確な記録のある中では最も古い１８７３年の人口を当時の人口と呼ぶものとする。\n

図Aは１８７３年人口（X軸）と歴史（Y軸）の、図Bは２０２１年人口（X軸）と歴史（Y軸）の散布図、赤線はそれぞれ人口の中央値である。\n\n１８７３年の人口について
\n岡山県１０位（現在２０位）
\n広島県４位（現在１２位）
\n福岡県７位（現在９位）
で全県今よりも相対的に栄えていたというのは予想通りであった。\n\nしかし図については図A図Bともに正の相関があり、図Aのほうが相関が強いように見えなくもないものの、大きな差はなく立証と言い切れる結果にはならなかった。\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"## 3.現在の花火大会","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"map2 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 850, 680]);\n\n const projection = d3\n .geoAzimuthalEqualArea()\n .center([138.5, 36 - 18 / 60])\n .rotate([-138.5, -36 + 18 / 60])\n .scale([1700])\n .translate([2500, -1930]);\n\n const path = d3.geoPath();\n // const path = d3.geoPath(projection);\n\n svg\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n svg\n .selectAll(\".prefecture\")\n .data(topojson.feature(japan, japan.objects.prefectures).features)\n .join(\"path\")\n .classed(\"prefecture\", true)\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", path)\n //.attr(\"fill\", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`)\n .attr(\"fill\", (d, i) =>\n color2(data.find((dd) => dd.id === +d.id)[\"人出（千人）\"])\n )\n .append(\"title\")\n\n svg\n .append(\"path\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path(topojson.feature(japan, japan.objects.country)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"それでは現在の花火文化はどうなっているのだろうか、各都道府県で一番人を集める花火大会の人出を地図に示した。\n\n現在日本で一番人出の多い花火大会は大阪府の天神祭奉納花火で例年約１３０万人を集める。\n
それに次ぐのが新潟県の長岡まつり大花火大会で２０１９年は過去最多１０８万人が訪れ、年々人気が高まっている。長岡まつり大花火大会は日本三大花火大会に数えられ、残る２つの秋田県「全国花火競技大会（大曲の花火）」、茨城県「土浦全国花火競技大会」もともに７５万人と国内トップクラスの客数であることが図からも読み取ることができる。\n\n一方歴史のところで名前の挙がった三重県、岡山県、広島県は人出に関しては目立っておらず、現在は東日本優勢であるようだ。","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"最後に本当に人気の花火大会は何なのか、このような図も作成してみた。
大勢の人が集まるのは当然人気であることの裏付けであるが、この図は都道府県を代表する花火大会の人出を総人口で割った数値で色分けしておりわざわざ時間をかけて見に行く人の多い、こちらもまた人気の花火大会を表しているといえる。\n\n先ほど紹介した長岡まつり大花火大会に全国花火競技大会（大曲の花火）、島根県の松江水郷祭湖上花火大会、山形県の山形大花火大会、山口県・福岡県の関門海峡花火大会などは本当に見に行く価値のある花火大会なのかもしれない。皆さんも機会があれば行ってみてはいかがだろうか。\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"## 4.まとめ","pinned":false,"hidden":false,"mode":"md"},{"id":712,"value":"
\nここまでの図から花火文化は尾張地域や東京、山陽地方、福岡などから始まり、戦後一気に全国に広まったことが分かった。\n\nここ２年は花火を楽しめない年が続き花火業界も苦しい時期だが、乗り越えた先にはきっとこれからも進化していく花火の未来があるだろう。\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"## 参考資料\n
\n[Wikipedia（日本の花火大会一覧）](https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E8%8A%B1%E7%81%AB%E5%A4%A7%E4%BC%9A%E4%B8%80%E8%A6%A7)\n\n[Wikipedia（過去の都道府県人口一覧）](https://ja.wikipedia.org/wiki/%E9%81%8E%E5%8E%BB%E3%81%AE%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%81%AE%E4%BA%BA%E5%8F%A3%E4%B8%80%E8%A6%A7)\n\n [日本煙火協会](http://www.hanabi-jpa.jp/)\n\n [Walkerplus（花火大会２０２１）](https://hanabi.walkerplus.com/)\n
　","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"## データ","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"japan = d3.json(\"https://unpkg.com/jpn-atlas@1/japan/japan.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"url_data= 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSBBe6iJY9qa-LMt8RacbGeNLJ_MngJvRPV2S8Y_DKiLfxXcwHzNwTcZ5P51ove8hVzbPnFVCxxS_B6/pub?output=tsv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = d3.tsv(url_data, cast)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"cast = d => {\n Object.keys(d).forEach(key => {\n if(!isNaN(+d[key]))d[key] = +d[key]\n })\n return d\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"legend = {\n const svg = d3.select(map)\n const g = svg.append('g')\n .classed('legend', true)\n\n // 凡例を追加\n g.selectAll('rect.legend')\n .data(color.domain())\n .enter()\n .append('rect')\n .attr('class', 'legend')\n .attr('x', 65)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i; })\n .attr('width', 20)\n .attr('height', 20)\n .attr('fill', function(d) { return color(d); });\n \n g.selectAll('text.legend')\n .data(color.domain())\n .enter()\n .append('text')\n .attr('x', 60)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i + 24; })\n .attr('font-size', 9)\n .attr('text-anchor', 'end')\n .text(function(d) { return d + '年'; });\n \n return g.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"legend2 = {\n const svg = d3.select(map2)\n const g = svg.append('g')\n .classed('legend', true)\n\n // 凡例を追加\n g.selectAll('rect.legend')\n .data(color2.domain())\n .enter()\n .append('rect')\n .attr('class', 'legend')\n .attr('x', 65)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i; })\n .attr('width', 20)\n .attr('height', 20)\n .attr('fill', function(d) { return color2(d); });\n \n g.selectAll('text.legend')\n .data(color2.domain())\n .enter()\n .append('text')\n .attr('x', 60)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i + 24; })\n .attr('font-size', 9)\n .attr('text-anchor', 'end')\n .text(function(d) { return d / 10 + '万人'; });\n \n return g.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"legend3 = {\n const svg = d3.select(map3)\n const g = svg.append('g')\n .classed('legend', true)\n\n // 凡例を追加\n g.selectAll('rect.legend')\n .data(color3.domain())\n .enter()\n .append('rect')\n .attr('class', 'legend')\n .attr('x', 65)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i; })\n .attr('width', 20)\n .attr('height', 20)\n .attr('fill', function(d) { return color3(d); });\n \n g.selectAll('text.legend')\n .data(color3.domain())\n .enter()\n .append('text')\n .attr('x', 60)\n .attr('y', function(d, i) { return 200 + (-1) * 20 * i + 24; })\n .attr('font-size', 9)\n .attr('text-anchor', 'end')\n .text(function(d) { return d ; });\n \n return g.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"color = d3\n .scaleThreshold()\n .domain([0,40,80,120,240])\n .range([\"hsl(240, 100%, 100%)\", \"hsl(240, 100%, 100%)\", \"hsl(240, 100%, 80%)\", \"hsl(240, 100%, 60%)\", \"hsl(240, 100%, 40%)\", \"hsl(240, 100%, 20%)\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"color2 = d3\n .scaleThreshold()\n .domain([0,200,400,600,1000])\n .range([\"hsl(0, 100%, 100%)\", \"hsl(0, 100%, 100%)\", \"hsl(0, 100%, 80%)\", \"hsl(0, 100%, 60%)\", \"hsl(0, 100%, 40%)\", \"hsl(0, 100%, 20%)\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"color3 = d3\n .scaleThreshold()\n .domain([0,0.1,0.2,0.3,0.4])\n .range([\"hsl(120, 100%, 100%)\", \"hsl(120, 100%, 100%)\", \"hsl(120, 100%, 80%)\", \"hsl(120, 100%, 60%)\", \"hsl(120, 100%, 40%)\", \"hsl(120, 100%, 20%)\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"height= width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"projection = d3.geoMercator()\n .scale(1500)\n .center([137, 34.5])\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"path = d3.geoPath()\n .projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"tooltip = d3.select('body').append('div')\n .attr('id', 'tooltip')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}