Built site for gh-pages

datapages · Nov 11, 2024 · 36fc358 · 36fc358
1 parent e25cf06
commit 36fc358
Show file tree

Hide file tree

Showing 11 changed files with 548 additions and 246 deletions.
diff --git a/.nojekyll b/.nojekyll
@@ -1 +1 @@
-de891082
+acab5ed0
diff --git a/about.html b/about.html
@@ -65,37 +65,17 @@
     "search-label": "Search"
   }
 }</script>
-<style>
-
-      .quarto-title-block .quarto-title-banner h1,
-      .quarto-title-block .quarto-title-banner h2,
-      .quarto-title-block .quarto-title-banner h3,
-      .quarto-title-block .quarto-title-banner h4,
-      .quarto-title-block .quarto-title-banner h5,
-      .quarto-title-block .quarto-title-banner h6
-      {
-        color: var(--bs-body-color);
-      }
-
-      .quarto-title-block .quarto-title-banner {
-        color: var(--bs-body-color);
-background: var(--bs-light);
-      }
-</style>
 
 
 </head>
 
 <body class="nav-fixed fullcontent">
 
 <div id="quarto-search-results"></div>
-  <header id="quarto-header" class="headroom fixed-top quarto-banner">
+  <header id="quarto-header" class="headroom fixed-top">
     <nav class="navbar navbar-expand-lg " data-bs-theme="dark">
       <div class="navbar-container container-fluid">
       <div class="navbar-brand-container mx-auto">
-    <a href="./index.html" class="navbar-brand navbar-brand-logo">
-    <img src="./images/logo.png" alt="" class="navbar-logo">
-    </a>
     <a class="navbar-brand" href="./index.html">
     <span class="navbar-title">Project Loon</span>
     </a>
@@ -145,7 +125,7 @@
   </a>
 </div>
   </div>
-  <div class="about-contents"><main class="content quarto-banner-title-block" id="quarto-document-content">
+  <div class="about-contents"><main class="content" id="quarto-document-content">
 <section id="project-loon" class="level2">
 <h2 data-anchor-id="project-loon">Project Loon</h2>
 <section id="abstract" class="level3">

diff --git a/analysis.html b/analysis.html
@@ -100,37 +100,17 @@
     "search-label": "Search"
   }
 }</script>
-<style>
-
-      .quarto-title-block .quarto-title-banner h1,
-      .quarto-title-block .quarto-title-banner h2,
-      .quarto-title-block .quarto-title-banner h3,
-      .quarto-title-block .quarto-title-banner h4,
-      .quarto-title-block .quarto-title-banner h5,
-      .quarto-title-block .quarto-title-banner h6
-      {
-        color: var(--bs-body-color);
-      }
-
-      .quarto-title-block .quarto-title-banner {
-        color: var(--bs-body-color);
-background: var(--bs-light);
-      }
-</style>
 
 
 </head>
 
 <body class="nav-fixed fullcontent">
 
 <div id="quarto-search-results"></div>
-  <header id="quarto-header" class="headroom fixed-top quarto-banner">
+  <header id="quarto-header" class="headroom fixed-top">
     <nav class="navbar navbar-expand-lg " data-bs-theme="dark">
       <div class="navbar-container container-fluid">
       <div class="navbar-brand-container mx-auto">
-    <a href="./index.html" class="navbar-brand navbar-brand-logo">
-    <img src="./images/logo.png" alt="" class="navbar-logo">
-    </a>
     <a class="navbar-brand" href="./index.html">
     <span class="navbar-title">Project Loon</span>
     </a>
@@ -166,7 +146,7 @@
 <!-- margin-sidebar -->
 
 <!-- main -->
-<main class="content quarto-banner-title-block" id="quarto-document-content">
+<main class="content" id="quarto-document-content">
 
 
 

diff --git a/countries-110m.json b/countries-110m.json
diff --git a/data.html b/data.html
@@ -66,37 +66,17 @@
     "search-label": "Search"
   }
 }</script>
-<style>
-
-      .quarto-title-block .quarto-title-banner h1,
-      .quarto-title-block .quarto-title-banner h2,
-      .quarto-title-block .quarto-title-banner h3,
-      .quarto-title-block .quarto-title-banner h4,
-      .quarto-title-block .quarto-title-banner h5,
-      .quarto-title-block .quarto-title-banner h6
-      {
-        color: var(--bs-body-color);
-      }
-
-      .quarto-title-block .quarto-title-banner {
-        color: var(--bs-body-color);
-background: var(--bs-light);
-      }
-</style>
 
 
 </head>
 
 <body class="nav-fixed fullcontent">
 
 <div id="quarto-search-results"></div>
-  <header id="quarto-header" class="headroom fixed-top quarto-banner">
+  <header id="quarto-header" class="headroom fixed-top">
     <nav class="navbar navbar-expand-lg " data-bs-theme="dark">
       <div class="navbar-container container-fluid">
       <div class="navbar-brand-container mx-auto">
-    <a href="./index.html" class="navbar-brand navbar-brand-logo">
-    <img src="./images/logo.png" alt="" class="navbar-logo">
-    </a>
     <a class="navbar-brand" href="./index.html">
     <span class="navbar-title">Project Loon</span>
     </a>
@@ -132,7 +112,7 @@
 <!-- margin-sidebar -->
 
 <!-- main -->
-<main class="content quarto-banner-title-block" id="quarto-document-content">
+<main class="content" id="quarto-document-content">
 
 
 

diff --git a/index.html b/index.html
diff --git a/search.json b/search.json
@@ -4,7 +4,7 @@
     "href": "index.html",
     "title": "Project Loon",
     "section": "",
-    "text": "Welcome to the Datapages site for Project Loon data! For more details on the dataset, please see the About tab. On this page, we offer several tools to select and visualize data from individual balloons. The raw data can be viewed and downloaded from the Data tab, and the Analysis tab offers other data access and analysis tools. We’re currently working on more tools to visualize and access the data, so stay tuned!\nIn this dataset, there are 385 balloon flights, split into 938 data segments. The figure on the right shows the number of unique flights that passed through each 5 degree latitude by 10 degree longitude grid cell.\n\n    \n    \n  \n\n\n\nimport {interval} from '@mootari/range-slider' // two ended slider\n\nd = transpose(data).map(d =&gt; ({ ...d, time: new Date(d.time) }))\ntd = d.filter(d =&gt; d.segment_id == segment)\n\n// find minimal radius circle that includes entire flight path\nminLon = d3.min(td.map(d =&gt; d.longitude))\nmaxLon = d3.max(td.map(d =&gt; d.longitude))\nminLat = d3.min(td.map(d =&gt; d.latitude))\nmaxLat = d3.max(td.map(d =&gt; d.latitude))\ncenter = [(minLon + maxLon) / 2, (minLat + maxLat) / 2]\ncorners = [[minLon, minLat], [minLon, maxLat], [maxLon, minLat], [maxLon, maxLat]]\ndist = d3.max(corners, corner =&gt; d3.geoDistance(center, corner))\nradius = dist * (180 / Math.PI)\ncircle = d3.geoCircle().center(center).radius(radius)()\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nviewof segment = Inputs.select(Array.from(new Set(d.map(d =&gt; d.segment_id))),\n                               {label: \"Segment ID\"})\n//viewof projection = Inputs.select([\"azimuthal-equidistant\", \"equal-earth\"],\n//                                  {label: \"Projection\"})\n\n\n\n\n\n\nworld = FileAttachment(\"countries-110m.json\").json()\nland = topojson.feature(world, world.objects.land)\n\nviewof map_world = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  projection: { type: \"equal-earth\" },\n  marks: [\n    //Plot.frame(),\n    Plot.sphere(),\n    Plot.graticule(),\n    Plot.geo(land, {fill: \"lightgrey\"}),\n    Plot.dot(td.slice(1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 1, stroke: \"black\", strokeOpacity: 0.2,\n    }),\n    Plot.dot(td.slice(0, 1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 3, stroke: \"red\", strokeOpacity: 1, symbol: \"plus\"\n    }),\n    Plot.dot(td.slice(td.length - 1, td.length), {\n      x: \"longitude\", y: \"latitude\",\n      r: 3, stroke: \"red\", strokeOpacity: 1, symbol: \"times\"\n    })\n  ],\n})\n\nviewof map_zoom = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  projection: { type: \"azimuthal-equidistant\", domain: circle },\n  marks: [\n    Plot.frame(),\n    Plot.graticule(),\n    Plot.geo(land, {fill: \"lightgrey\"}),\n//    Plot.dot(transpose(cor), {\n//      x: \"longitude\", y: \"latitude\",\n//      r: 3, stroke: \"blue\", //strokeOpacity: 0.2,\n//    }),\n    Plot.dot(td.slice(1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 1, stroke: \"black\", strokeOpacity: 0.2,\n    }),\n    Plot.dot(td.slice(0, 1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 6, stroke: \"red\", strokeOpacity: 1, symbol: \"plus\"\n    }),\n    Plot.dot(td.slice(td.length - 1, td.length), {\n      x: \"longitude\", y: \"latitude\",\n      r: 6, stroke: \"red\", strokeOpacity: 1, symbol: \"times\"\n    })\n  ],\n})\nviewof scatter_alt = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Altitude (meters)\" },\n  marks: [\n    Plot.dot(td, { x: \"time\", y: \"altitude\", r: 0.5 }),\n  ]\n})\n\nwinds = new Map([[\"Zonal (east-west)\", \"wind_u\"],\n                 [\"Meridional (north-south)\", \"wind_v\"]])\nviewof y_wind = Inputs.select(winds, {label: \"Wind direction\"})\n\nviewof scatter_wind = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Velocity (meters/second)\" },\n  marks: [\n    Plot.dot(td, { x: \"time\", y: y_wind, r: 0.5 }),\n  ]\n})\n\nfluxes = new Map([[\"East\", \"flux_east\"], [\"West\", \"flux_west\"],\n                  [\"North\", \"flux_north\"], [\"South\", \"flux_south\"]])\nviewof y_flux = Inputs.select(fluxes, {label: \"Flux direction\"})\n\nviewof scatter_flux = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Flux (pascals)\", transform: (f) =&gt; f * 1000 },\n  marks: [\n    Plot.dot(td, { x: \"time\", y: y_flux, r: 0.5 }),\n  ]\n})"
+    "text": "Welcome to the datapage for Project Loon data! For more details on the dataset, please see the About tab. On this page, we offer several tools to select and visualize data from individual balloons. The raw data can be viewed and downloaded from the Data tab, and the Analysis tab offers other data access and analysis tools. We’re currently working on more tools to visualize and access the data, so stay tuned!\nIn this dataset, there are 385 balloon flights, split into 938 data segments. The figure on the right shows the number of unique flights that passed through each 5 degree latitude by 10 degree longitude grid cell.\n\n    \n    \n  \n\n\n\n\nimport {interval} from '@mootari/range-slider' // two ended slider\ninterval_format = ([start, end]) =&gt; `[${start}, ${end}]`\n\nseasons = [\"spring\", \"summer\", \"fall\", \"winter\"]\n\n// all segments\ns = transpose(segments)\n\n// all segments' data\nd = transpose(data).map(d =&gt; ({ ...d, time: new Date(d.time) }))\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nns = Inputs.text().classList[0]\n\n// custom css to override some ojs defaults for inputs\nhtml`&lt;style&gt;\n\n  .${ns} {\n    --label-width: 70px;\n  }\n\n  .${ns} div label {\n    background-color: #f4f4f4;\n    padding: 0.25rem 0.5rem;\n    border-radius: 0.5rem;\n    margin-right: 0.25rem;\n    width: auto;\n  }\n  \n  .${ns} div label:hover,\n  .${ns} div label:active,\n  .${ns} div label:focus {\n    background-color: #cdecff;\n  }\n  \n  .${ns} div input[type=\"number\"] {\n    background-color: #f4f4f4;\n    padding: 0.25rem 0.5rem;\n    border-radius: 0.5rem;\n    flex-shrink: 3;\n    border: none;\n  }\n  \n  .${ns} select {\n    background-color: #f4f4f4;\n    border: none;\n    border-radius: 0.5rem;\n    padding: 0.25rem 0.5rem;\n    width: auto;\n  }\n}\n&lt;/style&gt;`\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nUse these filters to narrow down the list of segments, and then select an individual segment from this list below to visualize its trajectory and telemetry.\n\n\n// filter by season(s)\nviewof season = Inputs.checkbox(seasons, {value: seasons, label: \"Season (astronomical)\"})\n\n\n\n\n\n\n\n// filter by range of longitudes\nviewof longitude_range = interval([-180, 180], {\n  step: 1, label: \"Longitudes\", width: \"80%\", format: interval_format\n})\n\n\n\n\n\n\n\n// filter by range of latitudes\nviewof latitude_range = interval([-90, 90], {\n  step: 1, label: \"Latitudes\", width: \"80%\", format: interval_format\n})\n\n\n\n\n\n\n\n// filter by range of durations\nviewof duration_range = interval([0, 100], {\n  step: 1, label: \"Duration (days)\", width: \"80%\", format: interval_format\n})\n\n\n\n\n\n\n\n\nsf = s.filter(d =&gt; season.some(se =&gt; d.season.includes(se)))\n      .filter(d =&gt; d.longitude_min &lt;= longitude_range[1] &\n                   d.longitude_max &gt;= longitude_range[0])\n      .filter(d =&gt; d.latitude_min &lt;= latitude_range[1] &\n                   d.latitude_max &gt;= latitude_range[0])\n      .filter(d =&gt; d.duration &gt;= duration_range[0] &\n                   d.duration &lt;= duration_range[1])\n\n// filtered segments' IDs\nsf_id = sf.map(d =&gt; d.segment_id)\n\n// filtered segments' data\ndf = d.filter(d =&gt; sf_id.includes(d.segment_id))\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nland = FileAttachment(\"topo/ne_110m_land.json\").json()\nocean = FileAttachment(\"topo/ne_110m_ocean.json\").json()\n\nland_color = \"wheat\"\nocean_color = \"#8398aa\"\n\n// map -- globe\nviewof map_globe = Plot.plot({\n  width: 400,\n  projection: {type: \"orthographic\", rotate: [-longitude, -latitude]},\n  marks: [\n    Plot.sphere(),\n    Plot.graticule(),\n    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),\n    Plot.geo(land, {fill: land_color}),\n    Plot.line(df, {\n      x: \"longitude\", y: \"latitude\", z: \"segment_id\",\n      r: 0.8, stroke: \"grey\", strokeOpacity: 0.8,\n    }),\n  ]\n})\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nviewof longitude = Inputs.range([-180, 180], {label: \"Longitude\", step: 1, value: -30})\nviewof latitude = Inputs.range([-90, 90], {label: \"Latitude\", step: 1, value: 0})\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\ndg = d3.group(df, d =&gt; d.segment_id)\n\nviewof ds = Inputs.select(dg, {\n  value: dg.get(112),\n  format: ([k, v]) =&gt; `Segment ${k} (Flight ${v[0].flight_id})`\n})\nviewof map_world = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  projection: { type: \"equirectangular\" },\n  marks: [\n    //Plot.sphere(),\n    Plot.frame(),\n    Plot.graticule(),\n    Plot.geo(land, {fill: \"lightgrey\"}),\n    Plot.line(ds, {\n      x: \"longitude\", y: \"latitude\",\n      r: 1, stroke: \"black\", strokeOpacity: 0.2,\n    }),\n    Plot.dot(ds.slice(0, 1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 3, stroke: \"red\", strokeOpacity: 1, symbol: \"plus\"\n    }),\n    Plot.dot(ds.slice(ds.length - 1, ds.length), {\n      x: \"longitude\", y: \"latitude\",\n      r: 3, stroke: \"red\", strokeOpacity: 1, symbol: \"times\"\n    })\n  ],\n})\n\n// find minimal radius circle that includes entire flight path\nminLon = d3.min(ds.map(d =&gt; d.longitude))\nmaxLon = d3.max(ds.map(d =&gt; d.longitude))\nminLat = d3.min(ds.map(d =&gt; d.latitude))\nmaxLat = d3.max(ds.map(d =&gt; d.latitude))\ncenter = [(minLon + maxLon) / 2, (minLat + maxLat) / 2]\ncorners = [[minLon, minLat], [minLon, maxLat], [maxLon, minLat], [maxLon, maxLat]]\ndist = d3.max(corners, corner =&gt; d3.geoDistance(center, corner))\nradius = dist * (180 / Math.PI)\ncircle = d3.geoCircle().center(center).radius(radius)()\n\n// map -- zoomed in azimuthal\nviewof map_zoom = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  projection: { type: \"azimuthal-equidistant\", domain: circle },\n  marks: [\n    Plot.frame(),\n    Plot.graticule(),\n    Plot.geo(land, {fill: \"lightgrey\"}),\n    Plot.line(ds, {\n      x: \"longitude\", y: \"latitude\",\n      r: 1, stroke: \"black\", strokeOpacity: 0.2,\n    }),\n    Plot.dot(ds.slice(0, 1), {\n      x: \"longitude\", y: \"latitude\",\n      r: 6, stroke: \"red\", strokeOpacity: 1, symbol: \"plus\"\n    }),\n    Plot.dot(ds.slice(ds.length - 1, ds.length), {\n      x: \"longitude\", y: \"latitude\",\n      r: 6, stroke: \"red\", strokeOpacity: 1, symbol: \"times\"\n    })\n  ],\n})\nviewof scatter_alt = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Altitude (meters)\" },\n  marks: [\n    Plot.dot(ds, { x: \"time\", y: \"altitude\", r: 0.5 }),\n  ]\n})\n\n// timeseries -- winds\nwinds = new Map([[\"Zonal (east-west)\", \"wind_u\"],\n                 [\"Meridional (north-south)\", \"wind_v\"]])\nviewof y_wind = Inputs.select(winds, {label: \"Wind\"})\n\nviewof scatter_wind = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Velocity (meters/second)\" },\n  marks: [\n    Plot.dot(ds, { x: \"time\", y: y_wind, r: 0.5 }),\n  ]\n})\n\n// timeseries -- fluxes\nfluxes = new Map([[\"Eastward\", \"flux_east\"], [\"Westward\", \"flux_west\"],\n                  [\"Northward\", \"flux_north\"], [\"Southward\", \"flux_south\"]])\nviewof y_flux = Inputs.select(fluxes, {label: \"Flux\"})\n\nviewof scatter_flux = Plot.plot({\n  style: { fontFamily: \"var(--sans-serif)\" },\n  width: 900,\n  height: 200,\n  inset: 8,\n  grid: true,\n  y: { label: \"Flux (millipascals)\", transform: (f) =&gt; Math.abs(f * 1000) },\n  marks: [\n    Plot.dot(ds, { x: \"time\", y: y_flux, r: 0.5 }),\n  ]\n})"
   },
   {
     "objectID": "about.html",

diff --git a/site_libs/bootstrap/bootstrap.min.css b/site_libs/bootstrap/bootstrap.min.css
diff --git a/sitemap.xml b/sitemap.xml
@@ -2,18 +2,18 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://datapages.github.io/project-loon/index.html</loc>
-    <lastmod>2024-11-08T18:37:12.517Z</lastmod>
+    <lastmod>2024-11-11T23:56:29.250Z</lastmod>
   </url>
   <url>
     <loc>https://datapages.github.io/project-loon/data.html</loc>
-    <lastmod>2024-11-08T18:37:12.481Z</lastmod>
+    <lastmod>2024-11-11T23:56:29.214Z</lastmod>
   </url>
   <url>
     <loc>https://datapages.github.io/project-loon/about.html</loc>
-    <lastmod>2024-11-08T18:37:12.481Z</lastmod>
+    <lastmod>2024-11-11T23:56:29.214Z</lastmod>
   </url>
   <url>
     <loc>https://datapages.github.io/project-loon/analysis.html</loc>
-    <lastmod>2024-11-08T18:37:12.481Z</lastmod>
+    <lastmod>2024-11-11T23:56:29.214Z</lastmod>
   </url>
 </urlset>