31:T839,{ let container = html`

`; yield container; let coordLabelContainer = html`

`; let coordLabelLngRow = html`

`; coordLabelLngRow.append(html`

lng

`); let coordLabelLng = html`

`; coordLabelLngRow.append(coordLabelLng); let coordLabelLatRow = html`

`; coordLabelLatRow.append(html`

lat

`); let coordLabelLat = html`

`; coordLabelLatRow.append(coordLabelLat); coordLabelContainer.appendChild(coordLabelLatRow); coordLabelContainer.appendChild(coordLabelLngRow); container.appendChild(coordLabelContainer); const map = new mapboxgl.Map({ container, style: "mapbox://styles/sorami/cl72s0b9r006i14nxsv90srxe", center: [140, 37], zoom: 3.5, projection: "globe" }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); const selectedCells = []; map.on("load", () => { showCoordLabel(map.getCenter().wrap()); map.addSource("graticule", { type: "geojson", data: graticuleGeoJSON }); map.addLayer({ id: "graticule", type: "line", source: "graticule", paint: { "line-color": "#fff", "line-opacity": 0.3 } }); }); map.on("mousemove", (e) => { showCoordLabel(e.lngLat); }); function showCoordLabel(lngLat) { const decimal = 1; const lng = Math.round(lngLat.lng * (10 * decimal)) / (10 * decimal); const lat = Math.round(lngLat.lat * (10 * decimal)) / (10 * decimal); coordLabelLng.innerHTML = `${lng}°`; coordLabelLat.innerHTML = `${lat}°`; } invalidation.then(() => map.remove()); }32:T77a,latAnnotations = { if (!latAnnotation) { return []; } const annotations = [ // text in the circle for >=950k cities Plot.text( municipalities, Plot.dodgeX({ filter: (d) => d.population >= 950_000, y: "latitude", r: "population", fill: "white", text: (d) => (d.population / 1e5).toFixed() / 10 + "m", fontSize: 8, anchor: "middle" }) ), // quantiles Plot.text(latQuantiles, { y: "y", x: 0.01, text: "text", frameAnchor: "left", fontSize: 10, fontStyle: "italic", fontWeight: "bold" }), // explanations of some cities Plot.text(latParagraphs, { y: "y", x: 0.01, text: "text", frameAnchor: "left", fontSize: 10 }), // prefecture legend Plot.dot(prefectures, { y: "latitude", x: 1, r: 3, fill: "name", frameAnchor: "right" }), Plot.text(prefectures, { y: "latitude", x: 0.99, text: "name_romaji", frameAnchor: "right", fontSize: 8 }), // extreme points Plot.ruleY([45.557778], { x: 0.75, strokeOpacity: 0.1 }), Plot.text( ["Northernmost point: 45°33′28″N, Iturup island (択捉島), disputed"], { x: 1, y: 45.557778, frameAnchor: "right" } ), Plot.ruleY([24.049806], { x: 0.75, strokeOpacity: 0.1 }), Plot.text( [ "Southernmost point (excl. uninhabited islands): 24°2′59.3″N, Hateruma island (波照間島)" ], { x: 1, y: 24.049806, frameAnchor: "right" } ), Plot.ruleY([20.425278], { x: 0.75, strokeOpacity: 0.1 }), Plot.text(["Southernmost point: 20°25′31″N, Okinotori island (沖ノ鳥島)"], { x: 1, y: 20.425278, frameAnchor: "right" }) ]; return annotations; }33:T473,latParagraphs = [ { text: "Sapporo (札幌) is the largest city on Hokkaidō,\nthe second-largest island of Japan.\nIt's the largest city north of Tokyo.", y: 43.061972 }, { text: "Sendai (仙台) is the largest city in the Tōhoku region.", y: 38.268008 }, { text: "The Greater Tokyo Area is the most populous metropolitan area in the world.\nThe Kantō region encompasses seven prefectures,\nand one third of the country's population (42 million) lives there.", y: 35.69463508695652 }, { text: "Nagoya (名古屋) is the largest city in the Chūbu region.\nIt's the second-largest city outside the Greater Tokyo Area.", y: 35.181433 }, { text: "Ōsaka (大阪) is the largest city in the Kansai region.\nIt's the largest city outside the Greater Tokyo Area.", y: 34.693891 }, { text: "Fukuoka (福岡) is the largest city on Kyūshū,\nthe third-largest island of Japan.", y: 33.590313 }, { text: "Naha (那覇) is the largest city in Okinawa,\nthe southernmost and westernmost prefecture.\nThe prefecture is composed of many islands.", y: 26.212295 } ]34:T6bd,lonAnnotations = { if (!lonAnnotation) { return []; } const annotations = [ Plot.text( municipalities, Plot.dodgeY({ filter: (d) => d.population >= 950_000, x: "longitude", r: "population", fill: "white", text: (d) => (d.population / 1e5).toFixed() / 10 + "m", fontSize: 8, anchor: "middle" }) ), Plot.dot(prefectures, { x: "longitude", y: 0.1, r: 3, fill: "name", frameAnchor: "top" }), Plot.text(prefectures, { x: "longitude", y: 0.11, rotate: 90, text: "name_romaji", frameAnchor: "left", fontSize: 8 }), Plot.ruleX([122.9325], { strokeOpacity: 0.1 }), Plot.text( ["Westernmost point: \n 122°55′57″E, \n Yonaguni island \n (与那国島)"], { x: 122.9325, y: 0.99, fontSize: 8, frameAnchor: "bottom" } ), Plot.ruleX([135.0], { strokeOpacity: 0.1 }), Plot.text(["Japan Standard Time Meridian (135°E)"], { x: 135.0, y: 0.99, fontSize: 8, frameAnchor: "bottom" }), Plot.ruleX([145.817222], { strokeOpacity: 0.1 }), Plot.text( [ "Easternmost point, open to public:\n145°49′2″E\nCape Nosappu\n(納沙布岬)" ], { x: 145.817222, y: 0.99, fontSize: 8, frameAnchor: "bottom" } ), Plot.ruleX([153.986389], { strokeOpacity: 0.1 }), Plot.text( ["Easternmost point:\n153°59′11″E\nMinamitori island\n(南鳥島)"], { x: 153.986389, y: 0.99, fontSize: 8, frameAnchor: "bottom" } ) ]; return annotations; }35:[{"id":"e5bdb7b667ecbb70fdafc934fdfa2a7fc0fb685050ca397f76b58e0fdceee030a55b326ee7876d4335aa1f37504bb3de4abaf1ca9011a5be501ec47228adf025","href":"https://static.observableusercontent.com/files/e5bdb7b667ecbb70fdafc934fdfa2a7fc0fb685050ca397f76b58e0fdceee030a55b326ee7876d4335aa1f37504bb3de4abaf1ca9011a5be501ec47228adf025","name":"prefectures@1.csv","type":"text/csv","lastModified":1660899679671.192,"size":1842},{"id":"f95427676a0a07f3529ae230bc09edd21ca080613e50d3fe58c67689f5817b2e75d6698f4729153e1a49b7566751ec48b2ac2aae7eca4075ec1c5aebb20df914","href":"https://static.observableusercontent.com/files/f95427676a0a07f3529ae230bc09edd21ca080613e50d3fe58c67689f5817b2e75d6698f4729153e1a49b7566751ec48b2ac2aae7eca4075ec1c5aebb20df914","name":"municipalities@1.csv","type":"text/csv","lastModified":1661058083664.64,"size":81908}] 2f:{"title":"Japanese from Hokkaido to Okinawa","cells":[{"id":0,"value":"# Japanese from Hokkaido to Okinawa\n## Population of Japanese cities plotted by their latitudes\n\nInspired by the following awesome notebooks:\n\n- [Californians from Oregon to Mexico](https://observablehq.com/@jwb/californians-from-oregon-to-mexico) by Jeffrey Baker\n- [New Yorkers from Canada to the Amboys](https://observablehq.com/@bmschmidt/new-yorkers-from-canada-to-the-amboys) by Benjamin Schmidt\n- [Dutch People from Eemshaven to Epen](https://observablehq.com/@julesblm/dutch-people-from-eemshaven-to-epen) & [Dutch People from Sluis to Schanze (Bad Nieuweschans)](https://observablehq.com/@julesblm/dutch-people-from-sluis-to-schanze-bad-nieuweschans) by Jules Blom\n\n***","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"Japan is a long and narrow country. In the north it faces Russian Far East, and in the south-west Taiwan.\n\nAccording to [Japan - Wikipedia](https://en.wikipedia.org/wiki/Japan), \n\n> Japan is the eleventh most populous country in the world, as well as one of the most densely populated and urbanized. About three-fourths of the country's terrain is mountainous, concentrating its population of 125.5 million on narrow coastal plains.","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"As of 2022, Japan is divided into 47 prefectures (*都道府県, todōfuken*), and they are further divided into 1,741 municipalities (*市区町村, shikuchōson*), including 23 special wards of Tokyo.\n\nBelow I plotted the municipalities by their latitude. The size of circle represents the population. They are colored by the prefectures. Hover over the circle to see a tooltip.\n\nYou can see that the population is highly concentrated in the middle.","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"viewof latChartHeigtht = Inputs.range([600, 9000], {\n value: 4000,\n step: 100,\n label: \"chart height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"viewof latAnnotation = Inputs.toggle({ label: \"annotation\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Plot.plot({\n height: latChartHeigtht,\n width: width,\n y: {\n label: \"↑ degrees latitude north\"\n },\n x: {\n domain: [0, 1],\n ticks: 0\n },\n marks: [\n Plot.dot(\n municipalities,\n Plot.dodgeX({\n y: \"latitude\",\n r: \"population\",\n title: (d) =>\n `${d.prefecture} ${\n d.municipality\n }\\npopulation: ${new Intl.NumberFormat(\"ja-JP\").format(\n d.population\n )}\\nlatitude: ${(d.latitude * 100).toFixed() / 100}`,\n fill: \"prefecture\",\n anchor: \"middle\"\n })\n ),\n latAnnotations\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"latQuantiles = [\n { text: \"↓ 95% lives south of here\", y: 40.599104 },\n { text: \"↓ 90% lives south of here\", y: 37.921869 },\n { text: \"↓ 80% lives south of here\", y: 36.238144 },\n { text: \"↓ 15% lives south of here\", y: 34.182556 },\n { text: \"↓ 5% lives south of here\", y: 32.845046 },\n { text: \"↓ 2% lives south of here\", y: 31.601932 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"## By longitude","pinned":false,"hidden":false,"mode":"md"},{"id":713,"value":"viewof lonChartWidth = Inputs.range([700, 1700], {\n value: width,\n step: 100,\n label: \"chart width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"viewof lonAnnotation = Inputs.toggle({ label: \"annotation\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"Plot.plot({\n height: 800,\n width: lonChartWidth,\n y: { domain: [1, 0], ticks: 0 },\n x: { label: \"→ degrees longitude east\" },\n marks: [\n lonAnnotations,\n Plot.dot(\n municipalities,\n Plot.dodgeY({\n x: \"longitude\",\n r: \"population\",\n title: (d) =>\n `${d.prefecture} ${\n d.municipality\n }\\npopulation: ${new Intl.NumberFormat(\"ja-JP\").format(\n d.population\n )}\\nlongitude: ${(d.longitude * 100).toFixed() / 100}`,\n fill: \"prefecture\",\n anchor: \"middle\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"## Data\n\nPer-municipality population data is from [e-Stat](https://www.e-stat.go.jp/en/), the portal site of official statistics of Japan. The numbers are from 2015 census, and the ones I used here include non-Japanese citizens in the area.\n\n[View Data | Municipality data | System of Social and Demographic Statistics(SSDS) | Search by areas | Portal Site of Official Statistics of Japan](https://www.e-stat.go.jp/en/regional-statistics/ssdsview/municipality)\n\nThe location of municipalities are represented by the latitude and longitude of their government office buildings. I have used the data prepared by [Amano Spatial Technology Institute](https://amano-tec.com/).\n\n[地方公共団体の位置データ Location Data of Local Governments in Japan - ASTI アマノ技研](https://amano-tec.com/data/localgovernments.html)\n\nSee the following notebook for the detail: [市区町村の人口と位置 / Population and location of Japanese cities](https://gist.github.com/sorami/32d54b5d8a11155e3a619ce333b5bba6)","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"municipalities = FileAttachment(\"municipalities@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"prefectures = FileAttachment(\"prefectures@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"import { graticuleGeoJSON } from \"@sorami/graticule-with-mapbox-maplibre-gl-js\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.9.1\");\n if (!gl.accessTokean) {\n gl.accessToken =\n \"pk.eyJ1Ijoic29yYW1pIiwiYSI6ImNsM3p0eHA1ZTBsZXQzZHB4Z2Exenk3MDgifQ.87C9c97Xi_0FVcYDX215rg\";\n const href = await require.resolve(\"mapbox-gl@2.9.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}