30:Ta8e,sparkline = { const h = height / 3; const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, h]) .attr('font-family', 'var(--sans-serif)'); svg .append('g') .call(xAxis) .attr("transform", `translate(0,${h - margin.bottom})`); svg .append('g') .call(minorXAxis) .attr("transform", `translate(0,${h - margin.bottom})`); // const highlighted = 'Hydroelectric Pumped Storage'; if (!highlighted) { svg .append('text') .text('Hover over one of the sources above to view it here') .attr('x', width / 2) .attr('y', h / 2) .attr('text-anchor', 'middle') .attr('fill', 'rgba(0, 0, 0, 0.25)') .attr('font-size', '30'); return svg.node(); } const sourceData = highlighted === 'Total Renewables' ? renewableTotals : data.filter(d => d.source === highlighted); const y = d3 .scaleLinear() .domain([ Math.min(0, Math.round(d3.min(sourceData, d => d.value))), Math.max(0.3, d3.max(sourceData, d => d.value)) ]) .nice() .range([h - margin.bottom, margin.top]); const line = d3 .line() .x(d => x(d.date)) .y(d => y(d.value)) .curve(d3.curveBasis); if (y.domain()[0] < 0) { svg .append('line') .attr('x1', margin.left + 6) .attr('x2', width - margin.right) .attr('transform', `translate(0,${y(0) + 0.5})`) .attr('stroke', 'black') .attr('stroke-dasharray', '6') .attr('stroke-width', 1); } svg .append('g') .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(formatTick)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy production, terawatt-hours") ); // the Bloomberg article shows this as GWh svg .append('g') .attr('stroke', 'rgba(0, 0, 0, 0.1)') .selectAll('line') .data(y.ticks()) .join('line') .attr('x1', margin.left) .attr('x2', width - margin.right) .attr('y1', y) .attr('y2', y); svg .append('g') .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).tickFormat(formatTick)) .call(g => g.select(".domain").remove()); svg .append('path') .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .style('stroke', d => colors[highlighted] || 'brightred') .style('pointer-events', 'none') .attr('d', line(sourceData, d => d.value)); return svg.node(); }31:T648,chart = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, height]) .attr('font-family', 'var(--sans-serif)'); svg .append('g') .call(xAxis) .attr("transform", `translate(0,${height - margin.bottom})`); svg .append('g') .call(xAxis) .attr("transform", `translate(0,${height - margin.bottom})`); svg .append('g') .call(minorXAxis) .attr("transform", `translate(0,${height - margin.bottom})`); svg.append('g').call(yAxis); svg .append('g') .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).tickFormat(formatTick)) .call(g => g.select(".domain").remove()); svg .append('g') .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .selectAll('path') .data(series) .join('path') .attr('data-name', d => d.name) .style('stroke', d => colors[d.name] || 'brightred') .style('stroke-dasharray', d => (d.name.includes('Total') ? '1.5, 3' : '')) .style('pointer-events', 'none') .attr('d', d => line(d.values)); svg .append('g') .selectAll('path') .data(series) .join('path') .attr('stroke', 'transparent') .attr('fill', 'none') .attr('stroke-width', 20) .attr('d', d => line(d.values)); svg .append('g') .attr('stroke', 'rgba(0, 0, 0, 0.1)') .selectAll('line') .data(y.ticks(20)) .join('line') .attr('x1', margin.left) .attr('x2', width - margin.right) .attr('y1', y) .attr('y2', y); return svg.node(); }32:T5f5,// adapted from theme_GoogleChrome_MacOS1013 theme_Flat = ` :scope { position: relative; display: inline-block; width: 240px; --thumb-size: 15px; --thumb-radius: calc(var(--thumb-size) / 2); padding: var(--thumb-radius) 0; color: #3b99fc; margin: 2px; vertical-align: middle; } :scope .range-track { box-sizing: border-box; position: relative; height: 7px; background-color: hsl(0, 0%, 80%); overflow: visible; border-radius: 4px; padding: 0 var(--thumb-radius); } :scope .range-track-zone { box-sizing: border-box; position: relative; } :scope .range-select { box-sizing: border-box; position: relative; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); cursor: ew-resize; background: currentColor; height: 7px; border: inherit; } /* Expands the hotspot area. */ :scope .range-select:before { content: ""; position: absolute; width: 100%; height: var(--thumb-size); left: 0; top: calc(2px - var(--thumb-radius)); } :scope .range-select:focus, :scope .thumb:focus { outline: none; } :scope .thumb { box-sizing: border-box; position: absolute; width: var(--thumb-size); height: var(--thumb-size); background: #fcfcfc; top: -4px; border-radius: 100%; border: 1px solid hsl(0,0%,55%); cursor: default; margin: 0; } :scope .thumb:active { box-shadow: inset 0 var(--thumb-size) #0002; } :scope .thumb-min { left: calc(-1px - var(--thumb-radius)); } :scope .thumb-max { right: calc(-1px - var(--thumb-radius)); } `33:[{"id":"97dcd76da133c94cad989ca3799c76d3c8d387d5726a685c76026e71a1dfecf4783634df2b53352caf68b547d92f6091aaa2d509b0c62483c2c320c07a0007b8","href":"https://static.observableusercontent.com/files/97dcd76da133c94cad989ca3799c76d3c8d387d5726a685c76026e71a1dfecf4783634df2b53352caf68b547d92f6091aaa2d509b0c62483c2c320c07a0007b8","name":"MER_T07_02A-2024-08-29.csv","type":"text/csv","lastModified":1724981009746.368,"size":1096398},{"id":"52e3ed7b46e59b7ee9aaca71d907c2441ea832b6d9fa21a0e9701e2e586cf1e3092f0df1d9c7bf2b42cdf63e6d61a7c6a9ddb7da2121e7779d2d41d4422b160c","href":"https://static.observableusercontent.com/files/52e3ed7b46e59b7ee9aaca71d907c2441ea832b6d9fa21a0e9701e2e586cf1e3092f0df1d9c7bf2b42cdf63e6d61a7c6a9ddb7da2121e7779d2d41d4422b160c","name":"MER_T07_02A-2022-09-02.csv","type":"text/csv","lastModified":1662126185829.691,"size":1055257},{"id":"9596546ef23d481a2b610d4a78d126f93311a25b33ff85f962ddef3feedf52b7286c3957f20684b9b27e4ef5f24815edc6a8882944304c0a7b11dbc57fb5087a","href":"https://static.observableusercontent.com/files/9596546ef23d481a2b610d4a78d126f93311a25b33ff85f962ddef3feedf52b7286c3957f20684b9b27e4ef5f24815edc6a8882944304c0a7b11dbc57fb5087a","name":"MER_T07_02A-2023-12-28.csv","type":"text/csv","lastModified":1703805026175.292,"size":1082154},{"id":"6916bdeffb593302f6af046cb1e18eee64ee1160879a6505d3a64521cba5db28ef8e58c34a27c6cfa7d0311575725e46ca9895e9facf7d8c83434734cb4245c7","href":"https://static.observableusercontent.com/files/6916bdeffb593302f6af046cb1e18eee64ee1160879a6505d3a64521cba5db28ef8e58c34a27c6cfa7d0311575725e46ca9895e9facf7d8c83434734cb4245c7","name":"MER_T07_02A-201907.csv","type":"text/csv","lastModified":1574216369397.174,"size":996689},{"id":"dc2b8289998a80d827830879120d153224db21adc078c1928dc0e9e6bd0917957d0f6389b3fb4bfe516dad491948db67eca5436011d53e5eeef258e5087e3d8f","href":"https://static.observableusercontent.com/files/dc2b8289998a80d827830879120d153224db21adc078c1928dc0e9e6bd0917957d0f6389b3fb4bfe516dad491948db67eca5436011d53e5eeef258e5087e3d8f","name":"MER_T07_02A-202001.csv","type":"text/csv","lastModified":1578421805234.855,"size":999870},{"id":"a682740a114bc57bd92be467cfdfaccd242e9455849774e26402fb80900f452544502ec104ae43cf757c2d4356364835a97a41d4321811aa66f368d3afc4c29b","href":"https://static.observableusercontent.com/files/a682740a114bc57bd92be467cfdfaccd242e9455849774e26402fb80900f452544502ec104ae43cf757c2d4356364835a97a41d4321811aa66f368d3afc4c29b","name":"MER_T07_02A-2023-03-04.csv","type":"text/csv","lastModified":1677962489188.538,"size":1064748},{"id":"85c3dc15852dae33e3166eff75f4b370bfa07bca981690af9a806e8f580d81cb4b06e41d86e442e6b35d5f3aa80ffba5dd0bb3a61854fa3a2a907b4cd9a81ea3","href":"https://static.observableusercontent.com/files/85c3dc15852dae33e3166eff75f4b370bfa07bca981690af9a806e8f580d81cb4b06e41d86e442e6b35d5f3aa80ffba5dd0bb3a61854fa3a2a907b4cd9a81ea3","name":"MER_T07_02A-2022-12-01.csv","type":"text/csv","lastModified":1669911275500.14,"size":1060003}] 2e:{"title":"U.S. Electric Power Sources (Monthly)","cells":[{"id":0,"value":"md`\n# U.S. Electric Power Sources (Monthly)\n\nWant the version with [annual data](https://observablehq.com/@j-f1/electric-power-sources-annual)?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"blurb = md`Data: ${formatDate(data[0].date)} to ${formatDate(\n last(data).date\n)}
\nSource: [US Energy Information Administration](https://www.eia.gov/totalenergy/data/browser/?tbl=T07.02A#/?f=M&start=197301&end=999912&charted=1-2-3-5-8-10-11-12-13-14)\n\n*Production numbers are as of ${formatDate(last(data).date)}*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof highlighted = Object.assign(\n render(({ getValue, setValue }) =>\n Object.entries(colors)\n .sort(\n ([a], [b]) =>\n last(series.find(({ name }) => name === b).values).value -\n last(series.find(({ name }) => name === a).values).value\n )\n .map(\n ([name, color]) =>\n jsx`\n <${LegendEntry}\n name=${name}\n color=${color}\n onEnter=${() => {\n setValue(name);\n }}\n onExit=${() => {\n setTimeout(() => {\n if (getValue() === name) setValue(null);\n });\n }}\n />`\n )\n ),\n { value: null }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"viewof domain = rangeSlider({\n title: 'Months Shown',\n format: formatDate,\n min: +data[0].date,\n max: +last(data).date,\n theme: theme_Flat\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"x = d3\n .scaleUtc()\n .domain(domain)\n // .nice(d3.timeYear, 1)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"minorXAxis = g =>\n g\n .call(\n d3\n .axisBottom(x)\n .ticks(\n data[data.length - 1].date.getFullYear() - data[0].date.getFullYear()\n )\n .tickFormat('')\n .tickSizeOuter(0)\n )\n .style('opacity', 0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"xAxis = d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(formatTick))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Energy production, terawatt-hours\")\n ) // the Bloomberg article shows this as GWh","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.value))\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"LegendEntry = component(({ name, color, onEnter, onExit }) => {\n const line = chart.querySelector(`[data-name=\"${name}\"]`);\n const usage = last(series.find(s => s.name === name).values).value * 1e9;\n return jsx`\n {\n line.style.strokeWidth = '5';\n if (line.style.strokeDasharray) {\n line.style.strokeDasharray = '10px, 7.5px';\n }\n line.style.zIndex = '10';\n onEnter();\n }}\n onMouseLeave=${() => {\n line.style.strokeWidth = '';\n if (line.style.strokeDasharray) {\n line.style.strokeDasharray = '1.5px, 3px';\n }\n line.style.zIndex = '';\n onExit();\n }}>\n \n ${name}\n \n ${formatNumber(usage)}Wh\n \n \n `;\n}, 'LegendEntry')","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"last = arr => arr[arr.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = width * 9 / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({ top: 20, right: 35, bottom: 30, left: 35 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"renewables = [\"Conventional Hydroelectric Power\", \"Wood\", \"Waste\", \"Geothermal\", \"Solar\", \"Wind\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"colors = ({\n Coal: 'black',\n Petroleum: 'darkgray',\n 'Natural Gas': 'gray',\n 'Other Gases': 'lightgray',\n 'Nuclear Electric Power': 'darkred',\n 'Hydroelectric Pumped Storage': 'skyblue',\n 'Conventional Hydroelectric Power': 'steelblue',\n Wood: 'peru',\n Waste: 'brown',\n Geothermal: 'sienna',\n Solar: 'orange',\n Wind: 'green',\n 'Total Renewables': 'lime',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"styles = collapsedCSS`\n .swatch {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n margin-right: 0.5em;\n }\n .legend-entry {\n display: inline-flex;\n align-items: center;\n padding: 0.5em 1em;\n font-family: var(--sans-serif);\n }\n .legend-entry strong {\n margin-right: 0.5em;\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"series[0].values.slice(-1)[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"series = {\n const series = Object.entries(\n data.reduce((series, { date, value, source }) => {\n if (!series[source]) {\n series[source] = [];\n }\n series[source].push({ date, value });\n return series;\n }, Object.create(null))\n ).map(([name, values]) => ({ name, values }));\n return series.concat({ name: 'Total Renewables', values: renewableTotals });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = rawData\n .map(({ YYYYMM, Value, Description }) => {\n const year = +YYYYMM.slice(0, 4)\n const month = +YYYYMM.slice(4, 6)\n const sourceMatch = Description.match(\n /Electricity Net Generation From (.*), All Sectors/\n )\n const value = +Value\n return month === 13 || !sourceMatch || isNaN(value)\n ? null\n : {\n date: new Date(year, month - 1),\n value: value,\n source: sourceMatch[1]\n }\n })\n .filter(Boolean)","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"renewableTotals = data\n .filter(({ source }) => renewables.includes(source))\n .reduce((totals, { date, value }) => {\n const total = totals.find(t => +t.date === +date);\n if (total) {\n total.value += value;\n return totals;\n } else {\n return totals.concat({ date, value });\n }\n }, [])\n .sort((a, b) => a.date - b.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"rawData = FileAttachment(\"MER_T07_02A-2024-08-29.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"import { render, component, jsx } from \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { collapsedCSS } from '@j-f1/css-template-tag'","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"formatNumberForTitle = {\n const format = d3.format('.5s');\n return n => format(n).replace(/(.)$/, ' $1');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"formatNumber = {\n const format = d3.format('.2s');\n return n => format(n).replace(/(.)$/, ' $1');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"formatTick = n => d3.format(',.2r')(n / 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"formatDate = d3.timeFormat('%B %Y')","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"legend = viewof highlighted","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}