3e:null 3f:["$","title",null,{"children":"2024 NIKE Income Statement | Liwia Wagner | Observable"}] 45:T102c,chart_sankey_segment_test_1 = { const { nodes, links } = sankey({ nodes: data_sankey_segment.nodes.map((d) => Object.assign({}, d)), links: data_sankey_segment.links.map((d) => Object.assign({}, d)) }); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // Align nodes to the center const nodeAlign = d3.sankeyCenter; // Corrected version of sankey alignment // Create the Sankey layout d3 .sankey() .nodeId((d) => d.id) .nodeAlign(nodeAlign) // Set node alignment to center .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom] ])({ nodes, links }); // Create nodes (rectangles) svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0 + 1) .attr("y", (d) => d.y0) .attr("width", (d) => d.x1 - d.x0 - 2) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => { // Highlight specific node if (d.name === "Gross profit") return "#EE7622"; if (d.name === "Other income") return "#EE7622"; if (d.name === "Income before taxes") return "#EE7622"; if (d.name === "Net income") return "#EE7622"; if (d.name === "Cost of sales") return "#000000"; if (d.name === "Tax expense") return "#000000"; if (d.name === "Interest expense") return "#000000"; if (d.name === "Selling and administrative expense") return "#000000"; if (d.name === "Demand creation expense") return "#000000"; if (d.name === "Operating overhead expense") return "#000000"; let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.5); }) .each(function (d) { d.color = d3.select(this).attr("fill"); // Assign color to each node }) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString()}M`); // Create links (paths) with source-target color scheme const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); // For source-target color link scheme link .append("linearGradient") .attr("id", (d) => `gradient-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) // Gradient start at source .attr("x2", (d) => d.target.x0) // Gradient end at target .call( (gradient) => gradient .append("stop") .attr("offset", "0%") .attr("stop-color", (d) => d.source.color) // Source node color ) .call( (gradient) => gradient .append("stop") .attr("offset", "100%") .attr("stop-color", (d) => d.target.color) // Target node color ); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", (d) => `url(#gradient-${d.index})`) // Use the source-target gradient .attr("stroke-width", (d) => Math.max(1, d.width)); // Add titles to links link .append("title") .text((d) => `${d.source.id} → ${d.target.id}\n${d.value}`); // Add node labels svg .append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text((d) => ` ${d.value.toLocaleString()}M`); return svg.node(); // Helper function to handle node internals function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } }46:Tde9,chart_sankey_segment = { const { nodes, links } = sankey({ nodes: data_sankey_segment.nodes.map((d) => Object.assign({}, d)), links: data_sankey_segment.links.map((d) => Object.assign({}, d)) }); const svg = d3 .select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); const levels = d3.group(nodes, (d) => d.x0); const levelTotals = new Map(); levels.forEach((nodesAtLevel, level) => { const levelTotal = d3.sum(nodesAtLevel, (d) => d.value || 0); levelTotals.set(level, levelTotal); }); // Nodes svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("stroke-opacity", 0.3) .attr("x", (d) => d.x0 + 1) .attr("y", (d) => d.y0) .attr("width", (d) => d.x1 - d.x0 - 2) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => { // Highlight specific node if (d.name === "Gross profit") return "#10B981"; if (d.name === "Other income") return "#10B981"; if (d.name === "Income before taxes") return "#10B981"; if (d.name === "Net income") return "#10B981"; if (d.name === "Cost of sales") return "#EF4444"; if (d.name === "Tax expense") return "#EF4444"; if (d.name === "Interest expense") return "#EF4444"; if (d.name === "Selling and administrative expense") return "#EF4444"; if (d.name === "Demand creation expense") return "#EF4444"; if (d.name === "Operating overhead expense") return "#EF4444"; let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.2); }) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString()}M`); // Links const link = svg .append("g") .attr("fill", "none") .selectAll("g") .data(links.sort((a, b) => b.width - a.width)) .join("g") .attr("stroke", (d) => { // Highlight specific link return d3.color(d.color) || color; }) .style("mix-blend-mode", "multiply"); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-opacity", 0.3) .attr("stroke-width", (d) => Math.max(1, d.width)); link .append("title") .attr("fill-opacity", 0.7) .text( (d) => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}M` ); // Labels svg .append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .selectAll("text") .data(nodes) .join("text") .style("font", "10px 'Inter', sans-serif") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .each(function (d) { d3.select(this) .append("tspan") .attr("x", d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("dy", "1.2em") // Position below the node name .html((d) => { const levelTotal = levelTotals.get(d.x0) || 1; // Prevent division by 0 const percentage = (((d.value || 0) / levelTotal) * 100).toFixed(1); return ` ${d.name} ${(d.value || 0).toLocaleString()}M (${percentage}%) `; }); }); return svg.node(); }47:T779,chart_sankey_region = { const { nodes, links } = sankey({ nodes: data_sankey_region.nodes.map((d) => Object.assign({}, d)), links: data_sankey_region.links.map((d) => Object.assign({}, d)) }); const svg = d3 .select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0 + 1) .attr("y", (d) => d.y0) .attr("width", (d) => d.x1 - d.x0 - 2) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => { let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.5); }) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString()}M`); const link = svg .append("g") .attr("fill", "none") .selectAll("g") .data(links.sort((a, b) => b.width - a.width)) .join("g") .attr("stroke", (d) => d3.color(d.color) || color) .style("mix-blend-mode", "multiply"); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-width", (d) => Math.max(1, d.width)); link .append("title") .text( (d) => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}M` ); svg .append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text((d) => ` ${d.value.toLocaleString()}M`); return svg.node(); }48:T777,chart = { const { nodes, links } = sankey({ nodes: data_sankey_consolidated.nodes.map((d) => Object.assign({}, d)), links: data_sankey_consolidated.links.map((d) => Object.assign({}, d)) }); const svg = d3 .select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0 + 1) .attr("y", (d) => d.y0) .attr("width", (d) => d.x1 - d.x0 - 2) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => { let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.5); }) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString()}M`); const link = svg .append("g") .attr("fill", "none") .selectAll("g") .data(links.sort((a, b) => b.width - a.width)) .join("g") .attr("stroke", (d) => d3.color(d.color) || color) .style("mix-blend-mode", "multiply"); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-width", (d) => Math.max(1, d.width)); link .append("title") .text( (d) => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}M` ); svg .append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text((d) => ` ${d.value.toLocaleString()}M`); return svg.node(); }49:[{"id":"e18a9de52cb7c7e264b840a1c9af6f05b7284707b8a33ad969a0e1028d40aa92a243997122eb0c94581f661ddf219df9f861092ca0a4d410fcbe2c949885ae3b","href":"https://static.observableusercontent.com/files/e18a9de52cb7c7e264b840a1c9af6f05b7284707b8a33ad969a0e1028d40aa92a243997122eb0c94581f661ddf219df9f861092ca0a4d410fcbe2c949885ae3b","name":"sankey_segment@4.json","type":"application/json","lastModified":1732958722935.009,"size":2831},{"id":"e5689607261569d4ddeef98550be6053d8c99971b345ff273816ba11b97c2d461296382e653dc5939ba8695d9a096f0bf5296d47dca6e129fdbeb38b87b75a91","href":"https://static.observableusercontent.com/files/e5689607261569d4ddeef98550be6053d8c99971b345ff273816ba11b97c2d461296382e653dc5939ba8695d9a096f0bf5296d47dca6e129fdbeb38b87b75a91","name":"sankey_consolidated@1.json","type":"application/json","lastModified":1732444874320.565,"size":4687},{"id":"b43005c08e6a4c9d60e846315280eff58df295c21e9c7a3034b2a36fd70019d3b7ab99f408e51a80e915c971e297aa14ad70fb9177a9a2210e782c43782a140e","href":"https://static.observableusercontent.com/files/b43005c08e6a4c9d60e846315280eff58df295c21e9c7a3034b2a36fd70019d3b7ab99f408e51a80e915c971e297aa14ad70fb9177a9a2210e782c43782a140e","name":"sankey_region.json","type":"application/json","lastModified":1732450871341.58,"size":3076}] 43:{"id":"b5e9b9343030345f","slug":null,"title":"2024 NIKE Income Statement","thumbnail":"8724f7241b57768f384c73db04d6f897a301e1f8d9175f15c06e0645f3d15118","access_level":"public","create_time":"$D2024-11-24T09:51:27.453Z","update_time":"$D2024-12-01T14:38:40.651Z","view_time":null,"first_public_time":"$D2024-11-24T09:51:27.453Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d8db32a99c8ff2ba","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":"starter_2024","bio":"I create interactive data visualization products that provide insights and help people make data driven decisions.","following":false},"version":282,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e90c678020da2934","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":null,"bio":"I create interactive data visualization products that provide insights and help people make data driven decisions.","following":false}],"members":[{"type":"team","id":"d8db32a99c8ff2ba","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e90c678020da2934","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2024 NIKE Income Statement","cells":[{"id":0,"value":"# 2024 NIKE Income Statement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"## by Segment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"#### Color option 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"#### Color option 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"data_sankey_segment = FileAttachment(\"sankey_segment@4.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"### by Region","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"data_sankey_region = FileAttachment(\"sankey_region.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"### by Segment & Region","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"data_sankey_consolidated = FileAttachment(\"sankey_consolidated@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function parseGraph(source) {\n const links = d3.csvParseRows(\n source,\n ([source, target, value, linkColor = color]) =>\n source && target\n ? {\n source,\n target,\n value: !value || isNaN((value = +value)) ? 1 : value,\n color: linkColor\n }\n : null\n );\n const nodeByName = new Map();\n for (const link of links) {\n if (!nodeByName.has(link.source))\n nodeByName.set(link.source, { name: link.source });\n if (!nodeByName.has(link.target))\n nodeByName.set(link.target, { name: link.target });\n }\n return { nodes: Array.from(nodeByName.values()), links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"sankey = d3\n .sankey()\n .nodeId((d) => d.name)\n .nodeAlign(d3.sankeyCenter)\n .nodeSort(null)\n .nodeWidth(15)\n .nodePadding(padding)\n .extent([\n [0, 5],\n [width, height - 5]\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"padding = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"color = \"#dddddd\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"nodeLabelPadding = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"nodeWidth = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"nodePadding = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"marginTop = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"marginRight = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"marginBottom = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"marginLeft = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"linkStrokeOpacity = 0.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"linkMixBlendMode = \"multiply\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"