31:T6d1,{ const data = [ ...Object.values(shadesWithColorDataByBrandsByProductCount).map( (series) => ({ x: series.map((d) => d.oklab.a), y: series.map((d) => d.oklab.b), z: series.map((d) => d.oklab.l), hovertext: series.map( (d) => ` Brand: ${d.brand}
Product: ${d.product}
Name: ${d.name}
Hex: ${d.hex}
Okhsl: ${d.hue ? d.hue.toFixed(0) : 0} ${d.saturation.toFixed( 2 )} ${d.lightness.toFixed(2)} ` ), mode: "markers", name: series[0].brand, type: "scatter3d", marker: { size: 5, color: series.map((point) => point.hex), opacity: 1 } }) ), { x: rgbGamutInOklab.map((point) => point.a), y: rgbGamutInOklab.map((point) => point.b), z: rgbGamutInOklab.map((point) => point.l), mode: "markers", name: "RGB gamut", type: "scatter3d", marker: { size: 5, color: rgbGamutInOklab.map((point) => point.hex), opacity: 0.1 } } ]; const layout = { margin: { l: 0, r: 0, b: 0, t: 0 }, height: 600, width: 800, scene: { // camera: { // eye: { // x: 0, // y: -0.1, // z: 2 // } // }, aspectmode: "manual", aspectratio: { x: 1, y: 1, z: 1 }, xaxis: { title: { text: "a" } }, yaxis: { title: { text: "b" } }, zaxis: { title: { text: "L" } } } }; const div = DOM.element("div"); return Plotly.newPlot(div, data, layout); }32:T4cb,blueprint = ({ title, x = "saturation", y = "lightness", xDomain = [0, 1], aspectRatio = 1, height, sort = "hue", width, facet }) => { const n = facetColumns; // number of facet columns const keys = Object.keys(shadesWithColorDataByBrandsByProductCount); const index = new Map(keys.map((key, i) => [key, i])); const fx = (key) => index.get(key) % n; const fy = (key) => Math.floor(index.get(key) / n); return Plot.plot({ title, aspectRatio, height, width, x: { domain: xDomain }, marks: [ Plot.frame(), Plot.dot(shadesWithColorData, { fill: "hex", x, y, tip: true, filter: (d) => searchedShadesWithColorData.includes(d), sort, reverse, tip: true, r, href: "url", target: "_blank", channels: CHANNELS, fx: facet ? (d) => fx(d.brand) : undefined, fy: facet ? (d) => fy(d.brand) : undefined }), facet ? Plot.text(keys, { fx: facet ? fx : undefined, fy: facet ? fy : undefined, frameAnchor: "top-left", dx: 6, dy: 6 }) : undefined ] }); }33:T12ab,#### [_The Naked Truth_](https://pudding.cool/2021/03/foundation-names/) - [allShades.csv](https://github.com/the-pudding/data/blob/blueprint/foundation-names/README.md#allshadescsv--allshadesr) - Amber Thomas (2021) - `allShades.R`: The script used to combine the raw ulta and sephora data and to extract color information from each foundation swatch. - `allShades.csv`: The data, as described below - **What is this?**: The 6,816 foundation shades available from either Sephora or Ulta’s US websites. - **Source(s) & Methods**: See `scrape.js` for information on how the data were collected. Any products available on both Sephora and Ulta’s website were consolidated and Ulta’s version of the product was kept. (Ulta’s product descriptions were more consistent and thus extracting the name information was simpler). Color information was extracted using the `jpeg`, `magick`, and `imager` packages in R. See `allShades.R` for more information. - **Last Modified**: March 17, 2021 - **Contact Information**: [Amber Thomas](mailto:amber@pudding.cool) - **Spatial Applicability**: United States - **Temporal Applicability**: Sephora data was collected on January 11, 2021. Ulta data was collected on January 18, 2021. The data includes products that were out of stock on either day. - **Observations (Rows)**: There are 6816 rows in this dataset. Each row represents a single foundation shade. - **Variables (Columns)**: There are 13 columns in this dataset. They are described below: | Header | Description | Data Type | | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | | brand | The brand of foundation | character | | product | The product name | character | | url | URL to the product page | character | | description | The description associated with a particular swatch (e.g., “Shade 1 (fair cool)”) as displayed on the product page | character | | imgSrc | The url to the image displaying a swatch of this particular foundation shade | character | | imgAlt | The alt text attribute for a particular swatch, as is made available to assistive technology | character | | name | The programmatically extracted word-based name of this particular shade | character | | specific | The number or number/letter combination (e.g., “12CN”) used to label this particular shade | character | | colorspace | The colorspace used to analyze the shade (e.g., “RGB”) | character | | hex | The hexadecimal color code for the most prevalent color in the `imgSrc` swatch image (e.g., `#4F322C`) | character | | hue | The `hue` value from the HSL color space. This is represented as a number from 0 to 360 degrees around the color wheel | numeric | | sat | The `saturuation` value from the HSL color space. This represents the amount of gray in a color from 0 to 100 percent (*Note*: here, it is represented as a decimal from 0 to 1) | numeric | | lightness | The `lightness` value from the HSL color space. This is represented as a decimal from 0 to 1 where 0 is pure black and 1 is pure white | numeric | 34:T18e1,#### [_The Diversity of Makeup Shades_](https://pudding.cool/2018/06/makeup-shades/) - [shades.csv](https://github.com/the-pudding/data/blob/blueprint/makeup-shades/README.md) - Jason Li (2018) - **What is this?**: Data representing the shades of foundation offered by a variety of beauty brands around the world. - **Source(s) & Methods**: We collected a list of beauty brands in the US, Nigeria, India, and Japan that were considered by several sources to be "best sellers" in their home countries. We visited each brand's website during May 2018, found their liquid foundation line that (at the time of our sampling) had the largest number of shades available, and recorded the hex color values for each of the colored swatches shown for the product. Then, using Adobe Photoshop, we extracted the lightness value of each color (using the [CIE Lab color model](https://helpx.adobe.com/photoshop/using/color-modes.html#lab_color_mode)). Sources consulted to decide what brands/products to sample: * US bestseller lists: [POPSUGAR](https://www.popsugar.com/beauty/Bestselling-Foundations-Sephora-2017-43250396), [Amazon](https://www.amazon.com/Best-Sellers-Beauty-Foundation-Makeup/zgbs/beauty/11058871), [StyleCaster](http://stylecaster.com/beauty/best-selling-beauty-products-united-states/), [Refinery29](https://www.refinery29.com/most-popular-beauty-brands-new-york), [Statista](https://www.statista.com/statistics/194815/leading-us-foundation-brands-in-2013-based-on-sales/), [BEAUTY/crew](https://www.beautycrew.com.au/makeup/articles/the-internet-s-favourite-liquid-foundations/) * Articles recommending beauty products to people of color: [VIBE](https://www.vibe.com/2014/07/12-great-makeup-brands-for-women-of-color/), [Byrdie](https://www.byrdie.com/best-makeup-for-dark-skin), [The FADER](http://www.thefader.com/2017/08/22/black-owned-beauty-brands-katonya-breaux), [Allure](https://www.allure.com/gallery/best-foundations-for-women-of-color), [Glamour](https://www.glamour.com/gallery/black-owned-beauty-brands), [Fast Company](https://www.fastcompany.com/40443045/7-best-mainstream-beauty-brands-for-women-of-color), [THE CUT](https://www.thecut.com/2018/04/target-makeup-products-brands-people-of-color.html), [Bustle](https://www.bustle.com/articles/180408-32-black-owned-makeup-brands-to-add-to-your-beauty-collection-immediately-photos), [HuffPost](https://www.huffingtonpost.com/entry/black-owned-beauty-brands_us_5a7dc724e4b044b3821ccafb), [more.com](https://www.more.com/beauty/makeup/face-makeup/best-makeup-brands-created-specifically-women-color), [BuzzFeed](https://www.buzzfeed.com/treyegreen/best-makeup-products-people-of-color-lines), [Refinery29](https://www.refinery29.com/skin-care-brands-women-of-color) * Articles recommending Nigerian beauty products: [BeautyInLagos](http://www.beautyinlagos.com/2017/02/nigerian-makeup-brands-you-should-know-about.html/), [Beauty Geek](http://www.beautygeekng.com/2017/01/13/13-nigerian-makeup-brands/), [Lux Afrique](http://luxafrique.net/top-6-makeup-brands-by-nigerians/), [Zikel Cosmetics](http://www.zikelcosmetics.com/2016/04/25/7-hot-selling-makeup-brands-in-nigeria/), [Pulse.ng](http://www.pulse.ng/lifestyle/beauty-health/pulse-beauty-list-5-affordable-foundations-perfect-for-nigerian-weather-great-on-dark-skin-id4957957.html) [Pulse.ng again](http://www.pulse.ng/lifestyle/beauty-health/pulse-list-2017-top-8-nigerian-beauty-brands-of-the-year-id7717413.html), [Information Nigeria Women](http://women.informationng.com/14-awesome-foundations-for-dark-skin-tones/), [Girly Essentials](http://girlyessentials.com.ng/2017/07/25/the-nigerian-beauty-brand-that-stole-our-hearts-hegai-esther), [Winnie The Make-Up Artist](http://winniethemakeupartist.com/matte-foundations-in-nairobi/), [Jumia Travel](https://travel.jumia.com/blog/ng/5-nigerian-companies-who-changed-the-beauty-industry-1610) - **Last Modified**: June 5, 2018 - **Contact Information**: [Jason Li](mailto:jason@hongkonggong.com) - **Spatial Applicability**: United States, Nigeria, India, and Japan - **Temporal Applicability**: May 2018 - **Observations (Rows)**: Each row represents an individual product shade from one beauty brand. - **Variables (Columns)**: | Header | Description | Data Type | |---|---|---| | `brand` | The full written name of the brand that creates this foundation shade | text | | `brand_short` | An abbreviated (2-3 character) version of the brand's name without special characters or spaces. These are unique to the brand (i.e., there are no duplicate `brand_short` codes representing different brands) | text | | `product` | The full name of the foundation product that we sampled. For some brands, this is their only line of liquid foundation and for others this is the brand that (as of May 2018) contained the highest number of shades | text | | `product_short` | A 2-3 character string that is unique to this particular product and does not contain special characters or spaces | text | | `hex` | The hexadecimal color code for a particular shade (**Note**: this does not contain the leading `#` symbol) | text | | `H` | The `hue` value from the HSB or HSV color space. This is represented as a number from 0 to 360 degrees around the color wheel. | number | | `S` | The `saturation` value from the HSB or HSV color space. This is represented the amount of gray in a color from 0 to 100 percent. (**Note**: Here it is represented as a decimal from 0 to 1) | number | | `V` | The `value` (sometimes known as `brightness`) value from the HSB or HSV color space. This describes the brightness or intensity of a color from 0 - 100 percent. (**Note**: Here it is represented as a decimal from 0 to 1) | number | | `L` | The `lightness` value from CIE Lab color space. This is represented as a decimal number from 0 to 1| number | | `group` | The group with which this product should be analyzed. Each product only belongs to one group. We used 7 groups in this essay:
• `0`: Fenty Beauty's PRO FILT'R Foundation Only
• `1`: Make Up For Ever's Ultra HD Foundation Only
• `2`: US Best Sellers
• `3`: BIPOC-recommended Brands with BIPOC Founders
• `4`: BIPOC-recommended Brands with White Founders
• `5`: Nigerian Best Sellers
• `6`: Japanese Best Sellers
• `7`: Indian Best Sellers | number |35:[{"id":"00291ce78eba2fe0e23032b1bfcdf2310119127994231da969c0769e026dafdf317b0ac77ef6b73baff6c1ba769f4f31c74d4a5fe72214d86093108506884b78","href":"https://static.observableusercontent.com/files/00291ce78eba2fe0e23032b1bfcdf2310119127994231da969c0769e026dafdf317b0ac77ef6b73baff6c1ba769f4f31c74d4a5fe72214d86093108506884b78","name":"shades@1.csv","type":"text/csv","lastModified":1700986829396.487,"size":39845},{"id":"5cebac76312e8053a447f2dfe83985e885f6ab6947681a0a4400b44bcca12c189b3e0a92ba2e75a627b2fb95140fe530e1b57836dc4e7a30ebad5340e9f662f6","href":"https://static.observableusercontent.com/files/5cebac76312e8053a447f2dfe83985e885f6ab6947681a0a4400b44bcca12c189b3e0a92ba2e75a627b2fb95140fe530e1b57836dc4e7a30ebad5340e9f662f6","name":"allShades.csv","type":"text/csv","lastModified":1700986821802.459,"size":2334253}] 2f:{"title":"Foundation shades","cells":[{"id":0,"value":"# Foundation shades","pinned":false,"hidden":false,"mode":"md"},{"id":565,"value":"I got my hands on [some datasets](https://github.com/the-pudding/data) about foundations published by [The Pudding](https://pudding.cool/).\n\nThese articles were:\n- [_The Diversity of Makeup Shades_](https://pudding.cool/2018/06/makeup-shades/) by Amaka, Thomas (2021)\n- [_The Naked Truth_](https://pudding.cool/2021/03/foundation-names/) by Li, Thomas, Manian (2018)","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"viewof dataset = Inputs.radio(\n new Map([\n [\"from The Naked Truth (2021), data governed by Amber Thomas\", thomas2021],\n [\n \"from The Diversity of Makeup Shades (2018), data governed by Jason Li\",\n li2018\n ]\n ]),\n { label: \"Choose dataset\", value: thomas2021 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"## Liquid foundations in Oklab, compared to the RGB gamut","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof r = Inputs.range([0, 4], { label: \"dot radius\", step: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof reverse = Inputs.toggle({ label: \"sort reverse\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"viewof searchedShadesWithColorData = Inputs.search(shadesWithColorData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"Plot.plot({\n height: 800,\n width,\n title: \"Liquid foundations by lightness\",\n marks: [\n Plot.frame(),\n Plot.dot(\n shadesWithColorData,\n Plot.dodgeX({\n y: \"lightness\",\n fill: \"hex\",\n sort: \"lightness\",\n padding: -1,\n tip: true,\n channels: CHANNELS,\n href: \"url\",\n target: \"_blank\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"blueprint({\n title: \"Liquid foundations by lightness over hue\",\n x: \"hue\",\n y: \"lightness\",\n // height: 500,\n xDomain: [15, 90],\n aspectRatio: 0.012,\n sort: \"saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof facetColumns = Inputs.range([2, 6], {\n label: \"Facet columns\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"blueprint({\n title: \"Liquid foundations by lightness over hue, faceted by brand\",\n x: \"hue\",\n y: \"lightness\",\n width,\n xDomain: [15, 90],\n aspectRatio: 0.012,\n sort: \"saturation\",\n facet: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"blueprint({\n title: \"Liquid foundations by lightness over saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"blueprint({\n title: \"Liquid foundations by lightness over saturation, faceted by brand\",\n width,\n facet: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"culori = require('culori@3.3.0/bundled/culori.umd.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"import {rgbGamutInOklab} from \"@mjbo/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"### Plot elements","pinned":false,"hidden":false,"mode":"md"},{"id":386,"value":"CHANNELS = ({\n brand: \"brand\",\n product: \"product\",\n name: \"name\",\n saturation: \"saturation\",\n lightness: \"lightness\",\n hue: \"hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"thomas2021 = await FileAttachment(\"allShades.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"li2018 = await FileAttachment(\"shades@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"shadesWithColorData = dataset.map((shade) => {\n let { hex } = shade;\n\n if (!hex.startsWith(\"#\")) {\n hex = \"#\" + hex;\n }\n\n const {\n h: hue,\n s: saturation,\n l: lightness\n } = culori.converter(\"okhsl\")(hex);\n\n return {\n ...shade,\n hex,\n oklab: culori.converter(\"oklab\")(hex),\n okhsl: culori.converter(\"okhsl\")(hex),\n hue,\n saturation,\n lightness\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"shadesWithColorDataByBrandsByProductCount = Object.fromEntries(\n _.reverse(\n _.sortBy(\n Object.entries(_.groupBy(shadesWithColorData, (shade) => shade.brand)),\n (d) => d[1].length\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}