34:null 35:["$","title",null,{"children":"Slopegraph - Renewable Energy vs Fossil Fuels, 1950 to 2019 | Jasper Croome | Observable"}] 3b:Ta78,data2 = d3.tsvParse(`Entity Year TWh; substituted energy Fossil Fuels 1950 27639 Fossil Fuels 1960 39900 Fossil Fuels 1965 49714 Fossil Fuels 1966 51907 Fossil Fuels 1967 53601 Fossil Fuels 1968 56351 Fossil Fuels 1969 59596 Fossil Fuels 1970 62825 Fossil Fuels 1971 64962 Fossil Fuels 1972 67946 Fossil Fuels 1973 71400 Fossil Fuels 1974 71273 Fossil Fuels 1975 71352 Fossil Fuels 1976 74848 Fossil Fuels 1977 77047 Fossil Fuels 1978 79064 Fossil Fuels 1979 81450 Fossil Fuels 1980 80674 Fossil Fuels 1981 79946 Fossil Fuels 1982 79264 Fossil Fuels 1983 80038 Fossil Fuels 1984 83072 Fossil Fuels 1985 84577 Fossil Fuels 1986 86131 Fossil Fuels 1987 88755 Fossil Fuels 1988 91636 Fossil Fuels 1989 93377 Fossil Fuels 1990 94180 Fossil Fuels 1991 94552 Fossil Fuels 1992 95337 Fossil Fuels 1993 95554 Fossil Fuels 1994 96750 Fossil Fuels 1995 98292 Fossil Fuels 1996 101041 Fossil Fuels 1997 102039 Fossil Fuels 1998 102632 Fossil Fuels 1999 104382 Fossil Fuels 2000 106814 Fossil Fuels 2001 107962 Fossil Fuels 2002 110107 Fossil Fuels 2003 114189 Fossil Fuels 2004 118816 Fossil Fuels 2005 122535 Fossil Fuels 2006 125606 Fossil Fuels 2007 129418 Fossil Fuels 2008 130190 Fossil Fuels 2009 127961 Fossil Fuels 2010 133357 Fossil Fuels 2011 136493 Fossil Fuels 2012 138002 Fossil Fuels 2013 139779 Fossil Fuels 2014 140182 Fossil Fuels 2015 140628 Fossil Fuels 2016 141816 Fossil Fuels 2017 143625 Fossil Fuels 2018 146918 Fossil Fuels 2019 147872 Renewables 1950 877 Renewables 1960 1813 Renewables 1965 2685 Renewables 1966 2884 Renewables 1967 2964 Renewables 1968 3148 Renewables 1969 3353 Renewables 1970 3553 Renewables 1971 3791 Renewables 1972 4074 Renewables 1973 4274 Renewables 1974 4811 Renewables 1975 5148 Renewables 1976 5318 Renewables 1977 5753 Renewables 1978 6341 Renewables 1979 6645 Renewables 1980 6925 Renewables 1981 7397 Renewables 1982 7707 Renewables 1983 8277 Renewables 1984 9089 Renewables 1985 9851 Renewables 1986 10242 Renewables 1987 10724 Renewables 1988 11346 Renewables 1989 11500 Renewables 1990 11981 Renewables 1991 12413 Renewables 1992 12479 Renewables 1993 13066 Renewables 1994 13253 Renewables 1995 13903 Renewables 1996 14248 Renewables 1997 14383 Renewables 1998 14581 Renewables 1999 14927 Renewables 2000 15259 Renewables 2001 15222 Renewables 2002 15472 Renewables 2003 15312 Renewables 2004 16196 Renewables 2005 16515 Renewables 2006 16995 Renewables 2007 17156 Renewables 2008 17848 Renewables 2009 17920 Renewables 2010 18892 Renewables 2011 19066 Renewables 2012 19291 Renewables 2013 20178 Renewables 2014 20887 Renewables 2015 21396 Renewables 2016 22265 Renewables 2017 23199 Renewables 2018 24322 Renewables 2019 25468`)3c:T1516,renewVsFossil = { // define the bounds of the chart const chartDimensions = { margin: dimensions.margin, boundedWidth: dimensions.width - (dimensions.margin.left + dimensions.margin.right), boundedHeight: dimensions.height - (dimensions.margin.top + dimensions.margin.bottom) }; const xValues = data2.map((d) => d["Year"]); const yValues = data2.map((d) => parseFloat(d["TWh; substituted energy"])); const xDomain = xValues.filter((val, vNdx, self) => { return self.indexOf(val) === vNdx; }); const groups = data2 .map((d) => d["Entity"]) .filter((val, vNdx, self) => { return self.indexOf(val) === vNdx; }); const yDomain = d3.extent(yValues); const showZero = true; if (showZero) { if (yDomain[1] > 0) yDomain[0] = 0; else yDomain[1] = 0; } // create the scales const timeParse = d3.timeParse("%Y"); const timeFormat = d3.timeFormat("%Y"); const xScale = d3.scaleTime( [timeParse(xDomain[0]), timeParse(xDomain[xDomain.length - 1])], [ chartDimensions.margin.left, chartDimensions.boundedWidth - chartDimensions.margin.right ] ); const yScale = d3.scaleLinear(yDomain, [ chartDimensions.boundedHeight - chartDimensions.margin.bottom, chartDimensions.margin.top ]); // create the line accessor const line = d3 .line() .x((d) => xScale(timeParse(d["Year"]))) .y((d) => yScale(d["TWh; substituted energy"])); // create & append various items to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("shape-rendering", "geometricPrecision") .attr("width", chartDimensions.boundedWidth) .attr("height", chartDimensions.boundedHeight) .attr("transform", "translate(60,0)"); // add the x axis svg .append("g") .attr( "transform", `translate(${0}, ${ chartDimensions.boundedHeight - chartDimensions.margin.bottom })` ) .attr("class", "axis") .call(d3.axisBottom(xScale).tickValues([timeParse(1950), timeParse(2019)])); // add the lines, end-dots, end-values and legend Items groups.forEach((group) => { const groupData = data2.filter((d) => { return d["Entity"] === group; }); const maxIndex = xValues.length - 1; svg .append("path") .attr("d", line(groupData)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("opacity", "0.8") .attr("stroke-width", "4px"); const textAdjusts = { 0: { x: -10, y: 5, anchor: "end" }, [groupData.length - 1]: { x: 10, y: 5, anchor: "start" }, other: { x: 0, y: -20, anchor: "middle" } }; svg .append("circle") .attr("cx", xScale(d3.max(xScale.domain()))) .attr( "cy", yScale(groupData[groupData.length - 1]["TWh; substituted energy"]) ) .attr("r", "5px") .attr("fill", "black"); svg .append("circle") .attr("cx", xScale(d3.min(xScale.domain()))) .attr("cy", yScale(groupData[0]["TWh; substituted energy"])) .attr("r", "5px") .attr("fill", "black"); svg .append("text") .attr("class", "legendItemText") .text( `${group}: ${formatValue( groupData[groupData.length - 1]["TWh; substituted energy"] )}` ) .attr("x", xScale(d3.max(xScale.domain())) + 10) .attr( "y", yScale(groupData[groupData.length - 1]["TWh; substituted energy"]) + 5 ); }); // add title svg .append("text") .attr("class", "axisLabel bottom") .attr("text-anchor", "beginning") .attr("x", dimensions.margin) .attr("y", dimensions.height - dimensions.margin / 3) .text(axes.axisBottom.label); // add styling const axisPath = svg.selectAll(".axis .domain"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisTickDash = svg.selectAll(".axis .tick").selectAll("line"); const axisTickLine = svg.selectAll(".tickLine"); const axisLabel = svg.selectAll(".axisLabel"); const legendText = svg.selectAll(".legendItemText"); const { titleStyle, axisLabelStyle, axisStyle, detailLabelStyle } = chartObjectStyle; const axisLineStyleArray = Object.entries(axisStyle.lines); const axisTickLineStyleArray = Object.entries(axisStyle.tickLines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); const legendTextStyleArray = Object.entries(detailLabelStyle); axisLineStyleArray.map((s) => { axisPath.style(s[0], s[1]); axisTickDash.style(s[0], s[1]); }); axisTickLineStyleArray.map((s) => { axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); legendTextStyleArray.map((s) => { legendText.style(s[0], s[1]); }); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "title") .attr("y", chartDimensions.margin.top * (2 / 3)) .attr("x", chartDimensions.margin.left * (1 / 2)); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); return svg.node(); }3d:T78f0,// Custom SVG Shapes handDrawn = svg` `3e:[] 39:{"id":"a9475cc6ec0ab315","slug":"slopegraph-renewable-energy-vs-fossil-fuels-1950-to-2019","title":"Slopegraph - Renewable Energy vs Fossil Fuels, 1950 to 2019","thumbnail":"ccd30528256a68b0295f7d56beebfd7592294de3ef6548e8c466eefa94d4c565","access_level":"public","create_time":"$D2021-12-04T06:09:32.332Z","update_time":"$D2021-12-06T13:42:13.729Z","view_time":null,"first_public_time":"$D2021-12-04T13:37:22.916Z","has_unpublished_edits":null,"fork":{"id":"1ec819dd6521e2fb","slug":"slopegraph-total-emissions-1950-to-2020","title":"Line Graph - Total Emissions, 1950 to 2020","owner":{"id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":2277,"publish_version":2277,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Slopegraph - Renewable Energy vs Fossil Fuels, 1950 to 2019","cells":[{"id":0,"value":"# Slopegraph - Renewable Energy vs Fossil Fuels, 1950 to 2019\n\nThis is a SlopeGraph, generally used to compare the change in a shared value across multiple categories. In this instance, it's only one line but is mirroring the design of another chart which it will share a page with.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"## 1. Declare your Data\n\nThis is where you would declare data as whatever you want to graph. For this chart, it needs to have a key-value pairing for each category, à la: \n\n```\n{\n \"Fossil Fuels\": {\n \"1970\": 0.94,\n \"1980\": 0.916,\n \"1990\": 0.88,\n \"2000\": 0.87,\n \"2010\": 0.87,\n \"2019\": 0.843\n },\n \"Low Carbon\": {\n \"1970\": 0.06,\n \"1980\": 0.084,\n \"1990\": 0.12,\n \"2000\": 0.13,\n \"2010\": 0.13,\n \"2019\": 0.157\n },\n Renewables: {\n \"1970\": 0.056,\n \"1980\": 0.084,\n \"1990\": 0.064,\n \"2000\": 0.07,\n \"2010\": 0.078,\n \"2019\": 0.114\n },\n Nuclear: {\n \"1970\": 0.004,\n \"1980\": 0.024,\n \"1990\": 0.056,\n \"2000\": 0.06,\n \"2010\": 0.052,\n \"2019\": 0.043\n },\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2235,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2068,"value":"formatValue = (number) => {\n const f = d3.format(\"~s\");\n return f(number)+ \" TWh\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"**Anything below this box is maintenance-related, and doesn't directly change the experience of the grouped Waffle Chart**\n\n(apart from maybe breaking it)\n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"dimensions = Object({\n margin: { left: 60, top: 60, bottom: 60, right: 10 },\n width: 400,\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"//\n\naxes = Object({\n axisLeft: {\n show: false\n },\n axisBottom: {\n show: false\n },\n axisRight: { show: false }, // for now, this does nothing\n axisTop: { show: false } // samesies\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"detailLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"16\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"summaryLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"20\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `Renewable Energy vs Fossil Fuels, 1950 to 2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"import {\n styleString,\n textureArrays,\n colors,\n chartObjectStyle\n} from \"@jasper/carbon-almanac-stylesheet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"{\n const defaultStyle = document.createElement(\"style\");\n defaultStyle.innerHTML = styleString;\n document.head.appendChild(defaultStyle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3a:"$39:body"