40:null 41:["$","title",null,{"children":"Grouped Slopegraph - Energy Usage 1950 to 2020 | Jasper Croome | Observable"}] 47:T15a6,{ // 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) }; // create data objects const dataEntries = Object.entries(data); const groupedDataEntries = dataEntries.map((e) => { return [e[0], Object.entries(e[1])]; }); console.log(groupedDataEntries); const xValues = []; const yValues = []; dataEntries.map((dataEntry) => { Object.entries(dataEntry[1]).map((category) => { xValues.push(category[0]); yValues.push(category[1]); }); }); yValues.push(0); 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 xScale = d3.scalePoint(xDomain, [ chartDimensions.margin.left, chartDimensions.boundedWidth - chartDimensions.margin.right ]); const yScale = d3.scaleLinear(d3.extent(yValues), [ chartDimensions.boundedHeight - chartDimensions.margin.bottom, chartDimensions.margin.top ]); // create the line accessor const line = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])); // 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); // add the x axis svg .append("g") .attr( "transform", `translate(${-xScale.bandwidth() / 2}, ${ chartDimensions.boundedHeight - chartDimensions.margin.bottom })` ) .attr("class", "axis") .call(d3.axisBottom(xScale).ticks(3)); // add the lines, end-dots, end-values and legend Items groupedDataEntries.map((group, gNdx) => { const maxIndex = xValues.length - 1; svg .append("g") .selectAll("path") .data(group[1]) .join("path") .attr("d", line(group[1])) .attr("fill", "none") .attr("stroke", colors[gNdx % 6]) .attr("opacity", "0.8") .attr("stroke-width", "4px"); svg .append("g") .attr("class", "endDots") .selectAll("circle") .data(group[1]) .join("circle") .attr("cx", (d) => xScale(d[0])) .attr("cy", (d) => yScale(d[1])) .attr("r", "5px") .attr("fill", colors[gNdx % 6]); const textAdjusts = { 0: { x: -10, y: 5, anchor: "end" }, [group[1].length - 1]: { x: 10, y: 5, anchor: "start" }, other: { x: 0, y: -20, anchor: "middle" } }; svg .append("g") .attr("class", "legendItemText") .selectAll("text") .data(group[1]) .join("text") .text((d) => formatValue(d[1])) .attr( "x", (d, dNdx) => xScale(d[0]) + (textAdjusts[dNdx]?.["x"] || textAdjusts["other"]["x"]) ) .attr( "y", (d, dNdx) => yScale(d[1]) + (textAdjusts[dNdx]?.["y"] || textAdjusts["other"]["y"]) ) .attr( "text-anchor", (d, dNdx) => textAdjusts[dNdx]?.["anchor"] || textAdjusts["other"]["anchor"] ); svg .append("g") .attr("class", "legendItemText") .selectAll("text") .data(group) .join("text") .text(group[0]) .attr("x", xScale(d3.max(xScale.domain())) + 85) .attr("y", yScale(group[1][1][1]) + 5); }); 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(titles) .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:[] 45:{"id":"817e567abf0a0d59","slug":"grouped-slopegraph-energy-usage-1950-to-2020","title":"Grouped Slopegraph - Energy Usage 1950 to 2020","thumbnail":"437b242d3980ab4ea0c3b2ebaa5782bb91c1043a9a3296b24a09224a7e3a2279","access_level":"public","create_time":"$D2021-12-02T05:29:11.025Z","update_time":"$D2021-12-02T14:00:06.439Z","view_time":null,"first_public_time":"$D2021-12-02T14:06:50.126Z","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":2189,"publish_version":2189,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Grouped Slopegraph - Energy Usage 1950 to 2020","cells":[{"id":0,"value":"# Grouped Slopegraph - Energy Usage 1950 to 2020\n\nThis is a Grouped Graph, generally used to compare the change in a shared value across multiple categories. \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":195,"value":"// example dataset\ndata = Object({\n Renewables: { 1950: 877, 2019: 25468 },\n \"Fossil Fuel\": { 1950: 27639, 2019: 147872 }\n})","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 p = d3.precisionPrefix(100, 1000);\n const f = d3.formatPrefix(\".\" + p, 1000);\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: 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":"titles = `Total Energy Usage (TeraWatt Hours), 1970 - 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"}} 46:"$45:body"