31:Te59,chart = () => { const wrapper = d3.create("div"); wrapper.append("style").html(css); wrapper.append("div") .style("font-family", franklinLight) .style("margin-bottom", "16px") .text("Acres offered for lease in each year of the Obama, Trump and Biden administrations"); const axis = wrapper.append("div") .style("display", "inline-block"); const axisSvg = axis.append("svg") .attr("width", margin.left) .attr("height", chartheight + margin.top + margin.bottom); const yTickValues = d3.range(0, 15e6, 5e6); const axisG = axisSvg.append("g") .attr("class", "axis y-axis") .attr("transform", `translate(${margin.left})`) .call( d3.axisLeft(y) .tickFormat(d => d ? `${d / 1e6} million` : d) .tickSize(margin.left + 9) .tickValues(yTickValues) ); axisG.selectAll("text") .attr("dx", margin.left) .attr("dy", -3) .html((d, i, e) => { const top = d ? `${d / 1e6} million` : d; if (i === e.length - 1){ return `${top}acres` } else { return top; } }) const chart = wrapper.selectAll(".chart") .data(byAdmin) .join("div") .attr("class", d => `chart ${toSlugCase(d.admin)}`) .style("margin-right", (d, i, e) => i === e.length - 1 ? "0px" : `${padInner}px`); chart.append("div") .attr("class", "subtitle") .text(d => d.admin); const svg = chart.append("svg") .attr("width", d => d.width) .attr("height", chartheight + margin.top + margin.bottom) .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(0, ${margin.top})`); g.append("g") .attr("class", "axis y-axis") .attr("transform", d => `translate(${d.width})`) .each((d, i, e) => { const axis = d3.select(e[i]) .call( d3.axisLeft(y) .tickFormat(d => null) .tickSize(d.width) .tickValues(yTickValues) ); }); g.append("g") .attr("class", "axis x-axis") .each((d, i, e) => { const axis = d3.select(e[i]) .attr("transform", `translate(0, ${chartheight})`) .call( d3.axisBottom(x) .tickFormat((d0, i0, e0) => d.entries[i0].year) .tickSize(10) .tickValues(d3.range(d.entries.length)) ); }); g.selectAll(".bar") .data(d => d.entries) .join("rect") .attr("class", "bar") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.offered)) .attr("width", x.bandwidth()) .attr("height", d => chartheight - y(d.offered)); const annotations = g.selectAll(".annotation") .data(d => d.annotations) .join("g") .attr("class", "annotation") .attr("transform", d => `translate(${[x(d.x(width)), y(d.y(width))]})`); annotations.append("text") .attr("class", "bg") .attr("text-anchor", d => d.textAnchor(width)) .attr("transform", d => `translate(${[d.dx(width), d.dy(width)]})`) .html(d => d.html(width)) .selectAll("tspan") .attr("x", 0) .attr("dy", (d, i) => i ? width <= 768 ? 16 : 18 : 0) annotations.append("text") .attr("class", "fg") .attr("text-anchor", d => d.textAnchor(width)) .attr("transform", d => `translate(${[d.dx(width), d.dy(width)]})`) .html(d => d.html(width)) .selectAll("tspan") .attr("x", 0) .attr("dy", (d, i) => i ? width <= 768 ? 16 : 18 : 0) return wrapper.node() }32:T420,css = ` .chart { display: inline-block; } .chart.obama { display: ${width <= 600 ? "none" : "inline-block"}; } .subtitle { font-family: ${franklinBold}; font-size: 18px; margin-bottom: 8px; text-align: center; text-transform: uppercase; } .obama .subtitle, .trump .subtitle { color: ${colors.lighter}; } .biden .subtitle { color: ${colors.darker}; } .obama .bar, .trump .bar { fill: ${colors.lighter}; } .biden .bar { fill: ${colors.darker}; } .axis .domain { display: none; } .axis text { font-family: ${franklinLight}; font-size: 14px; } .axis.x-axis line { stroke: #808080; } .axis.x-axis text { fill: #494949; } .axis.y-axis line { stroke: #d5d5d5; } .axis.y-axis text { fill: #494949; } .axis.x-axis .tick:nth-child(even) { display: ${width <= 480 ? "none" : "block"}; } .annotation { font-family: ${franklinLight}; font-size: ${width <= 360 ? 13 : width <= 768 ? 14 : 15}px; } .annotation .bg { fill: white; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 8px; } `33:T5f2,// Received from Mackenzie Bosher of The Wilderness Society tws = [{"admin":"Trump","year":2017,"TOTAL LEASES OFFERED":2525,"TOTAL LEASES SOLD":942,"TOTAL ACRES OFFERED":11816541,"TOTAL ACRES SOLD":791183,"TOTAL LEASES SOLD AT MIN. BID":181,"TOTAL ACRES SOLD AT MIN. BID":225287},{"admin":"Trump","year":2018,"TOTAL LEASES OFFERED":2153,"TOTAL LEASES SOLD":1410,"TOTAL ACRES OFFERED":5012371,"TOTAL ACRES SOLD":1488305,"TOTAL LEASES SOLD AT MIN. BID":250,"TOTAL ACRES SOLD AT MIN. BID":259883},{"admin":"Trump","year":2019,"TOTAL LEASES OFFERED":3108,"TOTAL LEASES SOLD":1732,"TOTAL ACRES OFFERED":7370103,"TOTAL ACRES SOLD":2756118,"TOTAL LEASES SOLD AT MIN. BID":399,"TOTAL ACRES SOLD AT MIN. BID":462161},{"admin":"Trump","year":2020,"TOTAL LEASES OFFERED":889,"TOTAL LEASES SOLD":681,"TOTAL ACRES OFFERED":807711,"TOTAL ACRES SOLD":544064,"TOTAL LEASES SOLD AT MIN. BID":172,"TOTAL ACRES SOLD AT MIN. BID":199793},{"admin":"Trump","year":2021,"TOTAL LEASES OFFERED":59,"TOTAL LEASES SOLD":48,"TOTAL ACRES OFFERED":1095903,"TOTAL ACRES SOLD":559652,"TOTAL LEASES SOLD AT MIN. BID":0,"TOTAL ACRES SOLD AT MIN. BID":0},{"admin":"Biden","year":2021,"TOTAL LEASES OFFERED":"","TOTAL LEASES SOLD":"","TOTAL ACRES OFFERED":"","TOTAL ACRES SOLD":"","TOTAL LEASES SOLD AT MIN. BID":"","TOTAL ACRES SOLD AT MIN. BID":""},{"admin":"Biden","year":2022,"TOTAL LEASES OFFERED":162,"TOTAL LEASES SOLD":113,"TOTAL ACRES OFFERED":128511,"TOTAL ACRES SOLD":71251,"TOTAL LEASES SOLD AT MIN. BID":37,"TOTAL ACRES SOLD AT MIN. BID":31844}]34:Tb88,// Annotations that work on different screen sizes // NOTE: It might be easier to use absolutely positioned divs. annotations = [ { admin: "Obama", dx: ww => x.bandwidth() / 2, dy: ww => 0, x: ww => 2, y: ww => 10e6, html: ww => `The amount of land offeredfor drilling leases fellduring each year ofObama’s second term.`, textAnchor: ww => "middle" }, { admin: "Trump", dx: ww => ww <= 700 ? 4 : 0, dy: ww => 12, x: ww => 1, y: ww => 11816541, html: ww => { if (ww <= 480) { return `In Trump’s first threeyears, 24 millionacres were offeredfor drilling leases.` } else if (ww <= 600) { return `In Trump’s first three years,his administration offeredmore than 24 million acresfor drilling leases.` } else if (ww <= 700) { return `In Trump’s firstthree years, morethan 24 million acresacres were offered.` } else if (ww <= 870) { return `In Trump’s first three years,his administration offeredmore than 24 million acresfor drilling leases.` } else { return `In Trump’s first three years, hisadministration offered more than24 million acres for drilling leases.` } }, textAnchor: ww => "start", }, { admin: "Trump", dx: ww => x.bandwidth() + (ww <= 330 ? 25 : ww <= 400 ? 20 : ww <= 420 ? 10 : 0), dy: ww => 0, x: ww => 4, y: ww => ww <= 420 ? 4.3e6 : ww <= 800 ? 5e6 : 4e6, html: ww => { if (ww <= 800) { return `Leasingdroppedduring thepandemic.` } else { return `Leasingdropped duringthe pandemic.` } }, textAnchor: ww => "end", }, { admin: "Biden", dx: ww => x.bandwidth() / 2, dy: ww => 0, x: ww => 1, y: ww => ww <= 350 ? 8e6 : ww <= 600 ? 8.6e6 : 10e6, html: ww => { if (ww <= 480) { return `Far lessland has beenoffered duringBiden’s term.` } if (ww <= 800) { return `Comparatively littleland has beenoffered duringBiden’s term.` } else { return `Comparatively little landhas been offered fordrilling leases during theBiden administration,with none offeredhis first year.` } }, textAnchor: ww => "middle" } ]35:[] 2f:{"title":"Acres offered for drilling leases, 2013-2023","cells":[{"id":0,"value":"# Acres offered for drilling leases, 2013-2023\n\nA version of this chart appeared in [“How Biden’s oil policies upset both oil companies and environmentalists”](https://www.washingtonpost.com/climate-environment/interactive/2023/biden-oil-drilling-permits-willow-project/), which appeared in The Washington Post on March 29, 2022.\n\nThe data from the story is from the [Bureau of Land Management’s oil and gas statistics](https://www.blm.gov/programs-energy-and-minerals-oil-and-gas-oil-and-gas-statistics) and from [the Wilderness Society](https://www.wilderness.org/), which does incredible work monitoring and making sense of BLM data.","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"note(`Note: The first year of the Trump and Biden administrations began on Jan. 20. The final year of the Trump ${width <= 600 ? \"administration\" : \"and Obama administrations\"} ended on Jan. 19. Lease sales in 2023 are planned but have not happened yet.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`## Graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"note = (text) => d3.create(\"div\")\n .style(\"color\", \"#666\")\n .style(\"font-family\", franklinLight)\n .style(\"font-size\", \"14px\")\n .text(text)\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"colors = ({\n darker: \"#a54c24\",\n lighter: \"#ee9e69\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"x = d3.scaleBand()\n .domain(d3.range(5))\n .range([0, bandwidthYear * 5])\n .paddingInner(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.offered)])\n .range([chartheight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"margin = ({ left: 70, right: 0, top: 0, bottom: 23 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"padInner = 32","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"bandwidthYear = (width - margin.left - padInner * 2) / (data.length - (width <= 600 ? 5 : 0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"chartheight = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"// From Table 11 of BLM's oil and gas statistics: https://www.blm.gov/programs-energy-and-minerals-oil-and-gas-oil-and-gas-statistics\nblm = [{\"year\":2009,\"offered\":2916200,\"bid\":1109583},{\"year\":2010,\"offered\":3216288,\"bid\":777486},{\"year\":2011,\"offered\":4389439,\"bid\":1095298},{\"year\":2012,\"offered\":6054879,\"bid\":1442830},{\"year\":2013,\"offered\":5740466,\"bid\":1081965},{\"year\":2014,\"offered\":4132137,\"bid\":748764},{\"year\":2015,\"offered\":2260883,\"bid\":523811},{\"year\":2016,\"offered\":1946953,\"bid\":921240},{\"year\":2017,\"offered\":11859396,\"bid\":792823},{\"year\":2018,\"offered\":4998355,\"bid\":1488300},{\"year\":2019,\"offered\":7362516,\"bid\":2756223},{\"year\":2020,\"offered\":807110,\"bid\":544065},{\"year\":2021,\"offered\":1095904,\"bid\":559653},{\"year\":2022,\"offered\":128510,\"bid\":71251}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"// Start from obama's second term, 2013\n// In Obama-2017, we subtract Trump's acres offered in 2017 from the total 2017 value\n// Upcoming acres offered for 2023 received from Mackenzie Bosher of The Wilderness Society\ndata = [\n { admin: \"Obama\", year: 2013, offered: blm.find(d => d.year === 2013).offered },\n { admin: \"Obama\", year: 2014, offered: blm.find(d => d.year === 2014).offered },\n { admin: \"Obama\", year: 2015, offered: blm.find(d => d.year === 2015).offered },\n { admin: \"Obama\", year: 2016, offered: blm.find(d => d.year === 2016).offered },\n { admin: \"Obama\", year: 2017, offered: blm.find(d => d.year === 2017).offered - tws.find(d => d.year === 2017)[\"TOTAL ACRES OFFERED\"] },\n ...tws.map(d => ({admin: d.admin, year: d.year, offered: +d[\"TOTAL ACRES OFFERED\"] })),\n { admin: \"Biden\", year: 2023, offered: 536202 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"// Group the data by administration\nbyAdmin = d3\n .groups(data, d => d.admin)\n .map(([admin, entries]) => {\n return {\n admin,\n entries,\n width: bandwidthYear * entries.length,\n annotations: annotations.filter(d => d.admin === admin)\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"// Slug case for converting president names to class names\nfunction toSlugCase(string) {\n return string\n .toLowerCase()\n .replace(/\\s+/g, \"-\") // Replace spaces with -\n .replace(/[^\\w\\-]+/g, \"\") // Remove all non-word chars\n .replace(/\\-\\-+/g, \"-\") // Replace multiple - with single -\n .replace(/^-+/, \"\") // Trim - from start of text\n .replace(/-+$/, \"\"); // Trim - from end of text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"import {\n franklinLight,\n franklinBold\n} from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}