3f:null 40:["$","title",null,{"children":"Grouped Slopegraph | Jasper Croome | Observable"}] 46:T172e,slopegraph = { // 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])]; }); const xValues = []; const yValues = []; dataEntries.map((dataEntry) => { Object.entries(dataEntry[1]).map((category) => { xValues.push(category[0]); yValues.push(category[1]); }); }); 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.scaleBand(xDomain, [ 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(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 y axis // svg // .append("g") // .attr("transform", `translate(${chartDimensions.margin.left},0)`) // .attr("class", "axis") // .call(d3.axisLeft(yScale)); // add the yTicks // svg // .append("g") // .attr("class", "tickLine") // .selectAll("line") // .data(yScale.ticks()) // .join("line") // .attr("y1", (d) => yScale(d)) // .attr("y2", (d) => yScale(d)) // .attr("x1", chartDimensions.margin.left) // .attr("x2", xScale(xValues[xValues.length - 1])); // 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[1]) .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[1]); 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]) + (dNdx === 0 ? -10 : 10)) .attr("y", (d) => yScale(d[1]) + 5) .attr("text-anchor", (d, dNdx) => (dNdx === 0 ? "end" : "start")); // svg // .append("g") // .attr("class", "legendItem") // .selectAll("circle") // .data(group) // .join("circle") // .attr("cx", xScale(d3.max(xScale.domain())) + 50) // .attr("cy", yScale(group[1][2][1])) // .attr("r", "10px") // .attr("fill", colors[gNdx % 6]); svg .append("g") .attr("class", "legendItemText") .selectAll("text") .data(group) .join("text") .text(group[0]) .attr("x", xScale(d3.max(xScale.domain())) + 65) .attr("y", yScale(group[1][1][1]) + 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("stroke", "none"); axisTickDash.style("stroke", "none"); }); 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(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"9531006dfbac0dbf","slug":"grouped-slopegraph","title":"Grouped Slopegraph","thumbnail":"02a791ac7a45299737ad278caafb6805f2cc15b52015260849b048b305dff51d","access_level":"public","create_time":"$D2021-11-08T21:49:18.504Z","update_time":"$D2022-08-11T14:13:08.800Z","view_time":null,"first_public_time":"$D2021-11-09T00:17:29.197Z","has_unpublished_edits":null,"fork":{"id":"930cfd36b5f7beff","slug":"grouped-vertical-category-bar-chart","title":"Grouped Vertical Category Bar Chart","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":2086,"publish_version":2086,"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":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Grouped Slopegraph","cells":[{"id":0,"value":"# Grouped Slopegraph\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 \"All Low-Carbon\": {\n \"2016\": 0.344,\n \"2021\": 0.395\n },\n Coal: {\n \"2016\": 0.384,\n \"2021\": 0.354\n },\n Wind: {\n \"2016\": 0.039,\n \"2021\": 0.067\n },\n \"Solar PV\": {\n \"2016\": 0.013,\n \"2021\": 0.034\n },\n Nuclear: {\n \"2016\": 0.104,\n \"2021\": 0.099\n },\n\n Other: {\n \"2016\": 0.188,\n \"2021\": 0.195\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 \"All Low-Carbon\": {\n \"2016\": 0.344,\n \"2021\": 0.395\n },\n Coal: {\n \"2016\": 0.384,\n \"2021\": 0.354\n },\n Wind: {\n \"2016\": 0.039,\n \"2021\": 0.067\n },\n \"Solar PV\": {\n \"2016\": 0.013,\n \"2021\": 0.034\n },\n Nuclear: {\n \"2016\": 0.104,\n \"2021\": 0.099\n },\n\n Other: {\n \"2016\": 0.188,\n \"2021\": 0.195\n }\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 = Math.max(0, d3.precisionFixed(0.05) - 1);\n const f = d3.format(\".\" + p + \"%\");\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":"$46","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 = `Share of low-carbon sources and coal in world electricity generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$47","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":"$W48","stdlib":"1"}} 45:"$44:body"