30:T577,Apple = [{source: "iPhone", target: "Devices revenue", value: 40.7}, {source: "iMac", target: "Devices revenue", value: 7.4}, {source: "iPad", target: "Devices revenue", value: 7.2}, {source: "Apple watch", target: "Devices revenue", value: 8.1}, {source: "Devices revenue", target: "Revenue", value: 63.4}, {source: "Services revenue", target: "Revenue", value: 19.6}, {source: "Revenue", target: "Devices gross profit", value: 21.9}, {source: "Revenue", target: "Services gross profit", value: 14.0}, {source: "Revenue", target: "Cost of Revenue", value: 47.1}, {source: "Devices gross profit", target: "Gross profit", value: 21.9}, {source: "Services gross profit", target: "Gross profit", value: 14.0}, {source: "Cost of Revenue", target: "Services", value: 5.6}, {source: "Cost of Revenue", target: "Devices", value: 41.5}, {source: "Gross profit", target: "Operating profit", value: 23.1}, {source: "Gross profit", target: "Operating expenses", value: 12.8}, {source: "Operating profit", target: "Net Profit", value: 19.4}, {source: "Operating profit", target: "Tax", value: 3.6}, {source: "Operating expenses", target: "R & D", value: 6.8}, {source: "Operating expenses", target: "Selling, general, admin", value: 6.0}, ]31:T1ce6,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sankey-diagram function SankeyChart({ nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, text to label the associated rect nodeTitle = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkValue = ({value}) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeCategory10,//d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 30, // left margin, in pixels } = {}) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id})); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]})); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey.sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]) ({nodes, links}); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0); var source = svg .append("text") .attr("transform", `translate(${marginRight}, ${height - 4*marginBottom})`) // .attr("y", height-150) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .style("font-size", "8px") .style("font-style", "italic") .attr("fill-opacity", 0.3); txtsource.forEach(d => { source .append("tspan") .attr("x", 0) .attr("dy", 8) .text(d); }); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link.append("linearGradient") .attr("id", d => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") .attr("stop-color", ({source: {index: i}}) => color(G[i]))) .call(gradient => gradient.append("stop") .attr("offset", "100%") .attr("stop-color", ({target: {index: i}}) => color(G[i]))); link.append("path") .attr("d", linkPath) .attr("stroke", linkColor === "source-target" ? ({index: i}) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({source: {index: i}}) => color(G[i]) : linkColor === "target" ? ({target: {index: i}}) => color(G[i]) : linkColor) .attr("stroke-width", ({width}) => Math.max(1, width)) .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); if (Tl) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(({index: i}) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), {scales: {color}}); }32:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1662715383453.19,"size":13506},{"id":"8d807624b4de528a039159b57dea402e1952e7309ad78620820b33b45eddc9929a7e9b0ca64c674f426aa5b76dbc1f9b52d7de3e993cd55385071e65cd1f0355","href":"https://static.observableusercontent.com/files/8d807624b4de528a039159b57dea402e1952e7309ad78620820b33b45eddc9929a7e9b0ca64c674f426aa5b76dbc1f9b52d7de3e993cd55385071e65cd1f0355","name":"moby-dick-chapter-1.txt","type":"text/plain","lastModified":1662715383453.19,"size":12260},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1662715383453.19,"size":48219}] 2e:{"title":"2022 Q2 PROFIT: 🛢 vs. 👨‍💻","cells":[{"id":1053,"value":"title = md`# 2022 Q2 PROFIT: 🛢 vs. 👨‍💻`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"viewof select = swatchesInput({\n color: d3.scaleOrdinal(\n [...companies],\n [\"#1f77b4\",\"#ff7f0e\",\"#2ca02c\",\"#d62728\",\"#9467bd\",\"#8c564b\",\"#e377c2\",\"#7f7f7f\",\"#bcbd22\",\"#17becf\"])\n, //width: 600,\n //height: 1550\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"pchart = addTooltips(Plot.plot({caption: \"👉 Click on the colored legend to select companies\",\n y: {\n grid: true,\n label: \"↑ 2022 Q2 Net Profit in Billions USD\"\n },\n x: {\n //grid: true,\n tickSize: 0,\n label: \"\"\n },\n color: color,\n/* {\n type: \"ordinal\",\n scheme: \"category10\",\n //legend: true\n },*/\n marks: [\n Plot.barY(profits2, \n Plot.stackY({\n // for this reverse to work, we need an explicit Plot.stackY;\n // we could dispense with it if we just wanted an _order_.\n reverse: true,\n ...Plot.groupX(\n {y: \"sum\"}, \n {\n y: \"profit\", x: \"species\", order: \"sum\", fill: \"company\", \n title: (elems) => `${elems.company}\\n\\$${elems.profit}bn`\n }\n )\n })),\n Plot.ruleY([48.4], {stroke: \"#17becf\", strokeDasharray: [4,3]}),\n Plot.ruleY([0], {stroke: \"black\"})\n ]\n}),{opacity: 0.75, \"stroke-width\": \"2px\", stroke: \"black\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"schart = SankeyChart({\n links: Apple\n}, {\n nodeGroup: d => d.id.split(/\\W/)[0], // take first word for color\n nodeAlign, // e.g., d3.sankeyJustify; set by input above\n linkColor, // e.g., \"source\" or \"target\"; set by input above\n format: (f => d => `${f(d)} bn`)(d3.format(\",.1~f\")),\n width: 1000,\n height: 540\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"viewof nodeAlign = Inputs.select([\"left\", \"right\", \"center\", \"justify\"], {\n value: \"left\",\n label: \"Node alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"viewof linkColor = Inputs.select(new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"],\n]), {\n value: new URLSearchParams(html``.search).get(\"color\") || \"source-target\",\n label: \"Link color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"profits2 = select.length !=0?profits_sort.filter(d =>select.includes(d.company)):profits_sort","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"profits_sort = profits.sort((a,b)=>(b.species - a.species || a.species.localeCompare(b.species)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"profits = [\n {\"species\":\"Big Tech\", \"company\": \"Apple\", \"profit\": 19.4},\n {\"species\":\"Big Tech\", \"company\": \"Microsoft\", \"profit\": 16.9},\n {\"species\":\"Big Tech\", \"company\": \"Meta\", \"profit\": 6.7},\n {\"species\":\"Big Tech\", \"company\": \"Tesla\", \"profit\": 2.4},\n {\"species\":\"Big Tech\", \"company\": \"Amazon\", \"profit\": 1.1},\n {\"species\":\"IOC\", \"company\": \"Exxon\", \"profit\": 17.9},\n {\"species\":\"IOC\", \"company\": \"Chevron\", \"profit\": 11.6},\n {\"species\":\"IOC\", \"company\": \"Shell\", \"profit\": 11.5},\n {\"species\":\"IOC\", \"company\": \"BP\", \"profit\": 9.3},\n {\"species\":\"NOC\", \"company\": \"Saudi Aramco\", \"profit\": 48.4}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"import {StackedBarChart} from \"@cadasa/sncc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":908,"value":"import { swatchesInput } from \"@clhenrick/color-swatches-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1114,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"key = Swatches(chart.scales.color, {title: \"Age (years)\"}) // try also Swatches","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"chart = StackedBarChart(profits_sort, {\n x: d => d.species,\n y: d => d.profit,\n z: d => d.company,\n xDomain: d3.groupSort(profits_sort, D => d3.sum(D, d => d.profit), d => d.species).reverse(),\n yLabel: \"↑ Count\",\n zDomain: companies,\n colors: d3.scaleSequential[companies.length],\n //[\"#1f77b4\",\"#ff7f0e\",\"#2ca02c\",\"#d62728\",\"#9467bd\",\"#8c564b\",\"#e377c2\",\"#7f7f7f\",\"#bcbd22\",\"#17becf\"],\n width: 700,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"companies_rev = companies.reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":871,"value":"companies = profits_sort.map(d => d.company).filter((x, i, a) => a.indexOf(x) == i)//.sort((a,b)=>d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"color = ({\n domain: companies,\n range: [\"#1f77b4\",\"#ff7f0e\",\"#2ca02c\",\"#d62728\",\"#9467bd\",\"#8c564b\",\"#e377c2\",\"#7f7f7f\",\"#bcbd22\",\"#17becf\"],\n legend: false\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"As an alternative to groupX, we can stack bars using groupZ while faceting. This lets us use *proportion-facet* to compute percentages within each facet.","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Plot.plot({\n y: {\n grid: true,\n //percent: true\n },\n color: {\n type: \"ordinal\",\n scheme: \"category10\",\n legend: true\n },\n facet: {\n data: profits,\n x: \"species\"\n },\n marks: [\n Plot.barY(profits, Plot.groupZ({y: \"sum\"}, {y: \"profit\", fill: \"company\", sort: {reverse: true}})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"},{"id":1220,"value":"txtsource = (\n \" \").split(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1213,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}