fix console warning on the EIA example

Author: Fil

examples/eia/src/components/charts.js

@@ -16,9 +16,10 @@ function friendlyTypeName(d) {
 export function top5BalancingAuthoritiesChart(width, height, top5Demand, maxDemand) {
   return Plot.plot({
     marginTop: 8,
-    marginLeft: 250,
+    marginLeft: Math.min(width/2, 250),
     height: height - 4,
     width,
+    style: "overflow: hidden;",
     y: {label: null, tickSize: 0},
     x: {label: null, grid: true, tickSize: 0, tickPadding: 2, domain: [0, maxDemand / 1000], nice: true},
     marks: [

examples/eia/src/components/map.js

@@ -25,14 +25,15 @@ export function balancingAuthoritiesMap({
 }) {
   return Plot.plot({
     width,
-    height: width * 0.6,
+    height: width * 0.67,
     color: {
       ...color,
       transform: (d) => d / 100,
       label: "Change in demand (%) from previous hour"
     },
     projection: {
       type: "albers",
+      domain: nation,
       insetTop: 15
     },
     r: {
@@ -122,9 +123,10 @@ export function balancingAuthoritiesMap({
 export function balancingAuthoritiesLegend(width) {
   return Plot.plot({
     marginTop: 15,
-    width: Math.min(width - 30, 400),
+    marginRight: 80,
+    width,
     height: 60,
-    y: {axis: null},
+    y: {axis: null, domain: [0, 1]},
     marks: [
       Plot.raster({
         y1: 0,
@@ -136,14 +138,16 @@ export function balancingAuthoritiesLegend(width) {
       Plot.ruleX([-0.15, 0, 0.15], {insetBottom: -5}),
       Plot.axisX([-0.15, 0, 0.15], {tickFormat: format("+.0%"), tickSize: 0}),
       Plot.dot(["Generating only", "Unavailable"], {
-        x: [0.23, 0.4],
+        x: [0.26, 0.26],
+        y: [0.75, -.25],
         r: 5,
         dx: -8,
         fill: [colorGenerating, colorUnavailable],
         stroke: "grey"
       }),
       Plot.text(["Generating only", "Unavailable"], {
-        x: [0.23, 0.4],
+        x: [0.26, 0.26],
+        y: [0.75, -.25],
         textAnchor: "start"
       })
     ]

examples/eia/src/index.md

@@ -1,5 +1,6 @@
 ---
 theme: dashboard
+toc: false
 ---
 
 # U.S. electricity grid
@@ -170,7 +171,7 @@ function centerResize(render) {
     <h2>US electricity generation demand vs. day-ahead forecast (GWh)</h2>
     ${resize((width, height) => usGenDemandForecastChart(width, height, usDemandGenForecast, currentHour))}
   </div>
-  <div class="card grid-colspan-2">
+  <div class="card grid-colspan-2" style="min-height: 160px;">
     <h2>Neighboring country interchange (GWh)</h2>
     ${resize((width, height) => countryInterchangeChart(width, height, usDemandGenForecast, countryInterchangeSeries, currentHour))}
   </div>