/* * US Energy Data Platform — shared styles * Load via: * Also add Google Fonts in : * * * ── Design decisions (JS-side constants to use in new charts) ── * Chart lines: stroke-width 1.5px, stroke-linecap 'butt', stroke-linejoin 'round' * Bar color: #c26b6b (muted red) — single color for all bars * Bar padding: scaleBand().padding(0.35) * Bar labels: entity font-weight '700', fill '#5b5b5b'; value font-size '12px', fill '#5b5b5b' * Axis domain: x-axis stroke '#999', y-axis domain removed * Axis ticks: font-size '12px', fill '#5b5b5b' * Grid: #line-chart .tick line (stroke:#999) + .grid line (dasharray 4,4, opacity 0.3) → subtle gray dashes. Never override with local CSS. * Scatter grid: override inline to #e8e8e8 / opacity 1 / no dash * Play speed: 400ms * Tooltips: use .tooltip-header / .tooltip-body / .tooltip-row / .tooltip-swatch / .tooltip-name / .tooltip-value * * ── Scatter chart design decisions ── * Dots: fill '#B22234', stroke '#7a1520', stroke-width 0.5, opacity 0.8, radius 5 * Hover dot: radius 7, opacity 1 * Selected dot: opacity 0.9, radius 6 (when state picker active) * Faded dot: opacity 0.07, radius 4 (non-selected states) * Grid: stroke #e8e8e8, stroke-opacity 1, no dasharray — set inline to override shared default * Zero lines: .zero-line — stroke #aaa, no dash * Labels: .scatter-label — 10.5px, paint-order stroke halo (white 2.5px) * Label overlap: greedy left-to-right via getBBox(), pad 3px; hidden labels revealed on hover * State picker: use .state-picker-wrapper / .state-picker-btn / .state-picker-panel (see below) */ * { box-sizing: border-box; } body { font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; color: #333; line-height: 1.6; } /* ── Outer card ── */ .container { max-width: min(1120px, var(--card-width)); margin: 40px auto; background: white; border: 1px solid #d9d9d9; border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.08); display: flex; flex-direction: column; } /* ── Embedded overrides ── */ /* Height of the plotting area. Was a flat 600px, which made the chart card 873px tall on every screen — taller than the visible area of any laptop, so the frame filled the window and still needed a scroll to see the footer and timeline. Now it tracks the window: 400px is the chrome around the plot (site header, title, view tabs, timeline, footer bar) plus a little breathing room, so the whole card lands inside the viewport. Clamped so it never gets too cramped to read on a short window, and never exceeds the original 600px on a tall one — large displays look exactly as before. Embeds override both rules below and are unaffected; charts read clientHeight at draw time and the shared resize handler redraws them, so this needs no per-chart change. */ :root { --chart-height: clamp(320px, calc(100vh - 380px), 600px); /* The frame's width tracks its height so the card scales as a whole rather than just getting shorter. 1.867 is the original 1120:600 proportion, so a tall window renders exactly the 1120x600 card as before and a short one gets the same shape, smaller. Shortening height alone left the map — which holds a 1.6:1 aspect and so scales to whichever side binds — shrinking inside a frame that stayed full width, turning 159px of slack into 607px. */ --card-width: clamp(1000px, calc(var(--chart-height) * 1.867 + 40px), 1120px); } body.embedded { padding: 0; background: transparent; } body.embedded .site-header { display: none; } body.embedded .footer { display: none; } body.embedded .container { max-width: 100%; margin: 0; border: none; border-radius: 0; box-shadow: none; height: 100vh; overflow: hidden; } body.embedded h1 { cursor: pointer; } body.embedded h1:hover { text-decoration: underline; } body.embedded .chart-body { overflow: hidden; } body.embedded .view-container { height: 100%; min-height: 0; } body.embedded .marimekko-view { height: 100% !important; } /* ── Header ── */ .chart-header { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 10px; border-bottom: 1px solid #e8e8e8; } .chart-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } h1 { margin: 0 0 3px 0; color: #222; font-size: 22px; font-family: 'Inter', sans-serif; font-weight: 700; line-height: 1.2; } .chart-logo { height: 22px; width: auto; opacity: 0.75; flex-shrink: 0; margin-top: 4px; } /* House style: logo lives in the footer (bottom-left), not the header. */ .chart-header-top .chart-logo { display: none; } .chart-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 20px 10px; } .footer-logo { height: 13px; width: auto; opacity: 0.7; flex-shrink: 0; } /* Funder credit sits beside the IFP mark. The two logos are set to the same height rather than the same width: trimmed of its canvas padding, the Arnold Ventures lockup is 3.39:1 against IFP's 3.46:1, so equal height gives them near-equal width and equal visual weight. A hairline rule keeps them reading as two marks rather than one lockup. */ .footer-logos { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .footer-logo-sep { width: 1px; height: 13px; background: #dcdcdc; flex-shrink: 0; } /* 15px, not the 13px IFP uses. Arnold Ventures is a stacked two-line lockup, so at equal height its type sets about half the size of IFP's single line and reads as fine print. 15px brings the wordmark back to a comparable size while keeping it from outweighing the publisher's own mark, which 17px did. */ /* Opacity 0.55, not the 0.7 IFP uses. The IFP artwork is dark grey (luminance 55/255) while the Arnold Ventures mark is pure black, so at matched opacity AV renders visibly heavier. On white, IFP composites to about 115; 0.55 puts AV at the same tone, so neither mark draws the eye first. */ .footer-logo-av { height: 15px; opacity: 0.55; } .subtitle { color: #777; font-size: 13px; font-weight: 400; margin: 0; } /* ── Source selector ── */ .source-selector { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px; } /* font-family is explicit: without it this inherits DM Sans from the page stylesheet while the .source-select beside it is Lato, so the label rendered noticeably lighter than its own dropdown — and than the same label on charts that set Lato inline. */ .control-label { font-size: 12px; color: #888; white-space: nowrap; font-family: 'Lato', sans-serif; } .source-select { padding: 5px 8px; font-size: 13px; font-family: 'Lato', sans-serif; border: 1px solid #d3d3d3; border-radius: 3px; background: white; color: #333; cursor: pointer; outline: none; } .source-select:hover { border-color: #999; } .source-select:focus { border-color: #3c4e66; box-shadow: 0 0 0 2px rgba(60,78,102,0.1); } /* ── Chart body ── */ .chart-body { position: relative; flex: 1; display: flex; padding: 6px 0 0; } .view-container { position: relative; height: var(--chart-height); flex: 1; min-width: 0; padding: 0 20px; } /* ── State panel (full page, right side) ── */ .state-panel { width: 200px; flex-shrink: 0; border-left: 1px solid #e8e8e8; display: flex; flex-direction: column; height: var(--chart-height); overflow: hidden; } .state-panel.hidden { display: none; } body.embedded .state-panel { display: none; } .state-panel-title { font-size: 10px; font-weight: 700; color: #bbb; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 12px 6px; flex-shrink: 0; } .state-panel-search-wrapper { padding: 0 8px 4px; flex-shrink: 0; } .state-panel-list { flex: 1; overflow-y: auto; min-height: 0; } .state-panel-clear { padding: 5px 12px; font-size: 11px; color: #bbb; cursor: pointer; border-bottom: 1px solid #f2f2f2; user-select: none; flex-shrink: 0; } .state-panel-clear:hover { color: #d73027; background: #fafafa; } .state-panel .state-checkbox-item { padding: 4px 10px; } .state-panel .state-search { font-size: 11px; padding: 4px 7px; } /* ── Map view ── */ .map-view { height: 100%; display: flex; flex-direction: column; } .map-view.hidden { display: none; } #map { width: 100%; flex: 1; min-height: 0; overflow: hidden; } #map svg { width: 100%; height: 100%; display: block; } .map-state { stroke: #d0d0d0; stroke-width: 0.8px; cursor: pointer; transition: stroke-width 0.2s; } .map-state:hover { stroke: #333; stroke-width: 2px; } /* ── Tooltip (OWID style) ── */ .tooltip { position: fixed; background: white; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); font-size: 13px; font-family: 'Lato', sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; min-width: 160px; max-width: 260px; } .tooltip-header { background: #f7f7f7; padding: 6px 12px; font-weight: 700; font-size: 13px; color: #2d2d2d; border-bottom: 1px solid #e8e8e8; border-radius: 4px 4px 0 0; } .tooltip-body { padding: 6px 12px 8px; } .tooltip-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; } .tooltip-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .tooltip-name { flex: 1; color: #555; } .tooltip-value { font-weight: 600; color: #2d2d2d; font-variant-numeric: tabular-nums; margin-left: 12px; } .tooltip-no-data { font-size: 11px; color: #aaa; margin-top: 5px; font-style: italic; } .tooltip-divider { border: none; border-top: 1px solid #e8e8e8; margin: 4px 0; } .value-increase { color: #1a9850; } .value-decrease { color: #d73027; } /* ── Legend ── */ .legend { padding: 6px 0 2px; border-top: 1px solid #e0e0e0; margin-top: 4px; } .legend-title { font-size: 12px; color: #767676; margin-bottom: 6px; text-align: center; } .legend-scale { display: flex; flex-direction: column; align-items: center; gap: 0; } /* Edge-label strip legend (all map charts) */ .legend-strip { display: flex; width: 490px; } .legend-strip-segment { flex: 1; height: 14px; border: 1px solid #fff; cursor: pointer; transition: opacity 0.15s; } .legend-tick-row { width: 490px; position: relative; height: 18px; margin-top: 2px; } .legend-tick-label { position: absolute; transform: translateX(-50%); font-size: 11px; color: #767676; white-space: nowrap; } /* ── View tabs row (tabs + optional embedded state selector) ── */ .view-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .view-tabs { display: flex; gap: 2px; } .embedded-state-selector { display: none; } body.embedded .embedded-state-selector.visible { display: flex; align-items: center; } .embedded-state-selector .state-multiselect { width: 170px; } /* ── View tabs ── */ .view-tab { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: none; background: transparent; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: 'Lato', sans-serif; color: #999; transition: all 0.15s; } .view-tab:hover { background: #efefef; color: #555; } .view-tab.active { background: #e8edf3; color: #3c4e66; font-weight: 600; } .view-tab svg { flex-shrink: 0; } /* ── Line chart view ── */ /* * Canonical line chart grid/axis style — do NOT override these in individual charts. * Grid: .grid line gets stroke:#999 (from #line-chart .tick line) + dasharray/opacity below → subtle gray dashes * X-axis: domain line #999, tick marks #999 (size 4 in JS); y-axis domain removed, tickSize(0) in JS */ .chart-view { display: none; } .chart-view.active { display: flex; flex-direction: column; height: 100%; } #line-chart { width: 100%; flex: 1; min-height: 0; } .line-label { font-size: 12px; font-weight: 500; } /* House style: line charts show smooth lines with no persistent per-point markers. The hover read-out dot/crosshair is a separate element and is unaffected. (Connected scatterplots do not use .chart-dot, so their points remain visible.) */ .chart-dot { display: none; } #line-chart .tick text { font-family: 'Lato', sans-serif; font-size: 12px; fill: #5b5b5b; } #line-chart .domain { stroke: #999; } #line-chart .tick line { stroke: #999; } .grid line { stroke-dasharray: 4,4; shape-rendering: crispEdges; stroke-opacity: 0.3; } .grid path { stroke-width: 0; } /* ── Bar chart view ── */ .bar-view { display: none; } .bar-view.active { display: flex; flex-direction: column; height: 100%; } #bar-chart { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } #bar-chart svg { display: block; } #bar-chart .tick text { font-family: 'Lato', sans-serif; font-size: 12px; fill: #5b5b5b; } #bar-chart .domain { stroke: #999; } #bar-chart .tick line { stroke: #999; } #bar-chart .bar-grid .tick line { stroke: #f2f2f2; } #bar-chart .bar-grid .domain { stroke: none; } /* ── State selector (dropdown, used in embedded mode) ── */ .state-multiselect { position: relative; width: 100%; max-width: 320px; } .state-multiselect-header { padding: 6px 10px; background: #f7f7f7; border: 1px solid #d3d3d3; border-radius: 3px; font-size: 12px; color: #5e5e5e; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .state-multiselect-header:hover { background: #f2f2f2; } .state-multiselect-header.expanded { border-radius: 3px 3px 0 0; } .state-multiselect-header-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .state-multiselect-header-arrow { flex-shrink: 0; font-size: 9px; color: #aaa; transition: transform 0.15s; } .state-multiselect-header.expanded .state-multiselect-header-arrow { transform: rotate(180deg); } .state-multiselect-container { max-height: 240px; overflow-y: auto; border: 1px solid #d3d3d3; border-top: none; border-radius: 0 0 3px 3px; background: white; padding: 4px 0; display: none; position: absolute; width: 100%; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .state-multiselect-container.expanded { display: block; } /* Group headings inside the state/region picker ("Regions (EIA)", "Grid operators (RTOs)"). Fifteen charts each carried their own copy of this rule in a local