3f:null 40:["$","title",null,{"children":"Slopegraph - Total Emissions, 1950 to 2020 | Jasper Croome | Observable"}] 46:T66f,data = d3.tsvParse(`Entity Year Total Emissions World 1950 5900000000 World 1951 6374254691 World 1952 6460339682 World 1953 6641273014 World 1954 6784215194 World 1955 7436238817 World 1956 7917168948 World 1957 8178702419 World 1958 8411438653 World 1959 8847900121 World 1960 9359426482 World 1961 9388244087 World 1962 9719779635 World 1963 10239773013 World 1964 10793877121 World 1965 11282700958 World 1966 11829640492 World 1967 12205845914 World 1968 12871319383 World 1969 13724862841 World 1970 14853217232 World 1971 15453605261 World 1972 16173079951 World 1973 17027165013 World 1974 16957206737 World 1975 16999328068 World 1976 17933956104 World 1977 18444838983 World 1978 19016691375 World 1979 19557553854 World 1980 19444411140 World 1981 18980238345 World 1982 18830746953 World 1983 18949762962 World 1984 19604480685 World 1985 20262211219 World 1986 20559974625 World 1987 21191788543 World 1988 22012236539 World 1989 22320123319 World 1990 22749574361 World 1991 23238102148 World 1992 22569624280 World 1993 22803495350 World 1994 22964583360 World 1995 23453944453 World 1996 24154961205 World 1997 24300550431 World 1998 24206271270 World 1999 24518962289 World 2000 25234207250 World 2001 25451054499 World 2002 26039191478 World 2003 27366723290 World 2004 28627533035 World 2005 29602777195 World 2006 30583530082 World 2007 31493741589 World 2008 32069444008 World 2009 31607042411 World 2010 33343300453 World 2011 34468451046 World 2012 34974075146 World 2013 35283025442 World 2014 35534442951 World 2015 35496406338 World 2016 35452459300 World 2017 35925737688 World 2018 36646139785 World 2019 36700000000 `)47:T13f6,totalEmissions = { // 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 = data.map((d) => d["Year"]); const yValues = data.map((d) => parseFloat(d["Total Emissions"])); const xDomain = xValues.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["Total Emissions"])); // 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 const maxIndex = xValues.length - 1; svg .append("path") .attr("d", line(data)) .attr("fill", "none") .attr("stroke", "black") .attr("opacity", "0.8") .attr("stroke-width", "4px"); const textAdjusts = { 0: { x: -10, y: 5, anchor: "end" }, [data.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(data[data.length - 1]["Total Emissions"])) .attr("r", "5px") .attr("fill", "black"); svg .append("circle") .attr("cx", xScale(d3.min(xScale.domain()))) .attr("cy", yScale(data[0]["Total Emissions"])) .attr("r", "5px") .attr("fill", "black"); svg .append("text") .attr("class", "legendItemText") .text(`${formatValue(data[data.length - 1]["Total Emissions"])}`) .attr("x", xScale(d3.max(xScale.domain())) + 15) .attr("y", yScale(data[data.length - 1]["Total Emissions"]) + 5); svg .append("text") .attr("class", "legendItemText") .text(`${formatValue(data[0]["Total Emissions"])}`) .attr("text-anchor", "end") .attr("x", xScale(d3.min(xScale.domain())) - 15) .attr("y", yScale(data[0]["Total Emissions"]) + 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(); }48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"1ec819dd6521e2fb","slug":"slopegraph-total-emissions-1950-to-2020","title":"Slopegraph - Total Emissions, 1950 to 2020","thumbnail":"fd4481991d921af0a967b9d2b34c32c3bdd8334d03ee2677e7c48189ba0fe926","access_level":"public","create_time":"$D2021-12-03T14:01:33.486Z","update_time":"$D2021-12-21T13:31:52.097Z","view_time":null,"first_public_time":"$D2021-12-04T04:54:07.289Z","has_unpublished_edits":null,"fork":{"id":"cabb7a145854ac12","slug":"grouped-slopegraph-energy-usage-1970-to-2019","title":"Grouped Slopegraph - World Energy Mix, 1970 to 2019","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":2252,"publish_version":2252,"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 - Total Emissions, 1950 to 2020","cells":[{"id":0,"value":"# Slopegraph - Total Emissions, 1950 to 2020\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":2131,"value":"$46","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);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$47","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: 600,\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 = `Total Emissions, 1950-2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$48","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":"$W49","stdlib":"1"}} 45:"$44:body"