30:T6f4,# Interactive BCG Matrix Component The **BCG Matrix** (aka **Growth-share matrix**) provides a strategic view for analyzing business units, products or services by splitting them into four quadrants according to the growth and relative market share: **question marks**, **stars**, **dogs** and **cows**. Each quadrant has its own set of unique characteristics that represents a certain degree of profitability. This helps companies decide where to focus their resources to generate the most value, as well as where to cut their losses. Below is a brief breakdown of each quadrant: - **Cows: Low growth, high share**. They are typically the leading products and companies should milk these **"cash cows"** for cash. - **Stars: High growth, high share**. Products that are in a fast-growing market and generate the most cash are considered stars and should be invested in more. - **Question Marks: High growth, low share**. Products in this category are growing rapidly but bring little in return and they usually consume significant amount of resources. These must be analyzed carefully in order to determine whether they are worth investing more or should discard. - **Dogs: Low growth, low share**. Dogs (aka pets) frequently break-even, are neither generating nor consuming a large amount of resources. However, they are usually cash traps and tie up investment that could better be utilized elsewhere. Products in this quadrant are candidates for liquidation unless they have some other strategic purpose. ## Feature Showcase31:Td6a,viewof options = form(html` `)32:T62d,chart = { const matrix = new BCGMatrix( sampleData, { width: width, height: 600, highlightScope: options.highlight, numOfTopBottoms: options.num, showTooltip: options.showTooltip, showAnnotation: options.showAnnotation, showTicksOnRules: options.showTicks, columns: { name: { name: "Subcategory" }, x: { name: "Sales", label: "Sales (USD)", format: { short: ",.2s", long: ",.0f" } }, y: { name: "YOY", label: "YoY Growth %", format: { short: ".0%", long: ".1%" } }, radius: { name: "Profit", label: "Profit (USD)", format: { short: ",.2s", long: ",.0f" } } }, zones: { showIcons: options.showIcon, showLabels: options.showLabel, showBackground: options.fill, questionMarks: { icon: Icons.questionMark, color: options.questionMark }, dogs: { icon: Icons.dog, color: options.dog }, stars: { icon: Icons.star, color: options.star }, cows: { icon: Icons.cow, color: options.cow } }, events: { onrulemove: updateDots } } ); invalidation.then(() => matrix.dispose()); const svg = matrix.render(); updateDots(); return svg; function updateDots() { mutable dots = [0, 1, 2, 3].flatMap(i => matrix.getDots(i).map(d => (d.zone = i, d))); } }33:T5d7,miniPlot = { const padding = 10, prop = options.prop, wf = (width - padding * 3) / dots.length, domain = d3.extent(dots.map(d => d[prop])), labels = ["Question Marks", "Stars", "Dogs", "Cows"], colors = [options.questionMark, options.star, options.dog, options.cow], trim = s => s.length > 10 ? s.substring(0,10) + "..." : s; const plots = [1, 3, 0, 2].map((zone, i) => { const data = dots.filter(d => d.zone === zone); if (data.length) { const plot = Plot.plot({ width: data.length * wf, height: 150, marginLeft: 35, marginBottom: 60, x: { tickSize: 1, tickRotate: 45, label: labels[zone] }, y: { label: i === 0 ? prop === "x" ? "Sales (USD)" : prop === "r" ? "Profit (USD)" : "YoY growth (%)" : null, nice: true, grid: true, domain, ticks: 5, tickFormat: prop === "y" ? "%" : "s" }, marks:[ Plot.barY(data, { x: d => trim(d.name), y: prop, fill: colors[zone], fillOpacity: 0.8, title: d => `${d.name}\n${d3.format(prop === "y" ? ".2%" : ",")(d[prop])}`, sort: {x: "y", reverse: true} }) ] }) if (zone > 0) plot.style += `;margin-left: ${padding}px`; return plot; } }).filter(d => d); return html`

${plots}

`; }34:T555,viewof options5 = form(html`

X: Linear Log Sqrt Pow

Y: Linear Sqrt Pow

Enable Radius

`)35:T455,chart4 = { const matrix = new BCGMatrix( cars.filter(d => +d.Year.substring(0,4) === +options4.year), { width: width, height: height, highlightScope: "all", columns: { name: { name: "Name" }, x: { name: "Horsepower", label: "horsepower (hp)", format: { short: ",.2s", long: ",.0f" } }, y: { name: "Acceleration", label: "acceleration (sec.)", format: { short: ",.2s", long: ",.0f" } } }, zones: { questionMarks: { color: "#9c755f", icon: carIcons.turtle, caption: "Turtles" }, cows: { color: "#ff9da7", icon: carIcons.rocket, caption: "Rockets" }, stars: { color: "#f28e2c", icon: carIcons.tank, caption: "Tanks" }, dogs: { color: "#4e79a7", icon: carIcons.run, caption: "Runners" } } } ); invalidation.then(() => matrix.dispose()); return matrix.render(); }36:T11d6,## API Reference and Source Code * **BCGMatrix(data, options)** - Constructs a new instance of BCGMatrix with the specified dataset and options. * **container** - the container is usually an SVG element but can be any DOM element as well, and it is optional. * **width** - the width of the matrix. Default is 1024. * **height** - the height of the matrix. Default is 768. * **highlightScope** - sets the highlight scope to *"none"*, *"all"*, *"min"*, *"max"*, *"minMax"*, *"top"*, *"bottom"* or *"topBottom"*. Default is "none". * **numOfTopBottoms** - an integer value that indicates the number of dots should be highlighted when the **radius** channel is specified and the **highlightScope** is *"top"*, *"bottom"* or *"topBottom"*. Default is 5. * **dotRadius** - sets the radius of dot. Default is 5; * **bubbleRadiusRange** - sets the range of dot radius when the **radius** channel is specified. Default is [5, 30]. * **showTooltip** - specifies whether the tooltip is enabled. * **showAnnotation** - specifies whether the annotation is enabled. * **showTicksOnRules** - specifies whether the ticks is displayed on rules. * **x**, **y**, **radius** - sets scale parameters for x, y and radius axis. * **initValue** - specifies the initial value (position) for horizontal (y) or vertical (x) rule. * **exponent** - sets the exponent for scalePow. * **scaleType** - sets the type of scale to *"linear"*, *"log"*, *"sqrt"* or *"pow"*. Default is "linear". ~~~js new BCGMatrix(data, { x: { initValue: 1500, exponent: 0.5, scaleType: "pow" } }); ~~~ * **columns** - sets column name, label and display format for each axis. * **name** * **name** - sets the column name * **x**, **y**, **radius** * **name** - sets the column name * **label** - sets the display label * **format** - sets number format * **short** - the number format for axis ticks. Default is ",.2s". * **long** - the number format for the value displayed in tooltip and annotation. Default is ".,2f". ~~~js new BCGMatrix(data, { columns: { name: { name: "Subcategory" }, x: { name: "Sales", label: "Sales (USD)" }, y: { name: "YOY", label: "YOY Growth %", format: { short: ".0%", long: ".1%" } } } }); ~~~ * **zones** - sets the caption, color and icon of each quadrant. * **stars**, **cows**, **questionMarks**, **dogs** * **caption** - sets the caption * **color** - sets the color * **icon** - sets the icon * **colors** - overrides the default color settings. * **rule** - sets the color of rules. Default is "#aaa". * **text** - sets the color of labels. Default is "black". * **ticks** - sets the color of ticks. Default is "black". * **background** - sets the background color of the chart. Default is "none". * **font** - overrides the default font settings. * **family** - sets the font family. * **size** - sets the font size. Default is 9. * **style** - sets the font style. Default is "normal". * **weight** - sets the font weight. Default is "normal". * **events** - *please refer to the first demo for usage*. * **onclick** - occurs when clicking on a dot. This event has two arguments: * **e** - the PointerEvent instance * **d** - datum * **onhover** - occurs when the mouse hovers over a dot. This event has two arguments - e and d. * **onleave** - occurs when the mouse leaves a dot. This event has two arguments - e and d. * **onrulemove** - occurs when a rule is dragging by the user. This event has three arguments - id, position and value. * **id** - * **1** - vertical rule * **2** - horizontal rule * **position** - the x or y position of the rule * **value** - the current value of the rule * **onrulechange** - occurs when the user has finished drags a rule. This event has three arguments - id, position and value. * **render()** - Renders the matrix and returns the matrix SVG if container is not assigned in the constructor. * **dispose()** - Disposes allocated resources and removes event listeners. * **getDots(zoneIndex)** - Returns an array of all the dots in the specified zone. * **zoneIndex**: * **0** - questionMarks * **1** - stars * **2** - dogs * **3** - cows37:[{"id":"cddfa9616daea0fbd6f870bbfcff014eca1d215accc6b34bcaa540c9cfb41b4e66eaa4cb8296c305d69611bc241e917dea2b05ded9691adba4db9ebd983e6b15","href":"https://static.observableusercontent.com/files/cddfa9616daea0fbd6f870bbfcff014eca1d215accc6b34bcaa540c9cfb41b4e66eaa4cb8296c305d69611bc241e917dea2b05ded9691adba4db9ebd983e6b15","name":"run.svg","type":"image/svg+xml","lastModified":1635674312956.881,"size":859},{"id":"33154bfbba41a6c9c55bfa4ea0c344183194746d71d8136043c08913a92b7419dfc190a7c7ca2566ee56e8e481104037ec1447aa6a5aa5f53c8b1f3d022f9a0a","href":"https://static.observableusercontent.com/files/33154bfbba41a6c9c55bfa4ea0c344183194746d71d8136043c08913a92b7419dfc190a7c7ca2566ee56e8e481104037ec1447aa6a5aa5f53c8b1f3d022f9a0a","name":"classdiagram@3.png","type":"image/png","lastModified":1635803708811.807,"size":326387},{"id":"bdcfff63f088dc11871cc1991f885f81c3b22ee192e00e6193f552b2e3e5d9b8a60d2ae9ad47cf8cfd7f8efd07c0c09db905e787ad06bababd11ba2a2a981145","href":"https://static.observableusercontent.com/files/bdcfff63f088dc11871cc1991f885f81c3b22ee192e00e6193f552b2e3e5d9b8a60d2ae9ad47cf8cfd7f8efd07c0c09db905e787ad06bababd11ba2a2a981145","name":"turtle.svg","type":"image/svg+xml","lastModified":1635674313081.791,"size":1190},{"id":"fe9c335e6c141b764df97291e6f40bfc8e67ff8e28f48ce6e5291592704bda68ef7c40b42eeb90a953de5b56c5364afe5e3a7ad3ac3d3b6a2b0dcde7aab7cc03","href":"https://static.observableusercontent.com/files/fe9c335e6c141b764df97291e6f40bfc8e67ff8e28f48ce6e5291592704bda68ef7c40b42eeb90a953de5b56c5364afe5e3a7ad3ac3d3b6a2b0dcde7aab7cc03","name":"rocket.svg","type":"image/svg+xml","lastModified":1635674313103.901,"size":634},{"id":"e32db33c5ca534e38efa6bd26ea89d396a284c08aa56555d30c2d79841eb004caec9f25b4eea17487fe42320e1ba100363f296bb0553651e0a9a46f9c41b9a35","href":"https://static.observableusercontent.com/files/e32db33c5ca534e38efa6bd26ea89d396a284c08aa56555d30c2d79841eb004caec9f25b4eea17487fe42320e1ba100363f296bb0553651e0a9a46f9c41b9a35","name":"tank@1.svg","type":"image/svg+xml","lastModified":1635678020618.65,"size":1687},{"id":"cce015f024866f4c3d38e3e4d864792aeca3e09816d91e26232ab17bfa9d8e919b04d3a5ee073e7b9f36c17ff7a9100d369eeff062ff687b1550be996badd552","href":"https://static.observableusercontent.com/files/cce015f024866f4c3d38e3e4d864792aeca3e09816d91e26232ab17bfa9d8e919b04d3a5ee073e7b9f36c17ff7a9100d369eeff062ff687b1550be996badd552","name":"cost_profit.csv","type":"text/csv","lastModified":1635707773138.963,"size":1186},{"id":"7992e5779da168791a46dcf4c14c2bdc353d69478d258afd09501998bca4a12979ed1f1d70a41e8e15ed4a4ffa9df7e11daf9330b62fc4bdea888e6db9cc59f1","href":"https://static.observableusercontent.com/files/7992e5779da168791a46dcf4c14c2bdc353d69478d258afd09501998bca4a12979ed1f1d70a41e8e15ed4a4ffa9df7e11daf9330b62fc4bdea888e6db9cc59f1","name":"sample.csv","type":"text/csv","lastModified":1635739571763.813,"size":1161}] 2e:{"title":"Interactive BCG Matrix Component","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"👆👆👆 This beautiful mini chart is powered by the 🙏**Almighty Plot**🙏.","pinned":false,"hidden":false,"mode":"md"},{"id":708,"value":"## Axis Scale and Smart Label\nThe example below is an excellent demonstration to show the usage of different scale types. By adjusting the scale parameters, you can also observe how well the **\"Smart Label\"** feature plays out.","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"chart5 = {\n const matrix = new BCGMatrix(\n sample,\n {\n width: width,\n height: height, \n highlightScope: \"all\",\n x: {\n scaleType: options5.scaleX,\n exponent: +options5.kX\n },\n y: {\n scaleType: options5.scaleY,\n exponent: +options5.kY\n },\n columns: {\n name: { name: \"state\" },\n x: {\n name: \"orders\", \n format: { short: \",.2s\", long: \",.0f\" }\n },\n y: {\n name: \"yoy\", \n label: \"yoy growth (%)\",\n format: { short: \".0%\", long: \".0%\" }\n },\n radius: options5.enableRadius ? { name:\"profit\" } : null\n },\n zones: {\n questionMarks: {icon: Icons.questionMark},\n dogs: {icon: Icons.dog},\n stars: {icon: Icons.star},\n cows: {icon: Icons.cow}\n }\n }\n );\n\n invalidation.then(() => matrix.dispose());\n return matrix.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"## Zone Customization\nThe BCGMatrix is basically a scatter chart with a quadrant graph on top of it. As the examples below demonstrate, this can be very useful in providing an additional layer of information to support the interpretation of data depicted in the chart.","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"viewof options3 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"chart3 = {\n const matrix = new BCGMatrix(\n tidyCovid(options3.field).filter(d => d.month === options3.month),\n {\n width: width,\n height: height,\n highlightScope: \"all\",\n y: {\n initValue: 0,\n scaleType: \"linear\"\n },\n columns: {\n name: { name: \"state\" },\n x: {\n name: \"number\",\n label: options3.field,\n format: { short: \",.2s\", long: \",.0f\" }\n },\n y: {\n name: \"mom\",\n label: \"MoM growth %\",\n format: { short: \".1%\", long: \".1%\" }\n }\n },\n zones: {\n showIcons: false,\n showLabels: false, \n stars: { color: \"#e15759\" },\n cows: { color: \"#f28e2c\" },\n questionMarks: { color: \"#76b7b2\" },\n dogs: { color: \"#59a14f\" }\n }\n }\n );\n\n invalidation.then(() => matrix.dispose());\n return matrix.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"You can forget about the original meaning of each quadrant and give them a completely different one.","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"viewof options4 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"To get started, import **BCGMatrix**, default icons and the sample dataset from *\"@analyzer2004/bcgmatrix-source\"*:\n~~~js\nimport {BCGMatrix, Icons, sampleData} from \"@analyzer2004/bcgmatrix-source\"\n~~~\nThen, use the code snippet below to create a **BCGMatrix** using the sample dataset with default options. Have fun😀!!\n~~~js\nchart = {\n const matrix = new BCGMatrix(sampleData, { \n width: width,\n height: height,\n columns: {\n name: { name: \"Subcategory\" },\n x: {\n name: \"Sales\",\n label: \"Sales (USD)\"\n },\n y: {\n name: \"YOY\",\n label: \"YOY Growth %\",\n format: { short: \".0%\", long: \".1%\" }\n },\n radius: {\n name: \"Profit\",\n label: \"Profit (USD)\"\n }\n },\n zones: {\n questionMarks: { icon: Icons.questionMark },\n dogs: { icon: Icons.dog },\n stars: { icon: Icons.star },\n cows: { icon: Icons.cow }\n }\n });\n\n invalidation.then(() => matrix.dispose());\n return matrix.render();\n}\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"### Class Diagram","pinned":false,"hidden":false,"mode":"md"},{"id":1048,"value":"reference(await FileAttachment(\"classdiagram@3.png\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"async function reference(url) {\n const img = html`

`;\n await img.decode();\n const baseCSS =\n \"display:block;border:10px solid transparent;box-sizing:border-box;\";\n const buttons = Object.entries({\n fit: \"max-width:100%;max-height:100%;\",\n \"fit width\": \"max-width:100%;\",\n ...Object.fromEntries(\n [0.25, 0.5, 0.75, 1, 2].map((v) => [\n `${Math.round(v * 100)}%`,\n `max-width:none;width:${img.width * v}px`\n ])\n )\n }).map(\n ([label, css]) =>\n htl.html`

Monthly COVID data by state

Cars