2b:null 2c:["$","title",null,{"children":"How Corporations Use the Illusion of Choice in Capitalism to Control Markets and Limit Consumer Power | Akhila Sulgante | Observable"}] 31:Te99,chart = { const root = d3.hierarchy(data); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "10px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }32:Td1e,chart2 = { const root = partition(data); root.each(d => d.current = d); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, width]) .style("font", "10px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width / 2},${width / 2})`); const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") // .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); path.filter(d => d.children) .style("cursor", "pointer") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .on("click", clicked); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name); const parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = g.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }33:[{"id":"1cd8efc0f6fd74ebb4fa052c309b01c6a45cd9db24d23c165b659fde2ed59a499f4ffed5a505986543d26542dd823b17d4dbda4486061f680995dc6395f0b0ad","href":"https://static.observableusercontent.com/files/1cd8efc0f6fd74ebb4fa052c309b01c6a45cd9db24d23c165b659fde2ed59a499f4ffed5a505986543d26542dd823b17d4dbda4486061f680995dc6395f0b0ad","name":"image.png","type":"image/png","lastModified":1680082877493.676,"size":62727},{"id":"a48a8d03e240b6bee3e603aefce62ebef7cd757bcf52092567b557c2d94ade132b6e9a318ef31991dd7de54ca850ba71d095eee8ebabda70bb9b7b5c9e661050","href":"https://static.observableusercontent.com/files/a48a8d03e240b6bee3e603aefce62ebef7cd757bcf52092567b557c2d94ade132b6e9a318ef31991dd7de54ca850ba71d095eee8ebabda70bb9b7b5c9e661050","name":"treeData.csv","type":"text/csv","lastModified":1680076063920.863,"size":7971}] 2f:{"id":"3f74ec5e1ad9c06d","slug":null,"title":"How Corporations Use the Illusion of Choice in Capitalism to Control Markets and Limit Consumer Power","thumbnail":"373148cece2ec9bc027f221f86359e669079fb74208e90d218ac6495f2a16467","access_level":"public","create_time":"$D2023-03-29T07:44:40.919Z","update_time":"$D2023-03-29T19:42:33.085Z","view_time":null,"first_public_time":"$D2023-03-29T07:44:40.919Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e76678b312b62ab3","login":"akhila","name":"Akhila Sulgante","avatar_url":"https://avatars-next.observableusercontent.com/2e264e285632a44937edf6eb6b531fffbd152d07233e70f4c70c2cd9a5cd9e09","tier":"starter_2024"},"version":136,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"667daa7e86be0e8e","login":"akhila","name":"Akhila Sulgante","avatar_url":"https://avatars-next.observableusercontent.com/2e264e285632a44937edf6eb6b531fffbd152d07233e70f4c70c2cd9a5cd9e09","tier":null}],"members":[{"type":"individual","id":"667daa7e86be0e8e","login":"akhila","name":"Akhila Sulgante","avatar_url":"https://avatars-next.observableusercontent.com/2e264e285632a44937edf6eb6b531fffbd152d07233e70f4c70c2cd9a5cd9e09","tier":null,"role":"editor"}],"comments":[{"id":"919710a02c6a38c2","reply_to_id":null,"content":"Derived attributes are position","create_time":"$D2023-03-29T21:11:38.926Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"667daa7e86be0e8e","login":"akhila","name":"Akhila Sulgante","avatar_url":"https://avatars-next.observableusercontent.com/2e264e285632a44937edf6eb6b531fffbd152d07233e70f4c70c2cd9a5cd9e09","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"How Corporations Use the Illusion of Choice in Capitalism to Control Markets and Limit Consumer Power","cells":[{"id":0,"value":"# How Corporations Use the Illusion of Choice in Capitalism to Control Markets and Limit Consumer Power\n__Capitalism at its core__\n\nThis Visualization is created by [Akhila Sulgante](https://akhilasulgante.github.io/portfolio) as a part of [CS 7295 class](https://johnguerra.co/classes/data_visualization_spring_2023/) at Northeastern under the guidance of [prof. John Alexis Guerra Gómez](https://johnguerra.co/)\n\n[Walkthrough video](https://youtu.be/rii0POXXMD4)
\n[Tweet](https://twitter.com/akhila_sulgante/status/1641142041911635968?t=kgIuwIRNYS9bXTmatbcqeA&s=08)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"## An Illusion of Choice\nNote: Few categories are collapsible to avoid over-crowding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Introduction\nThis notebook explores how certain companies create the illusion of choice for their customers through clever marketing strategies and business models. The article discusses how companies use tactics such as product differentiation, bundling, and pricing strategies to make customers feel like they have a variety of options to choose from. In reality, they are limited in their choices. This notebook facilitates understanding these tactics, which help consumers become savvier in their purchasing decisions and avoid falling for the illusion of choice.\n\nThe Data in this notebook is manually generated by [reference article](https://www.jamesgood.co.uk/blog/illusion-choice) So please consider margin of Human error for the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## Actual Insights\n1. A lot of companies that consumers think are different options are controlled by the same company\n2. Nestle being one of the biggest food companies owns part of most of the luxurious brands such as Armani, YSL, and a few others\n3. Competition is very cut-throat in the FMCG category as new startups will not be able to scale to the demand as these companies\n4. Market is controlled by few major companies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"## Made-up Insights[Hypothesis]\n1. Most big brand companies will have at most 2-3 well-established brands in a particular category, as it will also lead to a conflict of interest when it comes to promoting brands in the same space[Selected]\n * **Considerations**\n * I will need enough data on brands under each company\n * I need to iterate all the brands and know the category all the brands fall into\n * In terms of the idiom (visualization), I would need to display each brand under the parent company\n \n2. Companies like Kraft will have their portfolio filled with food companies, P&G for lifestyle and major brand companies like Coca-cola will have at most one major beverage brand\n * **Considerations**\n * I will need enough data on brands under each company\n * I need to classify brands into categories\n * In terms of the idiom (visualization), I would need to display each brand and its associated category under the parent company","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"## Target Audience\n1. Consumers who wants to make an informed decision\n2. Consumers and business professionals who are interested in understanding the strategies and tactics that companies use to market their products and services\n3. Individuals who are interested in consumer behavior, marketing, and business strategy\n4. Individuals who wants to understand FMCG space and market share distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"## Data Abstraction(What)\n* **Dataset type:** Table (converted to Tree)\n* **Dataset Availability:** Static\n* **Attributes used:**\n \n **`Parent company`** (_Categorical_): Major companies considered to under FMCG space\n\n **`Brands`** (_Categorical_): Brands that are owned by companies\n\n **`Market`**(_Categorical_): Market space under consideration(Root node)\n\n* **Data Source:** Majorly reference through [this](https://www.jamesgood.co.uk/blog/illusion-choice) article and the data was manually curated ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"## Task Abstraction(Why)\nThis notebook can serve the purpose of consuming\n\nAbstracting at the Task level for made-up insights\n1. **T1:**
\n(_Insight_): Most big brand companies will have at most 2-3 well-established brands in a particular category, as it will also lead to a conflict of interest when it comes to promoting brands in the same space
\nIdentify the sharks with the most mutual investment
\nSub-task 1: (_Identify_) Identify the brands from a particular category under a parent company(_Distribution_)
\nSub-task 2: (_Identify_) the number of brands that are in the same category (_Distribution_)
\nSub-task 3: (_Compare_) the number of competing brands that are under the same company","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"## Idiom Abstraction(How)\n* **Marks:** Points, Lines\n * **Channels:** \n - **Position**: To identify the levels of the tree\n * Attribute: Companies, brands\n * Expressiveness: Position changes show all the data at an appropriate level\n * Effectiveness: Position channel shows the parent and child relation effectively","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dx = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"dy = width / 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"partition = data => {\n const root = d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value);\n return d3.partition()\n .size([2 * Math.PI, root.height + 1])\n (root);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"arc = d3.arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n .padRadius(radius * 1.5)\n .innerRadius(d => d.y0 * radius)\n .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"width = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"radius = width / 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"## Data Processing\nConverting table to Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"import { table2Tree } from \"@john-guerra/table-2-tree\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dataraw = FileAttachment(\"treeData.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"attr = Object.keys(dataraw[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"datazero = table2Tree(dataraw, attr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"data = datazero","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"